react-native-bottom-sheet: [v4] BottomSheetModal: Backdrop appears but Modal Content is not visible.
Bug
Very occasionally when calling present on a BottomSheetModal the backdrop will appear but the modal content will not be visible.
Oddly the content of the modal is still interact-able (i.e button presses get recorded) so the content is rendered, its just not visible (opacity: 0?).
This is very erratic, in that sometimes it happens first time, others it takes 5 or 10 trys dismissing and opening for it to occur. I have got it occurring in the snack below and have attached a screenshot to show.
I’m not ruling out us doing something wrong here and that snack is obviously a very reduced case but represents the broad use case. Primarily:
present()
called on button press- rendered inside react navigation stack
- BottomSheetFlatlist is inside the modal.
Just looking for pointers if we’re doing something wrong and happy to help investigate and provide whatever information may be useful.
Environment info
{ “dependencies”: { “@gorhom/bottom-sheet”: “^4.1.3”, “react-native-screens”: “~3.4.0”, “@react-navigation/stack”: “^6.0.9”, “react-native-reanimated”: “~2.2.0”, “@react-navigation/native”: “^6.0.4”, “react-native-gesture-handler”: “~1.10.2”, “react-native-safe-area-context”: “3.2.0” } }
Steps To Reproduce
- Tap ‘Open model’
- Dismiss modal
- Repeat open and close until eventually modal content doesn’t appear.
Describe what you expected to happen:
- Modal content reliably appears.
Reproducible sample code
Reminder that this doesn’t happen straight away, can take 5 / 10 / 20 tries. Speed does not seem to matter though.
In addition we’ve only seemed to get this issue on iOS, not saying that it couldn’t happen on Android only we haven’t seen it yet.
https://snack.expo.dev/@ryanhyslop/bottom-sheet-v4-reproducible-issue-template
Thanks!
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 13
- Comments: 15 (1 by maintainers)
Commits related to this issue
- fix: prevent hiding bottom sheet container on platforms other than Android (#719) — committed to gorhom/react-native-bottom-sheet by gorhom 3 years ago
- fix: prevent hiding bottom sheet container on platforms other than Android (#719) (cherry picked from commit 3da1a2e6f33fb886e53606d4bbcd06938d839008) — committed to bulkinav/react-native-bottom-sheet by gorhom 3 years ago
- fix: prevent hiding bottom sheet container on platforms other than Android (#719) — committed to openscientists/react-native-bottom-sheet by gorhom 3 years ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
- Remove problematic opacity style from container animatedStyle. This style was originally added to address some lingering-sheet behavior, however, it seems that it also causes some kind of race condit... — committed to discord/react-native-bottom-sheet by huderlem a year ago
We’re also running into this on v4.1.5
@gorhom I am using v4.1.5 but this still happens when the component rerenders. The content appears normally but as soon as the state changes and a rerender is triggered the content disappears but the backdrop remains.
I am also experiencing this problem. It seems like the content is actually there, just not visible. Even the pan down gesture is working, if you can guess where the handle component is.
this should be fixed on the next release
v4.1.4
👍@A01123748 this is working for us at the moment: https://github.com/gorhom/react-native-bottom-sheet/pull/730 not saying it’s the best fix though. Hopefully, @gorhom can input on when he has time.
I am experiencing the same issue. @ryanhyslop which one is your PR? @gorhom can you please have a look at this issue? I am open to contribute if we can discuss a solution.
I’ve raised a PR that points to where the problem is and a rather blunt fix for it. Would appreciate some input from someone a bit more experienced on the project though 👍