react native-tutorial

Box shadow in React Native

It’s not always easy to apply box shadows in a React Native project. Applying consistent box shadows with various platform-specific implementation procedures can be time-consuming for developers who must build for both the Android and iOS platforms.

Utilizing iOS box shadows with React Native shadow properties

We can utilise four React Native shadow properties to build shadow boxes for iOS devices. The first one, shadowColor, controls the hue of the box shadow. It should be noted that Android devices only support this one shadow prop. The second prop, shadowOffset, is compatible with objects that have width and height attributes with a value:

{ width: number; height: number}

The width property determines the X offset of the shadow while the height property determines the Y offset since it is described by the X and Y offsets relative to the element the box shadow is applied to.

Positive and negative numbers are both acceptable for props for width and height. The third prop, shadowOpacity, controls the box shadow’s transparency. The value of the prop can be between 0 and 1, with 0 denoting perfect transparency and 1 denoting complete opacity.

The blur radius of the component is set using the fourth prop, shadowRadius, which takes a number as its value. The blur increases with value, making the shadow appear wider and lighter. Negative values cannot be used with this prop.

Let’s employ these tools by using the following to apply a box shadow to a card component:

// wherever your return statement is   
  <View style={[styles.card, styles.shadowProp]}>
        <View>
          <Text style={styles.heading}>
            React Native Box Shadow (Shadow Props)
          </Text>
        </View>
        <Text>
          Using the elevation style prop to apply box-shadow for iOS devices
        </Text>
      </View>

To apply different styles to the card component, import StyleSheet next:

// remember to import StyleSheet from react-native
const styles = StyleSheet. create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '100%',
    marginVertical: 10,
  },
  shadowProp: {
    shadowColor: '#171717',
    shadowOffset: {width: -2, height: 4},
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
});

With the code added, the app renders a card with a box shadow.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.