React Native sharp box-shadow

Question

I have a reference of a box shadow I want to implement into my app.

This is what I've done so far:

import {View, Text, Button, StyleSheet, TouchableOpacity, Dimensions} from 'react-native'


const halfWindowsWidth = Dimensions.get('window').width 

export default function DesignTests (){
    return (
        <View style={styles.container} >
            <View style={styles.first_half_container_parent}>
                <View style={styles.first_half_container}></View>
            </View>
            <View style={styles.additionalBar_parent_parent}>
                <View style={styles.additionalBar_parent}>
                    <View style={styles.additionalBar}></View>
                </View>
            </View>
            <View style={styles.second_half_container}></View>
        </View>
    )
} 


const styles = StyleSheet.create({
    container: {
        width: "100%",
        height: "100%",
        backgroundColor: "#433838",
        zIndex: 0,
    },


    first_half_container_parent: {
        height:"50%",
        width: halfWindowsWidth,
        backgroundColor: '#c07c55',
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        zIndex: 3,
        elevation: 15,
        shadowColor: 'black',
    },
    first_half_container: {
        height: "100%",
        width: halfWindowsWidth,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,    
        bottom: 3,
        backgroundColor: '#e2c9ac',
        zIndex: 6,   
    },



    additionalBar_parent_parent: {
        backgroundColor: "#c07c55",
        height: "2%",
        zIndex: 4,
        width: halfWindowsWidth *0.2,
        top: -3, 
        left: "40%",
        borderBottomLeftRadius: 90,
        borderBottomRightRadius: 90,
        zIndex: 4,
        overflow: 'hidden',
    },
    additionalBar_parent: {
        backgroundColor: "#c07c55",
        height: "100%",
        zIndex: 4,
        width: halfWindowsWidth *0.2,
        top: -1, 
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        zIndex: 4,
        elevation: 15,
        overflow: 'hidden',
        shadowColor: 'black',
    },
    additionalBar: {
        backgroundColor: "#e2c9ac",
        height: "150%",
        zIndex: 5,
        width: halfWindowsWidth *0.195,
        top: -10, 
        left: 1,
        borderBottomLeftRadius: 15,
        borderBottomRightRadius: 15,
    },



    second_half_container: {
        height:"50%",
        backgroundColor: '#433838',
        zIndex: 1,
    },
  });

I need the shadow to be way sharper. Like in this reference

• I found and tried few things but none of them worked well for the intensity of shadow.
• I thought linear-gradient could be a solution perhaps, but that looks really bad on mobile, color transitions are not smooth at all.
• I even tried to add a dark bar right under the first box, and then add black shadow to it, so end of that dark bar would be blurred and give a shadow effect, but that didnt look natural. Edge of dark bar was visible no matter how much I played around with hue.
• For those who may suggest React Native Shadow Generator, I've already tried that, it's really not helpful

What it takes to get that black-sharp shadow, using react native (expo-Android)

Edit: I just found out about a library called Skia which works for all devices, and works well with Expo, so I'm going for it

Answer 1

You can try to use https://github.com/hoanglam10499/react-native-drop-shadow but it only works with ESA build for expo.