Content becomes obscured by navigation bar after keyframe animation is triggered #3813
Labels
Needs review
Issue is ready to be reviewed by a maintainer
Platform: Android
This issue is specific to Android
Repro provided
A reproduction with a snippet of code, snack or repo is provided
Comments
6 tasks
6 tasks
piaskowyk
pushed a commit
that referenced
this issue
Jan 5, 2023
## Description Fixes #2906 #3368 #3813 Previously, when layout animations were enabled, when updating layout for `react-native-screens`' `Screen`, we set it's dimensions to the dimensions of the component containing that screen. On the JS side, header’s height is set to 0 due to it being a wrapper for the native Android/iOS header component, but on the native side, its height is calculated by the system and the information about the new Screen’s height (which is effectively smaller due to that header) is passed to UIManager here: [https://github.com/software-mansion/react-native-screens/blob/100ed4f9ffd5f27ace4d[…]7a00c64/android/src/main/java/com/swmansion/rnscreens/Screen.kt](https://github.com/software-mansion/react-native-screens/blob/100ed4f9ffd5f27ace4ddbb5c5ffbb80e7a00c64/android/src/main/java/com/swmansion/rnscreens/Screen.kt#L74). It seems that the newest implementation of LayoutAnimations is aware of those new values. ## Changes <!-- Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Added `foo` method which add bouncing animation - Updated `about.md` docs - Added caching in CI builds --> <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> ## Test code and steps to reproduce <!-- Please include code that can be used to test this change and short description how this example should work. This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example) --> ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes
fluiddot
pushed a commit
to wordpress-mobile/react-native-reanimated
that referenced
this issue
Jun 5, 2023
…re-mansion#3791) ## Description Fixes software-mansion#2906 software-mansion#3368 software-mansion#3813 Previously, when layout animations were enabled, when updating layout for `react-native-screens`' `Screen`, we set it's dimensions to the dimensions of the component containing that screen. On the JS side, header’s height is set to 0 due to it being a wrapper for the native Android/iOS header component, but on the native side, its height is calculated by the system and the information about the new Screen’s height (which is effectively smaller due to that header) is passed to UIManager here: [https://github.com/software-mansion/react-native-screens/blob/100ed4f9ffd5f27ace4d[…]7a00c64/android/src/main/java/com/swmansion/rnscreens/Screen.kt](https://github.com/software-mansion/react-native-screens/blob/100ed4f9ffd5f27ace4ddbb5c5ffbb80e7a00c64/android/src/main/java/com/swmansion/rnscreens/Screen.kt#L74). It seems that the newest implementation of LayoutAnimations is aware of those new values. ## Changes <!-- Please describe things you've changed here, make a **high level** overview, if change is simple you can omit this section. For example: - Added `foo` method which add bouncing animation - Updated `about.md` docs - Added caching in CI builds --> <!-- ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before ### After --> ## Test code and steps to reproduce <!-- Please include code that can be used to test this change and short description how this example should work. This snippet should be as minimal as possible and ready to be pasted into editor (don't exclude exports or remove "not important" parts of reproduction example) --> ## Checklist - [ ] Included code example that can be used to test this change - [ ] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
After performing the following steps on the provided snack using an android emulator (or a physical device), content on the details screen becomes partly obscured by the navigation bar:
Here's a screen recording recorded on my Google Pixel 6 to further illustrate the issue:
screen-20221127-184000_2.mp4
Interestingly, this behavior only seems to happen when using the Native Stack Navigator from React Navigation (as opposed to the Stack Navigator).
Steps to reproduce
See above.
Snack or a link to a repository
https://snack.expo.dev/@philiplindberg/reanimated-repro
Reanimated version
2.12.0
React Native version
0.70.5
Platforms
Android
JavaScript runtime
No response
Workflow
No response
Architecture
No response
Build type
No response
Device
No response
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: