Force BottomSheetFlatList open from first position every time useCallback called in react-native-bottom-sheet - react-native

Question

I am using react-native-bottom-sheet with BottomSheetFlatList.
I want to open BottomSheetFlatList at initialPosition every time it opened but I am not able to achieve that. When I open it it's always open at last scrolling position.
<BottomSheet
ref={bottomSheetRef}
index={0}
snapPoints={snapPoints}
enableDismissOnClose={true}
handleIndicatorStyle={{display: 'none'}}
handleStyle={{padding: 0}}>
<View style={{backgroundColor: '#b2b2b2', alignItems: 'center'}}>
{!isOpen && (
<Pressable onPress={() => handleSnapPress(1)}>
<Image
source={IconCollapse}
style={{width: 30, height: 20, backgroundColor: '#b2b2b2'}}
/>
</Pressable>
)}
{isOpen && (
<Pressable onPress={() => handleClosePress()}>
<Image
source={IconExpand}
style={{width: 30, height: 20, backgroundColor: '#b2b2b2'}}
/>
</Pressable>
)}
</View>
<View style={{backgroundColor: '#b2b2b2'}}>
<Text
style={{
color: 'white',
fontSize: 20,
textTransform: 'uppercase',
paddingStart: 10,
}}>
Select Zone
</Text>
<View
style={{
borderBottomColor: '#fff',
borderBottomWidth: 1,
marginEnd: 10,
marginStart: 10,
}}
/>
</View>
<BottomSheetFlatList
data={zoneList}
keyExtractor={(item, index) => `${index}`}
renderItem={renderItem}
contentContainerStyle={styles.contentContainer}
/>
</BottomSheet>

Answer 1

you can try
this.flatListRef.scrollToOffset({ animated: true, offset: 0 });
hope this is work

Answer 2

use Prop enableDismissOnClose
as mentioned here

Answer 3

As Mohammad Momin said you can try scrollToIndex({index: 0, offset: 0}).
In order to do that you have to declare a ref for your FlatList and also specify the getItemLayout prop. Then you can call scrollToIndex.
So every time that you open the bottomSheet you have to call scrollToIndex.
The full working example I created is available in this github repositor which is something like this:
export const CustomBottomSheet = forwardRef(({
zoneList = [],
selectedZone,
onZoneSelected
}, ref) => {
const bottomSheetRef = useRef(null);
const flatListRef = useRef(null);
const scrollToItem = () => {
if (!selectedZone) return;
if (zoneList.length < 1) return;
// find item index
const index = zoneList.findIndex(value => value.id === selectedZone?.id);
// scroll to destination index
// it's better to set animated to true (experimental)
flatListRef.current.scrollToIndex({
animated: true,
index: index, // 0
})
console.log('scrollToItem called by index:' + index)
}
const handleSnapPress = (index = 0) => {
bottomSheetRef.current.snapToIndex(index);
// call this method after each time user opens the bottom sheet
scrollToItem();
}
const handleClosePress = () => {
bottomSheetRef.current.snapToIndex(index);
}
const renderItem = ({ item }) => {
return (
<ListItem
{...item}
onPress={() => onZoneSelected(item)}
isSelected={item.id === selectedZone?.id}
/>
)
}
const getItemLayout = (_, index) => (
{
length: ListItem.HEIGHT,
offset: (ListItem.HEIGHT + ListItem.VERTICAL_SPACING) * index,
index: index,
}
)
// forwarding methods via ref
useImperativeHandle(ref, () => ({
open: handleSnapPress,
close: handleClosePress,
snapToIndex: handleSnapPress,
}));
return (
<BottomSheet
ref={bottomSheetRef}
index={-1}
snapPoints={SNAP_POINTS}
enableDismissOnClose={true}
// onChange={handleOnChange}
enablePanDownToClose={true}
>
<View style={{ backgroundColor: '#b2b2b2', alignItems: 'center', marginTop: 16 }}>
<Text
style={{
color: 'white',
fontSize: 20,
textTransform: 'uppercase',
paddingStart: 10,
}}>
{'Select Zone'}
</Text>
</View>
<BottomSheetFlatList
// add ref and getItemLayout in order to use scrollToIndex method
ref={flatListRef}
getItemLayout={getItemLayout}
data={zoneList}
keyExtractor={(item) => item.id}
renderItem={renderItem}
contentContainerStyle={styles.contentContainer}
/>
</BottomSheet>
)
})