React Native Shadow - FlutterTPoint

In this tutorial we will learn how to use Shadow In React Native projects with some examples. We will create Shadow using third party library and using custom methods of React Native.

What Is Shadow In React Native?

Shadow blurs the component’s edges and provides a better look for that. Shadow is used in most of the applications, This provides a clear and beautiful look to the widget.

Shadow In Android

Below is an example of Shadow in the android platform. This is a simple example of creating shadows in an android device platform in React Native apps.

import React, { Component, } from 'react';
import { View, StyleSheet, Image, Text } from "react-native";


export default class TestClass extends Component {
    render() {
        return (
            <View style={styles.mainView}>
                <View style={styles.box}>
                    <Text style={styles.text}>Shadow Demo</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({ 
    mainView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 26,
        backgroundColor: "red",
    },

    text: {
        marginBottom: 25,
        fontSize: 18,
        textAlign: "center",
        color: "black"
    },

    box:{
        borderRadius: 10,
        elevation: 50,
        borderColor: 'red',
        backgroundColor: "white",
        padding: 25,
    }

})

Result

In the below screenshot you can see the shadow around the edges of the box.

Shadow In IOS Platform

To make shadow in IOS apps, You have to change the style of the component for which you want to make shadow like below code and the screenshot. For more details you can learn from here.

import React, { Component, } from 'react';
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";
import LottieView from 'lottie-react-native';


export default class TestClass extends Component {
    render() {
        return (
            <View style={styles.mainView}>
                <View style={styles.box}>
                    <Text style={styles.text}>Shadow Demo</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({ 
    mainView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 26,
        backgroundColor: "red",
    },

    text: {
        marginBottom: 25,
        fontSize: 18,
        textAlign: "center",
        color: "black"
    },

    box:{
        backgroundColor: '#2E9298',
        borderRadius: 10,
        padding: 10,
        shadowColor: '#00000',
        shadowOffset: {
          width: 0,
          height: 3,
        },
        shadowRadius: 5,
        shadowOpacity: 1.0,
    }

})

Applying Box Shadow For Cross Platform Apps In React Native

The react-native-drop-shadow package is a view Component that takes its nested Component. This is the cross platform library. There is no need to create separate Shadow component for android and IOS separately. Create once then it will work for those android and IOS apps. It has more features, You can learn from here.

Before move further first install the below npm in your project’s terminal using the below command:

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

After installing the library, import its class in where you want to use it as below:

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

After completing all the above process you can use its code in your project to create shadow. Below is the full code for creating Shadow.

import React, { Component, } from 'react';
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";
import DropShadow from "react-native-drop-shadow";



export default class TestClass extends Component {
    render() {
        return (
            <View style={styles.mainView}>
                <DropShadow style={styles.shadowProp}>
                    <Pressable
                        style={styles.button}
                        onPress={() => console.log('pressed')}>
                        <Text style={(styles.text, styles.buttonText)}>Box shadow</Text>
                    </Pressable>
                </DropShadow>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 26,
        backgroundColor: "white",
    },

    shadowProp: {
        shadowColor: '#171717',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.4,
        shadowRadius: 2,
    },
    button: {
        backgroundColor: '#4830D3',
        alignItems: 'center',
        justifyContent: 'center',
        height: 80,
        borderRadius: 4,
        marginTop: 30,
    },
    buttonText: {
        color: '#fff',
        padding: 25
    },
    text: {
        fontSize: 16,
        lineHeight: 21,
        fontWeight: 'bold',
        letterSpacing: 0.25,
        padding: 25
    },

})

Thank you for visiting this tutorial on FlutterTPoint. Hope you learn the Shadow in RN. For any doubt and issue you can comment in the comment section below.

You should learn more useful React Native tutorials from here, Which will improve your development skills in React Native.