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,
}
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 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,
}
})
}
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've a card view with shadow. How can I differ the width of the shadow differently in top, bottom, right and left of the card?
const styles = {
containerStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 4,
marginLeft: 15,
marginRight: 15,
marginTop: 5
}
};
I used this library for handle shadows in my react-native app.