Creating a UI with box shadow in react native - react-native

Question

I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?

Answer 1

You will have to use different style props for iOS and Android.
Android
It's very simple for android, just use the elevation style prop (See docs) . An example:
boxWithShadow: {
elevation: 5
}
iOS
In iOS you have more flexibility, use the Shadow props (See docs). An example:
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 1,
}
Summary
In summary, to get box shadow for both platforms, use both sets of style props:
boxWithShadow: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
}
Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.

Answer 2

Hey, Look it's Done Now !
const styles = StyleSheet.create({
shadow: {
borderColor:'yourchoice', // if you need
borderWidth:1,
overflow: 'hidden',
shadowColor: 'yourchoice',
shadowRadius: 10,
shadowOpacity: 1,
}
});
Keep in mind the shadow's props are only available for IOS.

Answer 3

You can use library "react-native-shadow-2", works for both android and iOS.
No need to write seperate chunk of code for iOS/android & has typescript support also.
Installation:
First install react-native-svg.
Then install react-native-shadow-2:
npm i react-native-shadow-2
Structure:
import { Shadow } from 'react-native-shadow-2';
<Shadow>
{/* Your component */}
</Shadow>
There are many props such as startColor, finalColor, radius, offset. You can use as per your requirements.

Answer 4

I've found a workaround using a Linear Gradient for a very similar issue. I haven't found anything better anywhere on stack, so I suppose I'll add it here. It's especially nice and easy if you only want top and bottom, or side shadows.
I added a top and bottom inner box shadow to an image with full width and 140 height. You could create multiple gradients to make an outer box shadow. Don't forget about the corners. You can use the start and end props to make angled shadows / gradients, maybe that'll work for corners if you need them.
<ImageBackground
source={imagePicker(this.props.title)}
style={styles.image}
>
<LinearGradient
colors={[
'transparent',
'transparent',
'rgba(0,0,0,0.2)',
'rgba(0,0,0,0.6)'
]}
start={[0,0.9]}
end={[0,1]}
style={styles.image_shadows}
/>
<LinearGradient
colors={[
'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.2)',
'transparent',
'transparent'
]}
start={[0,0]}
end={[0,0.1]}
style={styles.image_cover}
/>
</ImageBackground>
const styles = StyleSheet.create({
image: {
flex: 1,
resizeMode: "stretch",
justifyContent: "center",
paddingTop:90,
paddingLeft:10,
height:140,
flexDirection: 'row',
},
image_shadows: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 140
}
}
If you use expo you can install it with 'expo install expo-linear-gradient' Expo Docs. If not, I believe react-native-linear-gradient is similar React-Native-Linear-Gradient github.