I have a Figma example of a bottom navigation tab bar (image above). It includes two buttons that are displayed with a focused
effect. As you can see, when the button is pushed (focused on) it has an inset shadow (which seems to be impossible to achieve at this point in RN), and the other one has an elevation effect. Assume that they would switch when another button becomes under-focused.
The problem lies in implementing the inset shadow for me. I have applied several approaches to this problem but couldn't find an optimal solution. As some of the examples show that there is a possibility of reaching the inset shadow for a box (rectangular); I find it impossible to achieve the same result for the circular button.
The ways that I have tried:
elevated
button, but can't be applied to the focused
one. (i used some shadow generator like this one by Ether)react-native-svg
which would allow us to build a custom XML/CSS file with all properties (except inset
, as it is not supported?)If anybody can propose any good solution or pinch me in the right direction, I would highly appreciate it.
To set a box-shadow in React: Set the style prop on the element. Set the boxShadow property to add a shadow effect around the element's frame.
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.
try this library react-native-neomorph-shadows
something like this
import { Neomorph } from 'react-native-neomorph-shadows';
...
<Neomorph
inner // <- enable shadow inside of neomorph
swapShadows // <- change zIndex of each shadow color
style={{
shadowRadius: 10,
borderRadius: 75,
backgroundColor: '#DDDDDD',
width: 150,
height: 150,
}}
>
</Neomorph>
as @denistepp comment This library is not working with expo
the docs say
IMPORTANT: this library,
starting from v1.0.0, no longer supports expo
because React Native Art library was recently deprecated from expo.
i create this snack with this dependencies
"react-native-svg": "12.1.1",
"react-native-neomorph-shadows": "0.0.8"
see can find version v0.0.8 docs here
import { Text, View, StyleSheet } from 'react-native';
import { ShadowBox, NeomorphBox } from 'react-native-neomorph-shadows';
export default function App() {
return (
<View style={{
flex: 1,
flexDirection : "row",
alignItems: 'center',
justifyContent: 'space-around',
backgroundColor: '#fcfcfc',
}}>
<ShadowBox
inner
useSvg
style={{
shadowOffset: {width: 3, height: 3},
shadowOpacity: .8,
shadowColor: "#ddd",
shadowRadius: 3,
borderRadius: 35,
backgroundColor: '#fff',
width: 70,
height: 70,
}}>
</ShadowBox>
<ShadowBox
useSvg
style={{
shadowOffset: {width: 4, height: 4},
shadowOpacity: .8,
shadowColor: "#e6e6e6",
shadowRadius: 3,
borderRadius: 35,
backgroundColor: '#fff',
width: 70,
height: 70,
}}>
</ShadowBox>
</View>
);
}
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