React Native Inset Shadow Effect

Question

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.

Answer 1

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>

UPDATE: expo support

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.

but you still have a chance with version min v1.0.0

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

The result

full code work with expo last version v42

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>
    );
  
}