Box shadow in React Native

In React Native, applying box shadows is not easy. Because the developers build for both the Android and iOS platforms, it will be tedious to apply consistent box shadows with the different platform-specific deployment processes.

In this tutorial, we learn the implementation of box shadows in the React Native app on the Android and iOS platforms.

To create shadow boxes on the iOS devices, we have to use four different React Native shadow props.

• The first type is shadowColor, which determines the color of the box’s shadow. Please note that it is the shadow accessory that works on Android devices.
• The second property is shadowOffset, which has accepted the objects that contain the length, width, and height of the numeric value:

1. {width: number;height: number  

Because it is developed by X and Y offsets relative to the element on the box-shadow where it is applied, the width property will determine the X offset at the shadow. In contrast, the height prop will determine the Y offset.

Both the width and height support accept the positive and negative values.

Let’s use the props to apply a box shadow at a card component with the below code:

1. // when the return statement is     
2.   <View style={[styles.card, styles.shadowProp]}>  
3.         <View>  
4.           <Text style={styles.heading}>  
5.             React Native Box Shadow (Shadow Props)  
6.           </Text>  
7.         </View>  
8.         <Text>  
9. Using the elevation style prop to apply box-shadow for iOS devices  
10.         </Text>  
11.       </View>  

Now, import the StyleSheet to apply styles on the card component:

1. // import StyleSheet from react-native  
2. const styles = StyleSheet.create({  
3.   heading: {  
4.     fontSize: 18,  
5.     fontWeight: ‘600’,  
6.     marginBottom: 13,  
7.   },  
8.   card: {  
9.     backgroundColor: ‘white’,  
10.     borderRadius: 8,  
11.     paddingVertical: 45,  
12.     paddingHorizontal: 25,  
13.     width: ‘100%’,  
14.     marginVertical: 10,  
15.   },  
16.   shadowProp: {  
17.     shadowOffset: {width: -2, height: 4},  
18.     shadowColor: ‘#171717’,  
19.     shadowOpacity: 0.2,  
20.     shadowRadius: 3,  
21.   },  
22. });  

The app reads the card by the box-shadow in the code added below.

Adding the styles.elevation prop for Android

Using Android elevation API, we have to use the elevation widget to add the box shadows to the Android.

Just apply a box shadow to the card component. Note: The styles.elevation property works with the applied <View> component:

1. // wherever your return statement is  
2. <View style={[styles.card, styles.elevation]}>  
3.         <View>  
4.           <Text style={styles.heading}>  
5.             React Native Box Shadow (Elevation)  
6.           </Text>  
7.         </View>  
8.         <Text>  
9.           By using the elevation style props to apply box-shadow for Android devices  
10.         </Text>  
11. </View>  

After that, we import the Style Sheet for styling the card here:

1. // import StyleSheet from react-native  
2. const styles = StyleSheet.create({  
3.   heading: {  
4.     fontSize: 18,  
5.     fontWeight: ‘600’,  
6.     marginBottom: 13,  
7.   },  
8.   card: {  
9.     backgroundColor: ‘white’,  
10.     borderRadius: 8,  
11.     paddingVertical: 45,  
12.     paddingHorizontal: 25,  
13.     width: ‘100%’,  
14.     marginVertical: 10,  
15.   },  
16.   elevation: {  
17.     shadowColor: ‘#52006A’,  
18.     elevation: 20,  
19.   },  
20. });  

By setting the elevation 20 in Shadow Color, we apply the box-shadow at the Android card options.

Note: There is no control at the box’s opacity, radius, and shadow offset; we have to control the color of the shadow.

React Native Cross-Platform Box Shadow

It covers the style props of shadow props for implementing the box-shadow in iOS and Android devices in place of separate processes.

Now, let’s create the function that calls the render box-shadow for the card component based on the user’s device by React Native Platform API.

We start by configuring the cards:

1. <View style={[styles.card, styles.boxShadow]}>  
2.         <View>  
3.           <Text style={styles.heading}>  
4.             React Native cross-platform box shadow  
5.           </Text>  
6.         </View>  
7.         <Text>Using the Platform API to conditionally render box shadow</Text>  
8. </View>  

Let’s generate a generateBoxShadowStyle() which will apply the box shadow based on the user’s operating system in the styles object:

1. const generateBoxShadowStyle = (  
2.   xOffset,  
3.   yOffset,  
4.   shadowColorIos,  
5.   shadowOpacity,  
6.   shadowRadius,  
7.   elevation,  
8.   shadowColorAndroid,  
9. ) => {  
10.   if (Platform.OS === ‘ios’) {  
11.     styles.boxShadow = {  
12.       shadowColor: shadowColorIos,  
13. shadowOpacity,  
14.       shadowRadius,  
15.       shadowOffset: {width: xOffset, height: yOffset},  
16.      
17.     };  
18.   } else if (Platform.OS === ‘android’) {  
19.     styles.boxShadow = {   elevation,  
20.       shadowColor: shadowColorAndroid,  
21.     };  
22.   } };  

With the help of code, we implemented the app checks the user’s device platform and applied the appropriate box-shadow props.

Let’s invoke the generateBoxShadowStyle() and pass the value of shadow and props as arguments:

1. generateBoxShadowStyle(-2, 4, ‘#171717’, 0.2, 3, 4, ‘#171717’);  

It renders the below platforms:

Cross-platform box-shadow limitations

There are many use cases when we control the box-shadow’s offset, opacity, and blur radius.

It may include:

• Adding a custom box-shadow design that is compatible with Android and iOS platforms
• Apply box-shadow to <flat list> or <squeezable> component with custom style in the block.

With the help of the current implementation, design flexibility is not possible here. However, we could overcome the limitations with the react-native-drop-shadow.

Applying the box-shadow with react-native-drop-shadow

The react-native-drop-shadow is a view component that takes the nested component and creates a bitmap representation, blurring or colorizing the style’s shadow value, like shadow props in the iOS inputting.

Install the react-native-drop-shadow package by the commands given below:

1. yarn add react-native-drop-shadow  
2. #or  
3. npm i react-native-drop-shadow  

Sync, the Android Gradle Toolkit, builds to restart the development server if the installation is done.

Then after, you have to import the package:

1. import DropShadow from “react-native-drop-shadow”;  

You can generate a custom button using the<pressable> component and wrap it to the drop shadow component where we import it.

Note the consistency in both the iOS platform and Android platforms.

The drop shadow component is the parent component of the <pressable> component, which is styled to look exact as a button. if we want to apply drop shadow to our button:

1. // wherever your return statement is  
2. // Don’t forget to import the Pressable component   
3. <DropShadow style={styles.shadowProp}>  
4.           <Pressable  
5.             style={styles.button}  
6.             onPress={() => console.log(‘pressed’)}>  
7.             <Text style={(styles.text, styles.buttonText)}>See more</Text>  
8.           </Pressable>  
9. </DropShadow>  

Add a drop shadow to the drop shadow component to make the <pressable> component look exactly like a button key from the style sheet which is given below:

1. const styles =StyleSheet.create({  
2. shadowProp:{  
3. shadowOffset:{width:0, height:3},  
4. shadowColor:’#171717′,  
5.     shadowOpacity:0.4,  
6.     shadowRadius:2,  
7. },  
8.   button:{  
9.     backgroundColor:’#4830D3′,  
10.   
11.     justifyContent:’center’,  
12. alignItems:’center’,  
13.     height:42,  
14.     borderRadius:4,  
15.     marginTop:30,  
16. },  
17.   buttonText:{  
18.     color:’#fff’,  
19. },  
20.   text:{  
21.     fontSize:16,  
22.         fontWeight:’bold’,  
23. lineHeight:21,  
24.     letterSpacing:0.25,  
25. },  
26. });  

Using React-Native-shadow-2

The react-native-shadow-2 package is an updated version of the react-native-shadow, which declare the functionality, typing, and support and is written from scratch to minimize the performance-impacting dependencies.

Unlike the drop shadow implementation with react-native-drop-shadow, it creates a bitmap representation of the child components; react-native-shadow-2 is used for persistent implementation on Android and with the plugin react-Native-SVG shadow of the iOS platform.

Install both the packages at the root of the project directory to get the installation done:

1. npm i react-native-SVG react-native-shadow-2  
2. or   
3. yarn add react-native-SVG react-native-shadow-2  

To ensure runs on iOS, CD ios directory and run pod install to sync the packages that we installed:

1. // import the package right at the top  
2. import {Shadow} from ‘react-native-shadow-2’;  
3.   
4. // wherever your return statement is  
5. <Shadow  
6.         distance={5}  
7.         startColor={‘#00000010’}  
8.         containerViewStyle={{marginVertical: 20}}  
9.         radius={8}>  
10.         <View style={[styles.card, {marginVertical: 0}]}>  
11.           <View>  
12.             <Text style={styles.heading}>  
13.               React Native cross-platform box shadow  
14.             </Text>  
15.           </View>  
16.           <Text style={styles.boxShadow}>  
17.             Using the Platform API to conditionally render box shadow  
18.           </Text>  
19.           <DropShadow style={styles.shadowProp}>  
20.             <Pressable  
21.               style={styles.button}  
22.               onPress={() => console.log(‘pressed’)}>  
23.               <Text style={(styles.text, styles.buttonText)}>See more</Text>  
24.             </Pressable>  
25.           </DropShadow>  
26.         </View>  
27.       </Shadow>  

The code generates the below given output:

Shadow props

By using the shadow props recommended in the react-native doc.

• shadowColor: It sets drop shadow color.
• shadowOffset: It sets drop shadow offset.
• shadowOpacity: It sets the drop shadow opacity (that is multiplied by the color alpha component).
• Shadow Radius: It sets the drop shadow in a blur radius.

There is a problem with using React Native’s shadow props if we use styled-components: The shadow is a set on top of the element, and there is no way to move it.

It is a problem that has not any solution, so you have to use the below code:

Box shadow

By using the CSS box-shadow property:

• Insert: If not specified (default), the shadow is mentioned as a drop shadow (such as hovering over the box contents).
• Offset-x, offset-y: It specifies the vertical and horizontal distances.
• Blur Radius – How larger the value, the blur is more significant and makes the shadow lighter and a proficient radius.
• Diffusion Radius: Positive values expand and enlarge the shadow, and negative values shrink the shadow.
• Color: The color box used is browser dependent if it is not specified.

How to apply shadows on the Android platform

On Android, we can use the height style prop from react-native to add the shadow.

Upgrade: It sets up the upgrade of the scene by using Android’s built-in upgrade API. It adds a drop shadow to affect the z-order of the overlapping scenes.

There are no other properties to customize the look of the shadow.

Android’s shadow on the circle button is very soft, but it’s hard to appreciate, but if we turn the button so vast, then the exact value of height property looks excellent.

Other multi-platform alternatives

The react-native-shadow enables the management of Android shadow like iOS, but its performance is terrible because of some user opinion. Shadow does not work with React Native in Android. The view takes the children, creates a bitmap representation, blurs it, and colors it like shadow values in iOS.

Installation

1. yarn add react-native-drop-shadow  

Limitations

Android’s bitmap limit is 2048×2048, but it depends on the API version.

If shadows and animations are rendered continue, it uses bitmap rendering to simulate heavy shadows in performance.

Usage

1. import DropShadow from “react-native-drop-shadow”;    
2. export default function usage() {    
3.   return (    
4.     <DropShadow    
5.       style={{    
6.         shadowColor: “#000”,    
7.         shadowOffset: {    
8.           width: 0,    
9.           height: 0,    
10.         },    
11.         shadowOpacity: 1,    
12.         shadowRadius: 5,    
13.       }}    
14.     >    
15.       …    
16.     </DropShadow>    
17.   );    
18. }    

Usage with FlatList

1. export default function withFlatList() {    
2.   return (    
3.     <FlatList    
4.       data={[“”]}    
5.       keyExtractor={(item, index) => “List-” + index}    
6.       CellRendererComponent={DropShadow} // <==== add line    
7.       renderItem={({ item, index }) => (    
8.         <DropShadow    
9.           style={{    
10.             shadowColor: “#000”,    
11.             shadowOffset: {    
12.               width: 0,    
13.               height: 0,    
14.             },    
15.             shadowOpacity: 1,    
16.             shadowRadius: 5,    
17.           }}    
18.         >    
19.           …    
20.         </DropShadow>    
21.       )}    
22.     />    
23.   );    
24. }    

Usage with Animated Views

We use animated.createAnimatedComponent to create any animatable version of the drop shadow to make the work instead of animated view.

For example:

1. const AnimatedDropShadow = Animated.createAnimatedComponent(DropShadow);    
2.     
3. export default function withAnimatedViews() {    
4.   return (    
5.     <AnimatedDropShadow    
6.       style={{    
7.         shadowColor: “#000”,    
8.         shadowOffset: {    
9.           width: 0,    
10.           height: 0,    
11.         },    
12.         shadowOpacity: 1,    
13.         shadowRadius: 5,    
14.       }}    
15.     >    
16.       …    
17.     </AnimatedDropShadow>    
18.   );    
19. }    

We use AnimatedDropShadow despite the Animated view.

Conclusion

It will not be used in Android apps. It’s the big problem with shadow props in React Native.

We implement persistent box shadows in React Native apps for Android or iOS platforms by using the react-native-drop-shadow and the react-native-shadow-2.