It’s not always easy to apply box shadows in React Native apps. Because developers have to build for both Android and iOS platforms, applying consistent box shadows can be cumbersome with different platform-specific implementations.

In this article, we’ll learn how to implement box shadows across Android and iOS platforms in React Native.

Use the React Native Shadow item for iOS box shadows

To create shadow boxes for iOS devices, we can use four React Native shadow items.

The first is shadowColor, which determines the color of the box’s shadows. Please note that this is the only shadow item available for Android devices.

The second item, shadowOffset, takes a numeric object containing the width and height properties.

{ width: number; height: number}

Copy the code

Because it is described by the X and Y offsets relative to the element to which the box shadow is applied, the width attribute determines the X offset of the shadow, while the height attribute determines the Y offset.

Both width and height items can accept positive and negative values.

The third item, shadowOpacity, sets the opacity of the box’s shadows. The value of the item ranges from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

The fourth item is shadowRadius, which takes a number as its value to set the blur radius of the component. The higher the value, the greater the ambiguity, indicating that the shadow is larger and lighter. This item does not accept negative values.

Let’s use these items and apply a box shadow to the card component using the following method.

// 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>

Copy the code

Next, import the StyleSheet to apply multiple styles to the card component.

// 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: Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0Copy the code

After adding the code, the application renders a card with box shadows.

For Android to addstyles.elevationThe props

For adding box shadows to Android, we can use lift items, which use Android’s Lift API.

To learn how to use box shadows in this way, let’s apply box shadows to a card component. Note that the styles.elevation item only works when applied to the

component.

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

Copy the code

Next, import the StyleSheet again to style the card.

// 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,
  },
  elevation: {
    elevation: 20,
    shadowColor: '#52006A',
  },
});

Copy the code

By setting the altitude to 20 and adding a shadowColor, we can apply a box shadow to our Android card component.

Note that we have no control over the radius, opacity, or offset of the box shadows; We can only control the color of the shadows.

React Native cross-platform box Shadow

In this section, we’ll combine facade style items and shadow items to implement box shadows on Android and iOS devices, rather than using two separate processes.

Using the React Native Platform API, let’s create a function that we can later call to conditionally render a box shadow for our card component based on the user’s device.

We’ll set up the card first.

 <View style={[styles.card, styles.boxShadow]}>
        <View>
          <Text style={styles.heading}>
            React Native cross-platform box shadow
          </Text>
        </View>
        <Text>Using the Platform API to conditionally render box shadow</Text>
</View>

Copy the code

Next, under our style object, let’s create the generateBoxShadowStyle function that applies box shadows based on the user’s operating system.

const generateBoxShadowStyle = ( xOffset, yOffset, shadowColorIos, shadowOpacity, shadowRadius, elevation, shadowColorAndroid, ) => { if (Platform.OS === 'ios') { styles.boxShadow = { shadowColor: shadowColorIos, shadowOffset: {width: xOffset, height: yOffset}, shadowOpacity, shadowRadius, }; } else if (Platform.OS === 'android') { styles.boxShadow = { elevation, shadowColor: shadowColorAndroid, }; }};Copy the code

With the code we just implemented, our application can now examine the user’s device platform and apply the appropriate frame shadow items.

Now let’s call the generateBoxShadowStyle function and pass in the values of our shadow and height items as arguments.

GenerateBoxShadowStyle (-2, 4, '#171717', 0.2, 3, 4, '#171717');Copy the code

It then renders the following to both platforms.

To simplify our workflow, use the React Native Shadow Generator to generate the box Shadow code and see a preview of the box Shadow on Android and iOS.

Limitations of cross-platform box shadows

