Property 'togglePanel' does not exist on type 'never'

I was using "react-native-simple-bottom-sheet". I was using togglePanelFunction to close/open the panel as mentioned inside the documentation but I was getting this strange error, "Property 'togglePanel' does not exist on type 'never'" and I am not sure what that means. Below is the code for your reference.

const closeBottomSheet = () => {
        if (bottomSheetRef.current) {
            bottomSheetRef.current.togglePanel();
            onClose(); // Call the onClose function when the bottom sheet is closed
        }
    };

Complete Code :

import React, { useRef, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, FlatList, Dimensions } from 'react-native';
import BottomSheet from 'react-native-simple-bottom-sheet';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { LayoutAnimation } from 'react-native';
type SpaceBottomSheetProps = {
onClose: () => void;
}
const SpaceBottomSheet = ({ onClose }: SpaceBottomSheetProps) => {
const bottomSheetRef = useRef();
const [expandedItem, setExpandedItem] = useState(null);
const screenHeight = Dimensions.get('screen').height;
const bottomSheetHeight = screenHeight * 0.85;
const closeBottomSheet = () => {
if (bottomSheetRef.current) {
bottomSheetRef.current.togglePanel();
onClose(); // Call the onClose function when the bottom sheet is closed
}
};
const data = [
{ label: '2D Test' },
{ label: '2D Testing 2' },
{ label: '2D Testing 3' },
{ label: '2D Testing 1' },
{ label: '2D Testzaffar' },
{ label: '2D TestZaffar' },
];
const expandedData = [
{ label: 'Dashboard' },
{ label: 'List of Subspaces' },
{ label: 'View Space Details' },
{ label: 'Create Subspace' },
];
const renderItem = ({ item, index }) => {
const isExpanded = expandedItem === index;
const handlePress = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpandedItem(isExpanded ? null : index);
};
return (
<View style={styles.itemContainer}>
<TouchableOpacity onPress={handlePress}>
<View style={styles.labelContainer}>
<Text style={styles.label}>{item.label}</Text>
<MaterialIcons
name={isExpanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
size={24}
color="#555"
style={styles.arrowIcon}
/>
</View>
</TouchableOpacity>
{isExpanded && (
<FlatList
data={expandedData}
renderItem={({ item }) => (
<>
<TouchableOpacity style={styles.rowContainer}>
<View style={styles.row}>
<Text style={styles.rowLabel}>{item.label}</Text>
<MaterialIcons
name="keyboard-arrow-right"
size={18}
color="#555"
style={styles.rowArrowIcon}
/>
</View>
</TouchableOpacity>
{item.label === 'List of Subspaces' && <View style={styles.separator} />}
</>
)}
keyExtractor={(item) => item.label}
/>
)}
</View>
);
};
//console.log('bottomSheetHeight:', bottomSheetHeight);
return (
<View style={styles.container}>
<BottomSheet ref={bottomSheetRef} sliderMaxHeight={bottomSheetHeight} sliderMinHeight={0}>
<View style={styles.bottomSheet}>
<TouchableOpacity onPress={() => closeBottomSheet()} style={styles.closeIcon}>
<MaterialIcons name="close" size={24} color="#000000" />
</TouchableOpacity>
<View style={styles.header}>
<Text style={[styles.title, { fontFamily: 'Montserrat' }]}>Truminds</Text>
<Text style={[styles.create, { color: expandedItem !== null ? '#0F8D48' : '#4D4D4D' }]}>
+ Create Subspace
</Text>
</View>
<View style={styles.separator} />
<FlatList
style={styles.list}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.label}
/>
</View>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 0,
paddingTop: 28,
paddingBottom: 12,
},
itemContainer: {
backgroundColor: '#f2f2f2',
padding: 10,
borderRadius: 10,
marginBottom: 17,
},
title: {
fontSize: 24,
fontWeight: '800',
color: '#4D4D4D',
},
create: {
fontSize: 12,
fontWeight: '600',
},
bottomSheet: {
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingHorizontal: 5,
paddingBottom: 10,
marginTop: -20,
},
separator: {
height: 1,
backgroundColor: '#ddd',
marginVertical: 10,
},
list: {
marginTop: 10,
},
listItem: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 10,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingBottom: 3,
paddingTop: 3,
},
label: {
fontSize: 16,
fontWeight: '600',
color: '#4D4D4D',
},
arrowIcon: {
marginLeft: 10,
color: '#000000',
},
closeIcon: {
flex: 1,
alignItems: 'flex-end',
},
rowContainer: {
paddingHorizontal: 4,
paddingVertical: 10,
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
rowLabel: {
fontSize: 12,
fontWeight: '500',
color: '#4D4D4D',
},
rowArrowIcon: {
marginLeft: 10,
color: '#000000',
},
});
export default SpaceBottomSheet;

I thought it was because of how I declared and initialized bottomSheetRef.

This is because you didn't pass a type to useRef, it seems like there's no @types entry for react-native-simple-bottom-sheet, but otherwise you could've just passed the type like this: useRef<BottomSheetType | null>(). That way you tell Typescript that either null (default value) or BottomSheetType (a type we currently can't import from anywhere, but you could construct the type yourself) will be the value in bottomSheetRef.current if .current is not null.

For now you could already type it like this:

const bottomSheetRef = useRef<{ togglePanel: () => void; } | null>();

and that should remove the error for you. Just keep in mind that typing something yourself for external libraries can later on cause issues if they change behaviour and you keep relying on your own types. Of course, there's no real other option than to type it yourself (or contribute to DefinitelyTyped). I would suggest to add a comment explaining why it's typed like that so people who read the code after you understand the dangers/what's going on.