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

Android screen cut off at bottom when navigating to new screen while keyboard is open #2490

Open chrispader opened 5 days ago

chrispader commented 5 days ago

Description

When using @react-navigation/native-stack in RN v0.75.2 under New Architecture, new screens on Android will be cut off on the bottom by the height of the keyboard, when navigating from a screen while the keyboard is open.

In this video, you can see navigating both while the keyboard is open and while it's closed.

https://github.com/user-attachments/assets/f5a1fbf4-ea3e-4403-a716-037266cf3871

Sometimes the screen is cut off completely, while other times the screen will flicker a few times and then either render in full or be cut off. The actual end result is not always 100% reproducible.

Also, the layout measurements received through react-devtools are not covering the whole screen:

Screenshot 2024-11-11 at 12 52 00

Steps to reproduce

On Android:

  1. Use the repro repo or create a demo app using @react-navigation/native-stack
  2. On a screen with a TextInput, open the keyboard by clicking the TextInput
  3. While the keyboard is open, navigate to a new screen (e.g. by clicking on some button that performs navigation)

Expected behaviour: The screen will display in full and the keyboard is hidden. The layout measurements (e.g. in react-devtools) cover the whole screen

Actual behaviour: The screen is cut off at the the bottom by the height of the keyboard, even though the keyboard is not displayed.

Snack or a link to a repository

https://github.com/chrispader/rn-new-arch-native-stack-modal-issue-repro

Screens version

3.34.0

React Native version

0.75.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy S21 / Samung Galaxy S10e

Acknowledgements

Yes

WoLewicki commented 3 days ago

@chrispader are you sure you linked the proper repro for the issue? It seems like the modal issue.

WoLewicki commented 3 days ago

Ok nvm I can see that there is a TextInput there also.

chrispader commented 3 days ago

@chrispader are you sure you linked the proper repro for the issue? It seems like the modal issue.

yes, it's the same repro project. Also you cannot see the cut off display, but in react-devtools the measurements are wrong.

You can also test it in E/App by opening the composer in a report and going to the details while open

WoLewicki commented 3 days ago

Hmm so do you know why I cannot see the cut off display in the repro, but it is visible in E/App?

WoLewicki commented 3 days ago

Also, I can see only the previous screen is cut-off: image compared to second: image

WoLewicki commented 3 days ago

Maybe the issue is resolved on the newest main and/or in RN 0.76? Did you test it on newest main of react-native-screens ?