Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buggy screen layout when using useAnimatedStyle inside native stack - Android #7129

Open
tomstevens94 opened this issue Feb 28, 2025 · 2 comments
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@tomstevens94
Copy link

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:
Image

Step 5:
Image

Step6:
Image

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

@github-actions github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided Platform: Android This issue is specific to Android labels Feb 28, 2025
@tomstevens94 tomstevens94 changed the title Buggy screen layout when using useAnimatedStyle - Android Buggy screen layout when using useAnimatedStyle inside native stack - Android Feb 28, 2025
@danieljvdm
Copy link

On Fabric/new architecture?

Probably related to: #6776

@tomstevens94
Copy link
Author

On Fabric/new architecture?

Probably related to: #6776

Yes new architecture 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Development

No branches or pull requests

2 participants