React Native: How to add shadow effects on Android

To add shadow effects on Android, you need to use the elevation property:

elevation: x (x is a number)

Example

This example shows you how to create drop shadows on both iOS and Android.

Screenshot:

The complete code:

import React from 'react';
import {View, StyleSheet} from 'react-native';

function App() {
  return (
    <View style={styles.screen}>
      <View style={styles.box1}></View>

      <View style={styles.box2}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box1: {
    width: 200,
    height: 200,
    backgroundColor: 'white',

    // add shadows for iOS only
    shadowColor: 'blue',
    shadowOffset: {width: 5, height: 5},
    shadowOpacity: 0.26,

    // add shadows for Android only
    // No options for shadow color, shadow offset, shadow opacity like iOS
    elevation: 8,
  },
  box2: {
    marginTop: 50,
    width: 250,
    height: 150,
    backgroundColor: '#ff9f43',

    // add shadows for iOS only
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.3,

    // add shadows for Android only
    // No options for shadow color, shadow offset, shadow opacity like iOS
    elevation: 10,
  },
});

export default App;

Unfortunately, at this time, when using drop shadow on Android with elevation, you can not customize the offset, color, and opacity. However, there are some third-party libraries that can help you, for example, react-native-shadow.

Conclusion

We’ve gone through an example of implementing box-shadow for both Android and iOS. If you’d like to explore more new and fascinating stuff in React Native, take a look at the following articles:

• How to Implement a Picker in React Native
• How to Create a Confirm Dialog in React Native
• Using Image Picker and Camera in React Native (Expo)
• How to render HTML content in React Native
• How to set a gradient background in React Native

You can also check our React topic page and React Native topic page for the latest tutorials and examples.