Android - transition animation glitch when navigating back with new architecture enabled

[mlazari]

Description

In some circumstances there is a weird screen jump when navigating back on Android in a stack navigator, only with new architecture enabled. In the project I am working on it's happening consistently when navigating from the second screen in the stack to the first one. In the minimal repro I created I have to start scrolling a list in the first screen and navigate quickly to the second screen to reproduce the issue when I navigate back to the first screen.

Here is how it looks like with new architecture enabled:

new-architecture.mp4

Here is the same in slow motion to see it better:

new-architecture-slow-motion.mov

Here is it with old architecture (you can see it in the old-arch branch in the repro repo), the issue doesn't happen here:

old-architecture.mp4

The same issue in the react-navigation repo: react-navigation/react-navigation#12897

I am using react-native-screens 4.16.0 to keep expo-doctor happy, but tried updating to the latest version 4.19.0 and the issue is still reproducing.

Steps to reproduce

A stack navigator with 2 screens, each screen contains a scroll view with some items (the scroll view on the second screen is not necessary, but helps to reproduce the issue a bit easier). To reproduce the issue:

1. Start scrolling the list and while it's still scrolling due to inertia navigate to the second screen.
2. Wait a bit and navigate back
3. See a weird jump at the end of the transition back to the first screen

Snack or a link to a repository

https://github.com/mlazari/navrepro

Screens version

4.16.0

React Native version

0.81.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy A52 (Android 14)

Acknowledgements

Yes

[mlazari]

Not sure if this helps, but I observed that if I make a small change to node_modules/react-native-screens/src/components/Screen.tsx (e.g. just add a whitespace or a comment somewhere) and save it, then the issue does not reproduce anymore until I restart the app.

[mlazari]

Also I observed that the issue is reproducible even if I remove react-native-screens dependency: react-navigation/react-navigation#12897 (comment)
So I am not sure if it's related to this repository or not.

[kmichalikk]

Hi @mlazari. Could you confirm that this is what I should look for? The horizontal jumping when the transition finishes?

scroll-horizontal-jump.mov

I can also see it breaking without screens.

cc @kkafar

[mlazari]

@kmichalikk Correct, that jump is the issue. It might be different depending on which animation is used, that horizontal jump happens with the default animation fade_from_right on Android 14. I added some more info I found in the react-navigation issue: react-navigation/react-navigation#12897 (comment)
As far as I can tell it is a react-native bug happening on Android with new architecture: facebook/react-native#50496

[kmichalikk]

Okay, thanks
I'm closing it here

[mlazari]

Okay, thanks for looking into it!