How to add text shadow in React Native?

Sometimes, we want to add text shadow in React Native.

In this article, we’ll look at how to add text shadow in React Native.

How to add text shadow in React Native?

To add text shadow in React Native, we can set some text shadow styles.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  const [height, setHeight] = React.useState(30);

  return (
    <View>
      <Text
        style={{
          textShadowColor: 'rgba(0, 0, 0, 0.75)',
          textShadowOffset: { width: -1, height: 1 },
          textShadowRadius: 10,
        }}>
        hello world
      </Text>
    </View>
  );
}

to set the textShadowColor to the text shadow color.

We set textShadowOffset to add depth to the shadow.

And we set textShadowRadius to set the shadow radius.

Conclusion

To add text shadow in React Native, we can set some text shadow styles.