react-navigation / react-navigation/react-navigation

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

Open
#12,862 10 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug platform:android repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

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
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @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",

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked mre-react-navigation reproduction and run it on Android with the reported Expo SDK 54 and bottom-tabs versions. Compare the shift and none transitions, then inspect how focus/blur state changes interact with the transition. Done means switching tabs no longer shows a frame of the previous route while preserving the expected shift animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.