REACT NATIVE. How to dim the background of the bottomsheet? - react-native

Question

I am trying to dim the background of this bottomSheet when it is activated or being rendered in the screen.
Also how do you make sure the bottomsheet disappears from the screen when the user touches the part of the screen that is not covered by the bottomSheet when it is active?
This is the code in app.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View, ImageBackground, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { TouchableOpacity } from 'react-native';
import BottomSheet from './components/BottomSheet';
import { useCallback, useRef } from 'react';
import Volcano from './Images/Volcano.jpg'
export default function App() {
const firstRef = useRef (null)
const onPress = useCallback (() => {
const isActive = firstRef?.current?.isActive1();
if (isActive) {
firstRef?.current?.scrollTo(35);
} else {
firstRef?.current?.scrollTo(-200);
}
})
return (
<GestureHandlerRootView style={{flex:1}}>
<ImageBackground source={Volcano} resizeMode='repeat' style={{
flex: 1,
width : '100%',
// flexDirection: 'column',
justifyContent: 'center',
}}>
<StatusBar style="auto" />
<TouchableOpacity style={{
height:50,
width: '10%',
backgroundColor:'green',
aspectRatio:1,
borderRadius:25,
opacity:.6,
marginLeft:360,
}} onPress={onPress}/>
<BottomSheet ref={firstRef}/>
</ImageBackground>
</GestureHandlerRootView>
);
};
This is the one in the bottomsheet.js
import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React, { useCallback, useImperativeHandle } from 'react'
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { event, Extrapolate, interpolate, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
const {height: SCREEN_HEIGHT} = Dimensions.get('window');
const MAX_TRANSLATE_Y = -SCREEN_HEIGHT + 50;
const BottomSheet = React.forwardRef(({},ref) => {
const translateY = useSharedValue(35);
const active = useSharedValue()
const scrollTo = useCallback ((destination = Number) =>{
'worklet';
active.value = destination !== 35;
translateY.value = withSpring(destination, {damping:15});
}, []);
const isActive1 = useCallback (()=> {
return active.value;
},[])
useImperativeHandle(ref, () => ({scrollTo, isActive1}), [scrollTo, isActive1]);
const updatePan = useSharedValue({y:0});
const activateGesture = Gesture.Pan()
.onStart(() => {
updatePan.value = { y:translateY.value};
})
.onUpdate((e) => {
translateY.value = e.translationY + updatePan.value.y;
translateY.value = Math.max(translateY.value, MAX_TRANSLATE_Y);
})
.onEnd (() => {
if (translateY.value > -SCREEN_HEIGHT/3){scrollTo(35) ;
} else if (translateY.value < -SCREEN_HEIGHT / 1.5) {
scrollTo(MAX_TRANSLATE_Y)
}
});
const rBottomSheetStyle = useAnimatedStyle (() => {
const borderRadius = interpolate(
translateY.value,
[MAX_TRANSLATE_Y + 100, MAX_TRANSLATE_Y],
[25, 5],
Extrapolate.CLAMP
);
return {
borderRadius,
transform: [{ translateY: translateY.value }],
};
});
return (
<GestureDetector gesture={activateGesture}>
<Animated.View
style= {[styles.bottomSheetContainer, rBottomSheetStyle]}
>
<View style={styles.line} />
</Animated.View>
</GestureDetector>
)
})
const styles = StyleSheet.create({
bottomSheetContainer: {
height: SCREEN_HEIGHT,
width:'100%',
backgroundColor: 'white',
position: 'absolute',
top: SCREEN_HEIGHT,
borderRadius: 25,
},
line:{
width: 75,
backgroundColor: 'grey',
height: 4,
alignSelf: 'center',
marginVertical: 15,
borderRadius:2,
}
})
export default BottomSheet
As you can see on the image the background is not dim when the bottomsheet is activatted.
[1]: https://i.stack.imgur.com/RdEzm.jpg
Please assist