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;
`