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:
- Trying to add a normal shadow (elevation effect). That works for an
elevated
button, but can't be applied to thefocused
one. (i used some shadow generator like this one by Ether) - Trying
react-native-svg
which would allow us to build a custom XML/CSS file with all properties (exceptinset
, as it is not supported?) - Trying Expo Linear Gradient. I have tried to go from [x:0,y:1] to [x:1,y:0] - diagonal way with colors - [black (10%), grey(40%), light grey (40%), white (10%)]. It does look almost right, but still it is not radial as i expected it to be.
- Trying conditional rendering. I know it is a bad experience rendering the image based on condition, but I have tried to create two images in GIMP (one with focused effect and one without), but I honestly couldn't do it with circular images...
If anybody can propose any good solution or pinch me in the right direction, I would highly appreciate it.
from React Native Inset Shadow Effect
No comments:
Post a Comment