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
}
}
Related
I need to add a blur effect on a text.
If I were using React, I would use the filter css property.
But I can't find the equivalent syntax to use it in a React native stylesheet.
How do i need to write it ?
you can install react-native-blur / expo-blur
If it's not working for you, this is a workaround/hack that clones the look of blurry text. You can adjust the values to your liking.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>
I'm trying to create this button into my React Native project.
The problem is with that blue shadow. I've already tried packages like react-native-neomorph-shadows. I also tried with:
shadowColor: COLORS.primary,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
About this, the problem is that the shadow isn't powerful enough.
Do you have any ideas how can I do this? Thank you!
EDIT: Maybe this helps... In the design file that effect is made by blurring a blue button and positioning it behind the real button. I've tried this also by using react-native-blur package but the result is also bad.
On IOS you won't need any packages you can just use react-native's shadow props described here: https://reactnative.dev/docs/shadow-props
There is also the elevation property for android, but you won't be able to change the color:
https://reactnative.dev/docs/view-style-props#elevation
Here's an IOS example view with a similar shadow effect:
<View style={{
backgroundColor: '#22A7F0',
height: 48,
width: 240,
borderRadius: 10,
shadowOpacity: 1,
shadowRadius: 10,
shadowOffset: { width: 0, height: 0 },
shadowColor: '#22A7F0',
}}/>
It is noteworthy that the sample you provided combines both a shadow effect and a LinearGradient, so you may want to look into that as well.
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 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,
}