CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Ammar Tariq
Ammar Tariq

Reputation: 847

React-native shadow props for android

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

Upvotes: 4

Views: 6041

Answers (5)

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

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,
enter image description here Link : https://ethercreative.github.io/react-native-shadow-generator/

Upvotes: 0

hehe bu
hehe bu

Reputation: 101

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

Upvotes: 0

RoyBS
RoyBS

Reputation: 1281

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

Upvotes: 2

Saeid
Saeid

Reputation: 2036

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}/>
}

Upvotes: 0

sela
sela

Reputation: 314

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

Upvotes: 2

Related Questions