Box Shadows look beautiful in iOS but cannot be implemented in Android in a similar fashion. The only alternative I have found is to use elevations which are native to Android. Have you found a better solution?
I have implemented CardView for react-native with elevation, that support android(All version) and iOS. github.com/Kishanjvaghela/react-native-cardview. Check this out. Its easy to use
Found a cool solution! ๐
Use a LinearGradient at the bottom of the component in a separate empty view.
<TouchableOpacity
activeOpacity={0.8}
style={{
backgroundColor: '#ffffff',
marginBottom: Platform.OS === 'android' ? 0 : 16,
//iOS stuff
shadowOffset: { width: 0, height: 2, },
shadowColor: 'rgba(0,0,0,0.03)',
shadowOpacity: 1,
shadowRadius: 4,
}}
onPress={...}
>
.
.
.
.
</TouchableOpacity>
{Platform.OS === 'android' &&
<View style={{ marginBottom: 12 }}>
<LinearGradient
colors={['rgba(0,0,0,0.05)', 'transparent']}
style={{
left: 0,
right: 0,
height: 4,
}}
/>
</View>
}
Roy Ben Sasson
You can use my react-native-simple-shadow-view