React Native Complex Shadow With Inset's

user_4905703 0
Viewed 415

I have a very (relatively) complex style requirement for a component. Part of the complexity comes from the CSS box-shadow property. As we know, React Native does not offer this property. Instead, one has to make use of the four style properties shadowOffset, shadowRadius, shadowColor and shadowOpacity. For this component, I have four actual shadows, two of which have inset -- which, React Native does not support insets.

Here's the CSS snippet I'm aiming to implement:

background: #FFFFFF;
box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.07), 
       0px 8px 16px rgba(0, 0, 0, 0.07), 
       inset 0px 2px 4px #FFFFFF, 
       inset 0px -2px 4px rgba(0, 0, 0, 0.25);
border-radius: 16px;

I'm at a total loss. I've tried more than a few things. I've tried using the out-of-the-box shadow* properties with React Native, and trying to recreate an inset like this fella did. I've tried using styled components. I even tried to hack together using SVG (this requirement is coming from Figma which offers an SVG).

Any ideas on how I can get this to work?

I'm thinking maybe my only option is to bridge to a native iOS component, but I've never bridged that gap and it seems intimidating.

react-native shadow css
1 Answers
 <LinearGradient
  style={styles.gradientButton}
  colors={['#040406', '#040406', '#040406', '#444446']}
  start={{ x: 0.48, y: 0.1 }}
  end={{ x: 0.5, y: 0.6 }}
>

with background #777 works good

see image

user_153559370
Related