Is there any way to render shadow as in web in react native, using elevation most of the times does not fits all the needs and shadow props only work for IOS, is there any react native builtin way to handle shadow props in android, if no then please suggest good light weight packages for shadow props must be easy to use. Thank you

Is there any way to render shadow as in web in react native, using elevation most of the times does not fits all the needs and shadow props only work for IOS, is there any react native builtin way to handle shadow props in android, if no then please suggest good light weight packages for shadow props must be easy to use. Thank you

• javascript
• android
• reactjs
• react-native

Share Improve this question Follow asked Sep 25, 2018 at 14:24 Ammar TariqAmmar Tariq 84722 gold badges1414 silver badges3030 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Shadow properties in react-native applies only on iOS. For Android you should set elevation property in your view style.

You can use my react-native-simple-shadow-view

• This enables almost identical shadow in Android as in iOS
• No need to use elevation, works with the same shadow parameters of iOS (shadowColor, shadowOpacity, shadowRadius, offset, etc.) so you don't need to write platform specific shadow styles
• Can be used with semi-transparent views
• Supported in android 18 and up

It is possible to use this code to make shadow in android:

const styles = StyleSheet.create({
  myShadow: {
    backgroundColor: "red",
    //flex: 1,
    height:50,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOpacity: 0.8,
    shadowRadius: 4,
    elevation: 4,
  },
});

inside the render you can use like this:

render() {
<View style={styles.myShadow}/>
}

For android, the elevation property does not work very well, I remand this lib, the style works the same as on ios: react-native-shadow-view

Best way to provide shadow in Android and Ios both application in react native

shadowColor: "#000",
shadowOffset: {
	width: 0,
	height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

elevation: 5,

Link : https://ethercreative.github.io/react-native-shadow-generator/