react-native-bottom-sheet: Bottom Sheet Modal - unable to swipe close modal on Android
Bug
- Unable to close bottom sheet modal on Android. iOS works great.
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | ^1.4.1 |
react-native | 0.62.2 |
react-native-reanimated | ^1.9.0 |
react-native-gesture-handler | ^1.6.1 |
Steps To Reproduce
- Implement bottom sheet modal
- Try to swipe down on Android
Describe what you expected to happen:
- Expect the modal to close when user swipes down
Reproducible sample code
Wrapped my navigation in modal provider
const AppNavigation = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<AlertContextProvider customStyles={customStyles}>
<BottomSheetModalProvider dismissOnScrollDown={true} allowTouchThroughOverlay={false}>
<PlayerContextProvider>
<MainStackNavigator />
</PlayerContextProvider>
</BottomSheetModalProvider>
</AlertContextProvider>
</NavigationContainer>
</SafeAreaProvider>
);
};
- Rendering modal on button press
// Makes the search full page modal appear
const handlePresentPress = useCallback(() => {
present(
<SearchComponent
updateSearch={(search) => setSearch(search)}
onTagSelect={(tag) => updateSearch(tag.title)}
search={search}
isLoading={isLoading}
tags={storyReducer.allTags}
/>,
{
snapPoints: snapPoints,
onChange: handleSheetChanges,
}
);
}, [present, snapPoints, handleSheetChanges]);
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 17 (4 by maintainers)
Are you able to swipe on normal (non-modal) sheets? I had an issue where I was unable to drag sheets on Android, and it turned out I hadn’t set up
react-native-gesture-handler
properly for Android inMainActivity.java
I also faced this issue. Just had to wrap my app with
<GestureHandlerRootView />
.This worked for me, but then I get a console warning
Warning: Cannot record touch end without a touch start.
whenever I dismiss the bottom sheet modal. Anyone else get this / know how to fix it? Just a warning, but would be nice to be able to resolve it.