[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

1. Tap ‘Open model’
2. Dismiss modal
3. Repeat open and close until eventually modal content doesn’t appear.

Describe what you expected to happen:

1. 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!

[AlexBHarley]

We’re also running into this on v4.1.5

[He1nr1chK]

@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.