How to set shadows in React Native?

Sometimes, we want to set shadows in React Native.

In this article, we’ll look at how to set shadows in React Native.

How to set shadows in React Native?

To set shadows in React Native, we can add a few styles.

For instance, we write:

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

export default function App() {
  return (
    <View
      style={{
        shadowColor: 'black',
        shadowOpacity: 0.26,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 10,
        elevation: 3,
        backgroundColor: 'white',
      }}>
      hello world
    </View>
  );
}

We set the shadowColor property to set the shadow color.

shadowOpacity sets the shadow opacity.

shadowOffset sets the shadow position relative to the container.

shadowRadius sets the shadow radius.

elevation sets the depth of the shadow.

Conclusion

To set shadows in React Native, we can add a few styles.