search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
https://docs.swmansion.com/react-native-screens/
MIT License
3.1k stars 521 forks source link

Orientation Bugs with transparentModal and containedTransparentModal #2006

Closed amadeus closed 9 months ago

amadeus commented 10 months ago

Description

I've found two classes of orientation bugs related to transparentModal and containedTransparentModal. I've also created a small demo react native project that shows off these two bugs in isolation. One interesting thing to note -- when I was trying to reproduce these in an Expo project, the transparentModal bug did not reproduce, only in a vanilla react-native project which I've attached a link for here: https://github.com/amadeus/react-navigation-bug

These bugs apply to iOS only, as far as I can tell.

Steps to reproduce

transparentModal Bug:

  1. Spawn a screen with transparentModal
  2. Dismiss that view
  3. Notice how safe areas are now locked to the portrait values regardless of orientation change?

This bug does not get triggered by any other modal type. Here's a video showing the bug:

https://github.com/software-mansion/react-native-screens/assets/83376/a141648d-53c4-4325-b752-500de5628452

Notice after i've spawned the transparentModal, all subsequent rotations show portrait safe areas in landscape orientation?

It also gets a bit weird if you spawn the modals in landscape the entire time -- notice when finally dismissing the transparent modal, the safe areas only break then:

https://github.com/software-mansion/react-native-screens/assets/83376/348479b2-a0af-4a4b-a612-3d70478c07c2

containedTransparentModal Bug:

In trying to work around this issue on Discord with containedTransparentModal, I found another bug with containedTransparentModal where it breaks if you rotate the screen with the containedTransparentModal showing:

  1. Spawn a containedTransparentModal
  2. Rotate screen
  3. Notice how containedTransparentModal doesn't seem to update it's dimensions with the new rotated size?

https://github.com/software-mansion/react-native-screens/assets/83376/8d96129f-93b7-43ee-a943-f73923fe7e7b

Snack or a link to a repository

https://github.com/amadeus/react-navigation-bug

Screens version

3.25.0 (but it appears to even repro in the latest version)

React Native version

0.73.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Real device

Device model

No response

Acknowledgements

Yes

github-actions[bot] commented 10 months ago

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Steps to reproduce section.

amadeus commented 10 months ago

I literally filled out the steps to reproduce with a ton of steps and videos 😬

tboba commented 10 months ago

@amadeus Yeah, looks like our triage bot didn't detect them 😅 I've just tested the repro and it is reproducible for me. Thanks for submitting this issue!