Although we apply a standard box shadow, in some use cases we may need to fully control the offset, opacity, and radius of blur of the box shadow. This could include.

  • Apply the box shadow to[<FlatList>](https://reactnative.dev/docs/flatlist)or[<Pressable>](https://reactnative.dev/docs/pressable)The component applies a custom style of box shadows
  • Add a custom box shadow design consistent on Android and iOS

Such design flexibility is not possible in current implementations. However, we can through the following ways to overcome these limitations [react – native – drop – shadow] (https://www.npmjs.com/package/react-native-drop-shadow).

Apply box shadows withreact-native-drop-shadow

The React-native drop-shadow package is a View component that takes its nested components, creates a bitmap representation, and then blurs and colors them based on the shadow values of the styles, similar to applying shadows with shadow items in iOS.

To get started, install the React-native drop-shadow package using one of the following commands.

yarn add react-native-drop-shadow
#or
npm i react-native-drop-shadow

Copy the code

Once the installation is complete, re-synchronize the Android Gradle build kit or restart the development server.

Next, we can import the package.

import DropShadow from "react-native-drop-shadow";

Copy the code

Now, let’s create a custom button using the

component and wrap it with the DropShadow component we just imported.

The box shadow on the button in the screenshot below is what we want to create. Note consistency on Android and iOS.

The DropShadow component is the parent of our component, which we style as a button. We want it to be in this order because we want to apply the drop shadow to our button, not the text in the button. 

// wherever your return statement is
// Don't forget to import the Pressable component from react-native
<DropShadow style={styles.shadowProp}>
          <Pressable
            style={styles.button}
            onPress={() => console.log('pressed')}>
            <Text style={(styles.text, styles.buttonText)}>See more</Text>
          </Pressable>
</DropShadow>

Copy the code

To make our

component look like a button, and to add drop shadows to the DropShadow component, add the following stylesheet. 

const styles = StyleSheet.create({ shadowProp: { shadowColor: '#171717', shadowOffset: {width: 0, height: 3}, shadowOpacity: 0.4, shadowRadius: 2,}, Button: {backgroundColor: '#4830D3', alignItems: 'Center ', justifyContent: 'center', height: 42, borderRadius: 4, marginTop: 30, }, buttonText: { color: '#fff', }, text: { fontSize: 16, lineHeight: 21, fontWeight: 'bold', letterSpacing: 0.25,},});Copy the code

usereact-native-shadow-2

The [react – native – shadow – 2] (https://github.com/SrBrahma/react-native-shadow-2) bag is an improved version of the [the react – native – shadow] improved version (https://github.com/879479119/react-native-shadow), provides more functionality, support the Typescript, and start from scratch to write, to reduce the dependence of the impact performance.

Unlike react-native drop-shadow, which creates a bitmap representation for its child components, react-native shadow-2 uses the React-Native SVG shadow plugin, which is implemented consistently on Android and iOS platforms.

To get started, install both packages at the root of the project directory.

yarn add react-native-svg react-native-shadow-2
#or 
npm i react-native-svg react-native-shadow-2

Copy the code

To make sure it’s running on iOS, CD goes to the iOS directory, run Pod Install, and synchronize the package we just installed.

// import the package right at the top
import {Shadow} from 'react-native-shadow-2';

// wherever your return statement is
<Shadow
        distance={5}
        startColor={'#00000010'}
        containerViewStyle={{marginVertical: 20}}
        radius={8}>
        <View style={[styles.card, {marginVertical: 0}]}>
          <View>
            <Text style={styles.heading}>
              React Native cross-platform box shadow
            </Text>
          </View>
          <Text style={styles.boxShadow}>
            Using the Platform API to conditionally render box shadow
          </Text>
          <DropShadow style={styles.shadowProp}>
            <Pressable
              style={styles.button}
              onPress={() => console.log('pressed')}>
              <Text style={(styles.text, styles.buttonText)}>See more</Text>
            </Pressable>
          </DropShadow>
        </View>
      </Shadow>

Copy the code

The code is generated as follows.

conclusion

The main problem with shadow items in React Native is that they don’t work in Android apps.

However, by using react native drop-shadow and React native shadow-2, we can easily implement consistent box shadows in React Native apps for Android and iOS.

The full code used in this tutorial can be found on GitHub. Feel free to leave a comment and let me know what you think of this article. You can also find me on Twitter and GitHub. Thanks for reading!

The postApplying box shadows in React Nativeappeared first onLogRocket Blog.