How do I render a shadow?

Question

How do I render a shadow on a View? I've tried many combinations of shadowColor, shadowOffset, shadowOpacity, and shadowRadius, which seem to do nothing. I am sure the style is applied correctly, since other attributes I've set work.

Answer 1

I am using React-Native 0.40 and below code works for me both on IOS and Android.

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

 class MainApp extends Component {   render() {     return (       <View style={styles.container}>          <View elevation={5} style={styles.buttonContainer}>           <Text style={styles.textStyle}>Shadow Applied</Text>         </View>       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#FFFFFF'   },   textStyle: {     color: '#FFFFFF'   },   buttonContainer: {     backgroundColor: '#2E9298',     borderRadius: 10,     padding: 10,     shadowColor: '#000000',     shadowOffset: {       width: 0,       height: 3     },     shadowRadius: 5,     shadowOpacity: 1.0   } }) 

Tested on iPhone.

Edit

Comment from @ James. Thanks.

Note: For those on android, the backgroundColor is critical. I was using View as a container for another element and couldn't get a shadow until I specified a background color.