Elevating the bottom sheet

[saurav-bhagat]

Hi, How can I add elevation to the bottom sheet, I tried adding parent View and adding shadow to that, but that is not working,Is there a defined way to do this?

import React, { useEffect, createRef } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
import LoginComponent from './LoginComponent';

const LoginScreen = () => {
	const navigation = useNavigation();
	const sheetRef = React.useRef(null);
	const fall = new Animated.Value(1);

	const renderHeader = () => (
	    <View style={styles.header}>
	        <View style={styles.panelHeader}>
		    <View style={styles.panelHandle} />
		  </View>
	    </View>
	);

	return (
	    <View style={styles.loginContainer}>
	        <View style={styles.login_logo}>
		    <Image 
		        source={require('../../images/logo.png')} 
			style={{
				flex:1,
				width: '90%',
			}}
		    />
		</View>
			
		<View style={styles.sheetContainer}>
		    <BottomSheet
		        ref={sheetRef}
			snapPoints={['50%', 0]}
			initialSnap={0}
			borderRadius={10}
			callbackNode={fall}
			renderHeader={renderHeader}
			renderContent={() => <LoginComponent navigation={navigation} />}
		      />
		</View>
	</View>
	);
};

const styles = StyleSheet.create({
	loginContainer: {
		flex : 1,
	},
	login_logo: {
		top: '20%', 
		alignItems: 'center',
		width: '100%',
		height: 170,
	},
	header: {
		shadowColor: '#000000',
		paddingTop: 20,
		borderTopLeftRadius: 20,
		borderTopRightRadius: 20,
	},
	panelHeader: {
		alignItems: 'center',
	},
	panelHandle: {
		width: 40,
		height: 8,
		borderRadius: 4,
		backgroundColor: '#00000040',
		marginBottom: 10,
	},
	sheetContainer: {
		flex:1,
		shadowColor: '#000000',
    	        shadowOffset: { width: 0, height: 0 },
    	        shadowRadius: 5,
    	        shadowOpacity: 0.5,
	}
});

export default LoginScreen;

[kotano]

@saurav-bhagat Use header with semi-transparent border