Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 471
denistepp Avatar asked Jul 19 '21 20:07

denistepp


People also ask

How do I add a drop shadow in react?

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.

How do you set the bottom shadow in react-native?

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.


Video Answer


1 Answers

try this library react-native-neomorph-shadows

enter image description here

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

enter image description here

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

like image 75
Ahmed Gaber Avatar answered Oct 08 '22 05:10

Ahmed Gaber