BottomSheetModal immediately hides itself after opening
See original GitHub issueBug
It seems that the BottomSheetModal does not work in the default example. I dug into the code a little but and it seems like the doDismiss is being called when it’s initially presented:
if (isMinimized.current && !isForcedDismissed.current) {
return;
}
const adjustedIndex = dismissOnPanDown ? _index - 1 : _index; // This is true on initial `.present()` call - which I don't think it should, which leads to it immediately being removed
currentIndexRef.current = _index;
if (adjustedIndex >= 0) {
if (_providedOnChange) {
_providedOnChange(adjustedIndex);
}
} else {
doDismiss();
}
Environment info
| Library | Version |
|---|---|
| @gorhom/bottom-sheet | 2.0.2 |
| react-native | 0.63.4 |
| react-native-reanimated | 1.13.2 |
| react-native-gesture-handler | 1.9.0 |
Steps To Reproduce
- Simply try and present a
BottomSheetModalgiven the normal setup with a provider
Describe what you expected to happen:
- When calling
.present()it should open
Reproducible sample code
The bottom sheet modal example: https://gorhom.github.io/react-native-bottom-sheet/modal/usage
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
android - Show and Hide Bottom Sheet Programmatically
To close the BottomSheetDialogFragment from inside the fragment you can call: dismiss();. To show or hide the BottomSheetDialogFragment from the activity ...
Read more >5 Examples of the new Ionic 6 Bottom Sheet Modal
Get the details on how to use the brand new Ionic Bottom Sheet component in this guest blog post from Simon Grimm.
Read more >How to create bottom sheet / modal like this one? (read first ...
Parent commenter can delete this message to hide from others. ... get stuck on the bottom sheet being opened forever without being able...
Read more >Sheets: bottom - Material Design
DoModal bottom sheets with few items are fully visible upon opening. ... This places the top content immediately out of reach for users...
Read more >How to Create a Bottom Sheet in React Native
This component has several use cases, from filling in forms, ... way that you can do everything by yourself, you can also use...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@Michael-M-Judd please let me know if it’s not working with you
Strange - sorry. I also tested with a blank app and it worked. Perhaps it’s something todo with my react-navigation setup (i’m currently putting the modal at the screen level and provider wrapped around the app)