On load not able to touch in screen.

[pavan-hr1621]

this is my code and if i comment this line

backdropComponent={renderBackdrop}
then it's working and i m able to touch but as soon i uncomment the code i m not able to touch in my screen i don't know what causing the issue if anyone could fix this please let me know.

`import React, { useCallback, useMemo, useRef, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
import BottomSheet, { BottomSheetBackdrop, BottomSheetView } from '@gorhom/bottom-sheet';

import { useTheme } from '../context/ThemeContext';
import globalStyles from '../styles/globalStyles';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import FloatingLabelInput from '../components/FloatingLabelInput';
// import { Icon } from 'react-native-vector-icons/Icon';
import Icon from 'react-native-vector-icons/Ionicons';
import { Easing } from 'react-native-reanimated';
import { createList } from '../api/places';

const SaveListScreen = ({ navigation }) => {
const { theme } = useTheme();
const bottomSheetRef = useRef(null);
const insets = useSafeAreaInsets();
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [privacy, setPrivacy] = useState('Private'); // default

// snap points for bottom sheet const snapPoints = useMemo(() => ['30%'], []); // inside component const privacyOptions = [ { key: "Public", label: "This list is visible by anyone.", }, { key: "Private", label: "This list is visible by you.", }, ]; const openBottomSheet = useCallback(() => { bottomSheetRef.current?.snapToIndex(0); }, []); const closeBottomSheet = useCallback(() => { bottomSheetRef.current?.close(); }, []); const renderBackdrop = useCallback( (props) => ( <BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} onPress={closeBottomSheet} /> ), [closeBottomSheet] ); const handleBack = () => { console.log("Back pressed"); navigation.goBack(); // Uncomment if using react-navigation } const handleSelectPrivacy = (type) => { setPrivacy(type); closeBottomSheet(); }; const handleSheetChanges = useCallback((index) => { console.log('handleSheetChanges', index); }, []); const handleSave = async () => { console.log({ name, description, privacy }); const res = await createList({ name, description, type: privacy.toLowerCase() }) console.log(res, 'list created') handleBack() // Call your API here to save list }; const renderPrivacyItem = ({ item }) => ( <TouchableOpacity style={{ flexDirection: "row", alignItems: "center", paddingVertical: 14, justifyContent: "space-between" }} onPress={() => handleSelectPrivacy(item.key)} > {/* Radio icon */} <View style={{ flexDirection: "row", alignItems: "center" }}> <Icon name={privacy === item.key ? "radio-button-on-outline" : "radio-button-off-outline"} size={22} color={theme.colors.secondary[900]} style={{ marginRight: 12 }} /> {/* Label text */} <View style={{ flexDirection: "column", marginLeft: 16 }}> <Text style={[theme.typography.BM, { color: theme.colors.secondary[900] }]}> {item.key} </Text> <Text style={[theme.typography.BES, { color: theme.colors.secondary[600] }]}> {item.label} </Text> </View> </View> <View> <Icon name={item.key == "Public" ? "globe-outline" : "lock-closed-outline"} size={24} color={theme.colors.secondary[900]} > </Icon> </View> </TouchableOpacity> ); return ( <SafeAreaView style={{ flex: 1, padding: 16, backgroundColor: theme.colors.neutral[100] }} > <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-between' }}> <View> {/* List Name */} <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 32 }}> <TouchableOpacity onPress={handleBack}> <Icon name="arrow-back" size={24} color={theme.colors.secondary[900]} /> </TouchableOpacity> <Text style={[theme.typography.h6, { color: theme.colors.secondary[900], marginLeft: 14 }]}>Create a new list</Text> </View> <FloatingLabelInput label="List name" value={name} onChangeText={setName} type="text" containerStyle={{ marginBottom: 16 }} /> {/* Description */} <FloatingLabelInput label="Description" value={description} onChangeText={setDescription} type="text" containerStyle={{ marginBottom: 16 }} inputProps={{ multiline: true, numberOfLines: 4, }} /> {/* Privacy */} <View style={{ flexDirection: "row", justifyContent: "space-between" }}> <View style={{ flexDirection: "row", alignItems: "center" }}> <Text style={[theme.typography.BS, { color: theme.colors.secondary[900], marginRight: 8 }]}> Privacy level </Text> <Icon name="information-circle-outline" size={16} color={theme.colors.secondary[900]} /> </View> <TouchableOpacity onPress={openBottomSheet} style={{ paddingVertical: 6, paddingHorizontal: 8, backgroundColor: theme.colors.secondary[100], flexDirection: 'row', alignItems: 'center', borderRadius: 4 }}> <Text style={[theme.typography.BES, { color: theme.colors.secondary[900], marginRight: 6 }]}> {privacy} </Text> <Icon name="chevron-down" size={14} color={theme.colors.secondary[900]} /> </TouchableOpacity> </View> </View> <View> {/* Save button */} <TouchableOpacity style={[ globalStyles.primaryButton, { backgroundColor: theme.colors.primary[600] }, ]} onPress={handleSave} > <Text style={[theme.typography.h6, { color: theme.colors.neutral[100] }]}> Save </Text> </TouchableOpacity> </View> </View> <BottomSheet ref={bottomSheetRef} index={-1} snapPoints={snapPoints} onChange={handleSheetChanges} enablePanDownToClose={true} backdropComponent={renderBackdrop} enableOverDrag={false} animationConfigs={{ duration: 500, easing: Easing.out(Easing.exp), }} // handleComponent={null} > <BottomSheetView style={[bottomsheet.container]}> <View style={{ flex: 1, padding: 16, marginBottom: insets.bottom > 0 ? insets.bottom : 16 }}> <Text style={[theme.typography.h3, { marginBottom: 8, color: theme.colors.secondary[900] }]}> List privacy level </Text> <Text style={[theme.typography.BES, { color: theme.colors.secondary[700] }]}> Choose who can view this list. </Text> <View style={{ marginTop: 20 }}> <FlatList data={privacyOptions} keyExtractor={(item) => item.key} renderItem={renderPrivacyItem} ItemSeparatorComponent={() => ( <View style={{ height: 1, backgroundColor: theme.colors.secondary[200], }} /> )} /> </View> </View> </BottomSheetView> </BottomSheet> </SafeAreaView > ); 

};
const bottomsheet = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
height: "100%"
// overflow: 'hidden',
// position: "relative"
},
})
export default SaveListScreen;
`