Creating a UI with box shadow in react native

Question

I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?

Solution 1

You will have to use different style props for iOS and Android.

Android

It's very simple for android, just use the elevation style prop (See docs) . An example:

boxWithShadow: {
    elevation: 5
}

iOS

In iOS you have more flexibility, use the Shadow props (See docs). An example:

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

Summary

In summary, to get box shadow for both platforms, use both sets of style props:

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.

Solution 2

Hey, Look it's Done Now !

const styles = StyleSheet.create({
    shadow: {  
      borderColor:'yourchoice', // if you need 
      borderWidth:1,
      overflow: 'hidden',
      shadowColor: 'yourchoice',
      shadowRadius: 10,
      shadowOpacity: 1,
    }
});

Keep in mind the shadow's props are only available for IOS.

Solution 3

I've found a workaround using a Linear Gradient for a very similar issue. I haven't found anything better anywhere on stack, so I suppose I'll add it here. It's especially nice and easy if you only want top and bottom, or side shadows.

I added a top and bottom inner box shadow to an image with full width and 140 height. You could create multiple gradients to make an outer box shadow. Don't forget about the corners. You can use the start and end props to make angled shadows / gradients, maybe that'll work for corners if you need them.

<ImageBackground
  source={imagePicker(this.props.title)}
  style={styles.image}
>
  <LinearGradient 
    colors={[
      'transparent',
      'transparent',
      'rgba(0,0,0,0.2)',
      'rgba(0,0,0,0.6)'
    ]}
    start={[0,0.9]}
    end={[0,1]}
    style={styles.image_shadows}
  />
  <LinearGradient 
    colors={[
      'rgba(0,0,0,0.6)',
      'rgba(0,0,0,0.2)',
      'transparent',
      'transparent'
    ]}
    start={[0,0]}
    end={[0,0.1]}
    style={styles.image_cover}
  />
</ImageBackground>



const styles = StyleSheet.create({
  image: {
    flex: 1,
    resizeMode: "stretch",
    justifyContent: "center",
    paddingTop:90,
    paddingLeft:10,
    height:140,
    flexDirection: 'row',
  },
  image_shadows: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 140
  }
}

If you use expo you can install it with 'expo install expo-linear-gradient' Expo Docs. If not, I believe react-native-linear-gradient is similar React-Native-Linear-Gradient github.

Solution 4

You can use library "react-native-shadow-2", works for both android and iOS. No need to write seperate chunk of code for iOS/android & has typescript support also.

Installation:

1. First install react-native-svg.
2. Then install react-native-shadow-2: npm i react-native-shadow-2

Structure:

import { Shadow } from 'react-native-shadow-2';

<Shadow>
   {/* Your component */}
</Shadow>

There are many props such as startColor, finalColor, radius, offset. You can use as per your requirements.

View more solutions

Comments

[Joulin Nicolas]

The Shadow's props are only available for IOS.

[AmerllicA]

This answer just works in iOS and the overflow: 'hidden'; vanish all of the shadows, So if you wanna see the all of the shadows omit overflow: 'hidden';.

[sunnyiitkgp]

Isn't there a way to customise shadow props in Android?

[Sarath S Menon]

I don't think you can customize in Android.

[Hamidreza Sadegh]

and use backgroundColor: "#fff"

[Otto]

On iOS, this adds shadow on all the sub-elements of that box, Lol

[Nikhil Gowda]

How to set box shadow only at bottom?

[fixedDrill]

and also give the box some width and height