Buggy screen layout when using useAnimatedStyle inside native stack - Android

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:

1. 'yarn' to install dependencies
2. 'npx react-native run-android' to run android app.
3. Use bottom buttons to navigate, and observe correct screen layout.
4. Press 'animate' button to trigger animation.
5. Navigate forward and observe incorrect screen height when holding button down (too small)
6. Navigate back and observe incorrect screen height (too large)

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

Start by running the linked RNKC-issue-example repository on Android and follow the listed navigation and animation steps. Compare the useAnimatedStyle behavior with React Native's Animated API, then trace the native-stack layout interaction. Done means the reproduced screens retain the correct height and position after animation, forward navigation, and returning to the screen.