Android – Previous screen flashing when using shift transition after upgrading to Expo SDK 54

[yonitou]

Hi,

After upgrading from Expo SDK 53 → 54, I'm experiencing a visual glitch on Android only when navigating with React Navigation.

On Android, there's a flash of the previous screen when switching tabs. It’s not exactly a flicker — it looks more like a single-frame flash of the previous route during the transition. On iOS, everything works perfectly.

I had very hard time (almost 5 hours) to create a reproducible example that reproduces the issue. Looks like it's related having "big" screens with reanimated animations that changed the state of the screen during focus/blur as you will see in the repository.

I'm using the latest versions of all react-navigation packages.

https://github.com/user-attachments/assets/9dacabf2-6022-41ee-bfc7-94d5bcff8122

Look at seconds 1,12 & 28

What I tried :

• Changing the transition animation from shift → none → The issue disappears when using none.
• Setting detachInactiveScreens={false} → No effect, the glitch still happens

Expected behavior

The transition should behave normally without flashing the previous screen for a frame.

Reproduction

https://github.com/yonitou/mre-react-navigation

Platform

• [x] Android
• [ ] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [x] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [ ] react-native-drawer-layout
• [ ] react-native-tab-view

Environment

"@react-navigation/bottom-tabs": "^7.8.6",
		"@react-navigation/drawer": "^7.7.4",
		"@react-navigation/elements": "^2.3.1",
		"@react-navigation/native": "^7.1.21",
		"@react-navigation/native-stack": "^7.6.4",

[cpakken]

Does this have to do with https://github.com/expo/expo/issues/32425 https://github.com/software-mansion/react-native-screens/issues/2459

Those still haven't been fixed. When using slide_from_right, the tab exiting unmounts right away before the animation completes

[yonitou]

Hard to say tbh. The flickering I see in the the videos of the issues you mentioned don't look the same as mine but it could be. Another difference is that on these issues, people are experiencing problems on Expo 52/53. In my case, it happened right after upgrading to 54, not before that.

The flash I'm experiencing looks like :

1. Clicking on another tab
2. Animation is running and correctly triggered
3. Animation is finished, navigation is completed
4. Flash of previous screen happens. On my app, it's even more noticeable (because the screens are even heavier) because we can see 2-3 flashes of the previous screen instead of only one.

https://github.com/user-attachments/assets/d3722de1-bd6e-4c32-ba06-ee74677c0a06

Also, I don't have any problem when navigating in my stack screens on Android, I'm only experiencing it when navigating with my TabNavigator and only in 2 screens (I have 4 tabs in total). These 2 screens are included in the MRE and are "heavier" than the other ones

Don't know if that can help

[zaidmuachrat]

having the same issue with navigation v6 and react-native:0.81

[joe-sam]

I am using latest patch navigation v7 without Expo SDK so possibly update does not seem issue related

Similar transition flicker and previous screen frames on navigating on Android. Reverting yarn.lock (Android) to a pinned version of last correct working navigation 7 prior to yarn auto updating the patch version on 23 Nov seemed to fix the issue.
Incrementally determining which version introduces the bug led me to @react-navigation/stack 7.6.4. Version 7.6.3 and lesser seems to function fine.

[mlazari]

I had a similar issue after upgrading to expo 54 and enabling new architecture. I have a tab bar where each tab is a stack navigator. The issue I see is reproducible like this for me (I tried reproducing in a new expo app, but couldn't):

1. Navigate to one of the tabs (let's say you see Screen1 now, the initial screen in that stack navigator)
2. Navigate to a new screen Screen2 in that stack navigator
3. Navigate back. Here is where the issue occurs. Screen2 animates to the right as it should, but there is a weird jump happening to Screen1. It animates to the right until it's in the correct position, then immediately jumps to the left about 1/4 of the screen width and back to the correct position 2 times quickly. If I navigate from Screen2 to a new screen Screen3, then navigating back to Screen2 doesn't reproduce the issue. It happens only when navigating back to the initial screen in the stack.

I wasn't seeing any issues when navigating from one tab to another like shown in the video in this issue.

I tried downgrading @react-navigation/stack to 7.6.3 as the previous comment suggested, but it didn't help.

I ended up disabling new architecture (+downgrading a few dependencies that required new architecture: react-native-mmkv from 4.1.0 to 2.12.2, react-native-reanimated from 4.1.3 to 3.19.4 and removing react-native-worklets), and that helped fix the issue while keeping expo to version 54. Not an ideal solution, but couldn't figure out what was happening there, so I guess this workaround is the best I can do for now...

The issue was happening on Android only, testing on a Samsung A52 with Android 14. Using the latest react-navigation versions:

    "@react-navigation/bottom-tabs": "7.8.11",
    "@react-navigation/native": "7.1.24",
    "@react-navigation/stack": "7.6.11",

L.E. looks like I'll have to revert the change to old architecture and those dependency downgrades since that makes the app not be 16 KB compatible (tested in a emulator set up as per https://developer.android.com/guide/practices/page-sizes#16kb-emulator). Hopefully I can find another fix for this issue.

[mlazari]

I was able to reproduce my issue with a minimal repro project. Opened a separate issue, since I am not sure if it is the same issue as this one: https://github.com/react-navigation/react-navigation/issues/12897