How to fix shadow not appearing with React Native?

Sometimes, we want to fix shadow not appearing with React Native.

In this article, we’ll look at how to fix shadow not appearing with React Native.

How to fix shadow not appearing with React Native?

To fix shadow not appearing with React Native, we should set the shadow styles and the elevation style.

For instance, we write:

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

export default function App() {
  return (
    <View>
      <Text
        style={{
          width: 50,
          height: 30,
          shadowOffset: { width: 5, height: 5 },
          shadowColor: 'black',
          shadowOpacity: 1,
          elevation: 2,
          backgroundColor: '#0000',
        }}>
        hello
      </Text>
    </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.

elevation sets the shadow’s height.

Conclusion

To fix shadow not appearing with React Native, we should set the shadow styles and the elevation style.