[Bug]: The previous screen does not resize after changing orientation while another screen is presented on top in the nav stack using presentation transparentModal

[vestrelatlassian]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

When a BottomSheet or BottomSheetModal is mounted on a component that is being rendered in a native stack navigator screen with presentation: 'transparentModal', the previous screen does not resize accordingly.

The issue does not reproduce if the BottomSheet or BottomSheetModal is not used, or at the very least not mounted.

I created a fork; https://github.com/vestrelatlassian/react-native-bottom-sheet

You can see the some code changes to the examples that allows me to showcase the issue; https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.2...vestrelatlassian:react-native-bottom-sheet:master

I made the bare minimum changes for brevity. The setup / structure is similar to what we have in our production app, where the issue is also reproducible.

Why use react navigation presentation: 'transparentModal?

We use it in order to keep screens visible beneath the screen at the top of the react navigation native stack.

Using presentation: 'modal does not work because it only allows for the screen at the top of the nav stack to be visible in Android. As for iOS, the modal presentation is a bit different because the previous screen is still "visible" whenever the user drags the top screen down a bit to peak at the previous screen. Regardless, this is a problem.

Following the Reproduction steps...

Expected behavior

The previous screen where the "Navigate to Native Modal" button is rendered should resize to take the full width of the device.

Actual behavior

The previous screen where the "Navigate to Native Modal" button is rendered does NOT resize to take the full width of the device.

Demo

Reproduction steps

• Run the example in iOS and/or Android with the code changes.
• Expand "THIRD PARTY INTEGRATION".
• Tap "React Native Screens".
• Tap "Navigate to Native Modal".
• Tap "Present Modal".
• Rotate the screen.

Reproduction sample

https://snack.expo.dev/@vestrelatlassian/bottom-sheet---snack-to-satisfy-bug-report-issue-template

Relevant log output

N/A

[vestrelatlassian]

This is my fourth attempt at filing this bug.

• https://github.com/gorhom/react-native-bottom-sheet/issues/2256
• https://github.com/gorhom/react-native-bottom-sheet/issues/2257
• https://github.com/gorhom/react-native-bottom-sheet/issues/2258

All three got automatically closed for "not following the template"...

Also, please ignore the snack that I linked. It's just something I created that I thought was required to get the template bot to stop closing my issues.

I apologize for the spam 🙏

[vestrelatlassian]

The issue is NOT specific to BottomSheetModal. The issue is also reproducible when using BottomSheet.

In addition to my changes, use BottomSheet instead of BottomSheetModal in BackdropExample.tsx. Then follow these steps;

1. Run the example in iOS and/or Android with the code changes.
2. Expand "THIRD PARTY INTEGRATION".
3. Tap "React Native Screens".
4. Tap "Navigate to Native Modal".
5. Rotate the screen.

Notice that there is no need to tap "Present Modal" because the BottomSheet is already mounted after step 4.

Here's what it looks like;

[vestrelatlassian]

The issue does not reproduce if the BottomSheet or BottomSheetModal is not used, or at the very least not mounted.

I almost forgot to attach a recording of this. Using the same changes, follow these steps;

1. Run the example in iOS and/or Android with the code changes.
2. Expand "THIRD PARTY INTEGRATION".
3. Tap "React Native Screens".
4. Tap "Navigate to Native Modal".
5. DO NOT tap "Present Modal".
6. Rotate the screen.

Notice that by not tapping "Present Modal" at step 5, the BottomSheet managed by the BottomSheetModal remains unmounted. Therefore, the issue does not reproduce. We get the desired behavior of "the previous screen where the "Navigate to Native Modal" button is rendered should resize to take the full width of the device."

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[vestrelatlassian]

I might work on this myself, when I get the time.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[vestrelatlassian]

Not stale

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[vestrelatlassian]

Btw, we bumped a lot of our dependencies. This is no longer reproducible =)