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?

Attaching the image

Sarath S Menon · Answer 1 · 2022-07-27T10:27:53.190

148

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.

edited Jul 27 '22 at 10:27

answered Aug 13 '18 at 13:44

Sarath S Menon

2,168
1
16
21

1

Isn't there a way to customise shadow props in Android? – sundeepg Feb 06 '19 at 13:56
I don't think you can customize in Android. – Sarath S Menon Feb 07 '19 at 10:25
8

and use backgroundColor: "#fff" – Hamidreza Sadegh Apr 23 '19 at 06:46
On iOS, this adds shadow on all the sub-elements of that box, Lol – Otto Oct 25 '19 at 19:45
How to set box shadow only at bottom? – Nikhil Gowda Apr 01 '20 at 07:30
1

and also give the box some width and height – fixedDrill Feb 02 '22 at 10:19
shadowColor works on both android and iOS – Irfan wani Jun 10 '23 at 09:52

Nitin Bagoriya · Answer 2 · 2023-03-19T20:56:30.817

4

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.

edited Mar 19 '23 at 20:56

answered Aug 31 '17 at 16:44

Nitin Bagoriya

158
6

The Shadow's props are only available for IOS. – Joulin Nicolas Jul 31 '18 at 12:03
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';`. – AmerllicA Oct 03 '18 at 14:04

score 2 · Answer 3 · answered Oct 19 '21 at 15:12

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:

First install react-native-svg.
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.

score 1 · Answer 4 · answered May 09 '20 at 18:43

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.

score 1 · Answer 5 · answered Mar 14 '23 at 05:52

Sometimes, even though a shadow effect has been applied to a component, it may not be immediately visible if the component is taking up the entire width and height of the screen. In such cases, it is recommended to adjust the component's styling by adding margin, changing the background-color, or using other visual cues to create a contrast between the component and its surroundings. This can help to highlight the shadow effect and make it more noticeable to the user.

Style

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  box: {
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0, 0, 0, 1)',
        shadowOpacity: 0.5,
        shadowRadius: 5,
        shadowOffset: {
          height: 5,
          width: 5,
        },
      },
      android: {
        elevation: 5,
        backgroundColor: 'rgba(0, 0, 0, 1)',
      },
    }),
  },
});

Component

const Shadow = ({ children }) => {
    return (
        <View style={styles.box}>{children}</View>
    );
};

Creating a UI with box shadow in react native

5 Answers5

Linked