Saturday 24 July 2021

React Native Inset Shadow Effect

Figma example

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:

  1. Trying to add a normal shadow (elevation effect). That works for an elevated button, but can't be applied to the focused one. (i used some shadow generator like this one by Ether)
  2. Trying react-native-svg which would allow us to build a custom XML/CSS file with all properties (except inset, as it is not supported?)
  3. 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.
  4. 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