Menu
I would like to know how to apply shadow only to the main outer view. Here on applying shadow, it's getting applied to all the inner elements
851
🤖 How to apply shadows on Android platform On Android, we need to use the elevation view style prop from react-native to add shadows. elevation: 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.
To set elevation shadow only on the bottom on React Native, we wrap out View with another View and set its overflow to 'hidden' . to set overflow to 'hidden' on the outer View . And then we add the shadow styles in the inner view to add the shadow. elevation is needed for Android to show the shadow.
For adding box shadows in Android, we can use the elevation prop, which uses the Android Elevation API. Next, import the StyleSheet again to style the card: // remember to import StyleSheet from react-native const styles = StyleSheet.
The trick to make the shadow props of parent don't inherit to children element, is to set a background color to the component on which you set the shadow. For example that would be:
<View
style={{ backgroundColor: '#fff' }}
shadowOffset={{height: 10}}
shadowColor='black'
shadowOpacity={0.5}
>
<Text>{title}</Text>
</View>
Unfortunately this only works with colored backgrounds – when setting a transparent background with RGBA or 'transparent' is doesn't help.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
