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.

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, 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.

Happy coding 🙂