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>
3
Answers
use Prop
enableDismissOnClose
as mentioned here
As Mohammad Momin said you can try
scrollToIndex({index: 0, offset: 0})
.In order to do that you have to declare a
ref
for yourFlatList
and also specify thegetItemLayout
prop. Then you can callscrollToIndex
.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: