How to create a UI with box shadow in React Native?

Sometimes, we want to create a UI with box shadow in React Native.

In this article, we’ll look at how to create a UI with box shadow in React Native.

How to create a UI with box shadow in React Native?

To create a UI with box shadow in React Native, we can set some 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() {
  return (
    <View>
      <View
        style={{
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 1 },
          shadowOpacity: 0.8,
          shadowRadius: 1,
        }}>
        <Text>hello world</Text>
      </View>
    </View>
  );
}

to add a view with a box shadow around it.

shadowOffset adds the shadow effect.

shadowColor sets the shadow color.

And shadowOpacity sets the shadow opacity.

Conclusion

To create a UI with box shadow in React Native, we can set some shadow styles.