react-native-bottom-sheet: [v5] Modal reopens while opening second, and while dismissing first modal
Bug
Maybe similiar to https://github.com/gorhom/react-native-bottom-sheet/issues/204 I have 2 modals and global state. When global state updates i dismiss first modal and open second modal
- If i dismiss first modal, then: second modal reopens while opening
- If i close first modal, then: second modal opens fine but if i close second modal, first modal reopens. (or is even not closed?)
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | ^5.0.0-alpha.3 |
react-native | 0.72.5 |
react-native-reanimated | ^3.5.1 |
react-native-gesture-handler | ~2.12.0 |
Steps To Reproduce
- Create 2 modals in 2 component
- Open first modal
- Close first modal and present second modal
Describe what you expected to happen:
- When I dismiss first modal and present second modal
- Second modal wont reopen
Reproducible sample code
I thought that the modal is reopened because the global state changes, but this is not the case: while opening the second modal and closing the first modal, the second modal still reopens
const presentBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
const closeBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.dismiss();
}, []);
const presentTeamBottomSheet = useCallback(() => {
bottomSheetModalRef.current?.dismiss();
teamBottomSheetModalRef.current?.present();
}, []);
const closeTeamBottomSheet = useCallback(() => {
teamBottomSheetModalRef.current?.dismiss();
}, []);
return <>
...
<BottomSheetModal
ref={bottomSheetModalRef}
index={0}
snapPoints={snapPoints}
backdropComponent={renderBackdrop}
handleComponent={null}
enableOverDrag={false}
enablePanDownToClose={false}>
<BottomSheetView
style={{
flex: 1,
}}>
<View style={styles.header}>
<Text style={styles.name}>Список участников</Text>
<Pressable style={styles.close} onPress={closeBottomSheet}>
<View style={styles.icon}>
<Icons.Close
color={colors.gray400}
width={scale.lg}
height={scale.lg}
/>
</View>
</Pressable>
</View>
<ScrollView
contentContainerStyle={{
paddingBottom: insets.bottom + scale.md,
marginHorizontal: scale.md,
}}>
{teams.map((team) => {
return (
<Pressable
key={team.id}
style={styles.item}
onPress={() => {
presentTeamBottomSheet();
}}>
<TeamItem team={team} />
</Pressable>
);
})}
</ScrollView>
</BottomSheetView>
</BottomSheetModal>
<BottomSheetModal
ref={teamBottomSheetModalRef}
snapPoints={animatedSnapPoints as any}
contentHeight={animatedContentHeight}
handleHeight={animatedHandleHeight}
backdropComponent={renderTeamBackdrop}
bottomInset={scale.md + insets.bottom}
handleComponent={null}
enableOverDrag={false}
enablePanDownToClose={false}>
<BottomSheetView
style={{
flex: 1,
}}
onLayout={handleContentLayout}>
<View style={styles.header}>
<Text style={styles.name}>{t('participateToOrder')}</Text>
<Pressable style={styles.close} onPress={closeTeamBottomSheet}>
<View style={styles.icon}>
<Icons.Close
color={colors.gray400}
width={scale.lg}
height={scale.lg}
/>
</View>
</Pressable>
</View>
<View style={styles.contentContainer}>
<Text>Some longh text about team round</Text>
<Button label={t('joinToOrder')} onPress={joinToOrder} />
</View>
</BottomSheetView>
</BottomSheetModal>
</>
About this issue
- Original URL
- State: open
- Created 9 months ago
- Reactions: 5
- Comments: 22
the bug still exists
my workaround is…
if (!sheetOpen) { return null; }
The downside to this approach is that you don’t get the animation of the modal closing when it switches to sheetOpen=false. I would love to use a better solution if someone has one!! This is a work around.
Same problem in
v4.5.1
.My temporary solution is to add a delay function in the middle :