I have added the following style. This gives shadow from all the sides. I just want to add a shadow to the bottom.
{
shadowOffset: { width: 0, height: 2 },
shadowRadius: 3.84,
shadowOpacity: 0.25,
elevation: 5
}
You can do that on IOS or the web, but Android isn't supporting it, on Android you could just define elevation and other options of shadow don't work.
If you really need to do that, use BorderBottom,
{
...platform.select({
android:{
borderBottomWidth:2,
borderBottomColor:'#00000033'
},
default:{
shadowOffset: { width: 0, height: 2 },
shadowRadius: 3.84,
shadowOpacity: 0.25,
}
})
}
Related
This is the code I used for the elevation
<View
style={[
{
backgroundColor: '#ffffff',
width: 30,
height: 30,
borderRadius: 15,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
]}
>
Image of shadow
You can clearly see the difference between these shadows.
I am using the same component multiple time in scrollView as below:-
The Image of my scrollView
I'm trying to set a shadow on a custom card component in React Native with a borderRadius property of 10.
Here is the code:
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
shadowOffset: {
width: 0,
height: 3,
},
elevation: 3,
How can I apply rounded corners to the shadow?
You can use the shadowRadius property to shape the rounded corners. But this will only work for iOS since Android only takes the elevation property to create shadows. You can read more about this in the official documentation here. https://reactnative.dev/docs/shadow-props
You can have styles like this example below applied to the container view of your custom card.
const shadowsStyling = {
width: 100,
height: 100,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
I try to shadow image like on ios but i can't. I use elevation but nothing change and i get warning Invalid props.style key 'evelation'. How can i show image on Android like ios?
ss-ios
ss-android
ss-warning
My style:
shadowColor: 'black',
shadowOffset: {width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 3,
elevation: 5
It's a typo, the warning is telling you that you wrote evelation even if the code you posted is fine, are you sure they are the same?
try giving it a platform specific
import{Platform} from 'react-native';
const styles = StyleSheet.create({
image: {
..Platform.select({
ios: {
shadowColor: 'black',
shadowOffset: {width: 0, height: 2 },
shadowOpacity: 0.5,
shadowRadius: 3,
},
android: {
elevation: 4
},
}),
}
})
You can use the shadow generator.
https://ethercreative.github.io/react-native-shadow-generator/
You will have to define the shadow on top view component and give the same width and height on both view and image component.
Example
<View
style={{
width: 200,
height: 200,
backgroundColor: 'yellow',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.58,
shadowRadius: 16.0,
elevation: 24,
}}>
<Image
source={DemoImage}
style={{
width: 200,
height: 200,
}}
/>
</View>
I have a component with following styles
shadowOffset: { width: 0, height: 4 },
shadowColor: Colors.grey,
shadowOpacity: 0.5,
shadowRadius: 2,
// overflow: 'visible',
borderRadius: 5,
but it's given me shadows for all elements inside a container. How to apply shadows only for container (Card) itself?
you have to give the container a backgroundColor:'white' for example
container:{
backgroundColor:'white',
borderRadius: 5,
...Platform.select({
ios: {
shadowOffset: { width: 0, height: 4 },
shadowColor: Colors.grey,
shadowOpacity: 0.5,
shadowRadius: 2,
// overflow: 'visible',
},
android: {
elevation: 4
},
})
}
I am trying to create a bottom navigation bar like YouTube or Instagram have but I am running into issue creating the shadow effect:
This is my current code;
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0
},
shadowRadius: 50,
shadowOpacity: 1.0,
elevation: 1
This produces a shadow that is only visible on the bottom of the navigation bar but not on the top. Is there a way to place a negative shadowOffset so that the shadow is also visible on the top?
Example:
You can add small marginTop to your container, than add styles:
{
shadowRadius: 2,
shadowOffset: {
width: 0,
height: -3,
},
shadowColor: '#000000',
elevation: 4,
}