Buggy screen layout when using useAnimatedStyle inside native stack - Android #7129
Labels
Platform: Android
This issue is specific to Android
Repro provided
A reproduction with a snippet of code, snack or repo is provided
Description
ANDROID ONLY
I have a simple app that contains only a native-stack navigator, which contains 2 screens. Both screens are wrapped in an Animated.View. I can navigate between these screen absolutely fine without any issues. When I press a button on one of the screens and trigger an animation, the screen layout is very buggy on the second screen:
When I navigate to the next screen, it appears correct at first, but pressing any button on this screen causes the screen to shrink to an incorrect size, after navigating, when navigating back to this screen, the screen is overlapping the bottom edge and is too tall.
I have tried a similar animation using react-native Animated API, and the issue does not happen.
If the animatedStyle contains a transform, then the screen layout issues happens without needing to trigger any animation. otherwise, the animation needs to be triggered for the issues to occur.
Running on Android Pixel 7 API 35 - Android 15
All dependencies:
"dependencies": {
"@react-navigation/native": "^7.0.14",
"@react-navigation/native-stack": "^7.2.0",
"react": "19.0.0",
"react-native": "0.78.0",
"react-native-reanimated": "^3.17.0",
"react-native-safe-area-context": "^5.2.0",
"react-native-screens": "^4.9.1"
},
Steps to reproduce
Steps to follow:
Step 3:

Step 5:

Step6:

Snack or a link to a repository
https://github.com/tomstevens94/RNKC-issue-example
Reanimated version
3.17.0
React Native version
0.78.0
Platforms
Android
JavaScript runtime
None
Workflow
None
Architecture
Fabric (New Architecture)
Build type
None
Device
Android emulator
Device model
Pixel 7 API 35 - Android 7
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: