How to Implement Native Box Shadow in React

Today’s tutorial demonstrates how to use box shadows in a React Native app for Android and iOS devices.

React Native Box Shadow

Box shadows are not always easy to implement in a React Native app. Because developers must design for Android and iOS platforms, implementing uniform box shadows with platform-specific implementation techniques can be time-consuming.

We can utilize four React Native shadow properties to generate shadow boxes for iOS devices.

1. The shadowColor defines the color of the box shadow. We should emphasize that this is the only example of shadowProp that works with Android devices.
2. The shadowOffset prop allows objects with width and height parameters that have a numerical value.
3. ShadowOpacity controls the transparency of the box shadow. The value of the prop varies from 0 to 1, with 0 indicating total transparency and 1 representing complete opacity.
4. The shadowRadius accepts an integer as its value to set the component’s blur radius. The blur increases as the value increases, making the shadow broader and lighter. Negative values are not accepted for this prop.

Let’s put these properties to work by adding a box shadow to a card component and doing the following:

Example Code:

import {StyleSheet, Text, View} from 'react-native';
import {Card} from 'react-native-paper';

export default function App() {
  return (
    <View style={[styles.card, styles.shadowProp]}>
      <View>
        <Text style={styles.heading}>React Native Box Shadow</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 13,
  },
  card: {
    backgroundColor: "red",
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: "20%",
    marginVertical: 10,
  },
  shadowProp: {
    shadowColor: "black",
    shadowOffset: { width: 2, height: 4 },
    shadowOpacity: 1,
    shadowRadius: 5,
  },
});

The code causes the app to generate a card with a box shadow.

In Android, we may create box shadows using the elevation prop, which uses the Android Elevation API. It gives the object a drop shadow and changes the z-order for overlapping views.

Let’s add a box shadow to a card component to see how to use it this way. First, we should note that the styles.elevation attribute only works when applied to a <View> part:

Example Code:

import {Card} from 'react-native-paper';

import {StyleSheet, Text, View} from './App/react-native';

export default function App() {
  return (<View style = {[styles.card, styles.elevation]}><View>
          <Text style = {styles.heading}>React Native Box
              Shadow</Text>
      </View>
          <Text>Using the elevation style prop</Text>
    </View>);
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 13,
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingVertical: 45,
    paddingHorizontal: 25,
    width: '30%',
    marginVertical: 10,
    marginLeft: 50,
    marginTop: 50,
  },
  elevation: {
    elevation: 30,
    shadowColor: 'red',
  },
});

We connected the android device to check whether the code worked or not. See the following output, and it is working as expected:

We have no control over the blur radius, opacity, or offset of the box shadow; we have control over its color. Based on the preceding talk, we learned how to create shadow effects in React-Native mobile applications.

We learned about the many properties that BoxShadow and BorderShadow support. We added a shadow effect to the text, the box, and the border.

The syntax for creating a shadow effect in React-Native is relatively straightforward. So, with some scripting, one can make a fantastic user interface with a shadow effect. This effect is mainly used to track movement and determine surface edges.