CODEWITHSUNDEEP
react-nativebox-shadow
rahulvramesh
rahulvramesh

Reputation: 839

Creating a UI with box shadow in react native

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

Upvotes: 74

Views: 181401

Answers (6)

Harsh Parmar
Harsh Parmar

Reputation: 11

Put this in view style:

card: {
       padding: 8,
       marginVertical: 4,
       borderWidth: 0.3,
       borderRadius: 8,
       shadowColor: "black",
       shadowOffset: {width: 0, height: 3},
       backgroundColor: 'white',
       shadowOpacity: 0.2,
       shadowRadius: 5,
       elevation: 2,
      }

Upvotes: 0

Nitin Bagoriya
Nitin Bagoriya

Reputation: 158

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.

Upvotes: 3

Zahir Masoodi
Zahir Masoodi

Reputation: 860

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

Upvotes: 2

Sarath S Menon
Sarath S Menon

Reputation: 2341

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.

Upvotes: 159

Yashaswi Pandey
Yashaswi Pandey

Reputation: 41

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.

Upvotes: 4

David Pietrzak
David Pietrzak

Reputation: 21

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.

Upvotes: 2

Related Questions