[Android] First-mount white flash for screens inside nested native-stack inside bottom-tabs (regression in 4.25.0)

[DragomirAndrei19]

Description

After upgrading react-native-screens from 4.24.0 to 4.25.0, I noticed a regression: when switching between tabs for the first time, while the screen is being mounted, the screen content flashes white or remains white for about a second.

This did not happen in the previous version. Subsequent tab switches do not seem to trigger the same behavior.

These are minimal reproduction examples. In a more complex app I am working on, the issue is much more noticeable: the white flash appears to last longer, and it also happens on real devices and in release builds. Perhaps it's also tied to screen content somehow.

react-native-screens 4.24.0	react-native-screens 4.25.0
424.webm	425.webm

I prepared two separate repositories to make this easier to reproduce:

1. react-native-screens 4.24.0 — works as intended
2. react-native-screens 4.25.0 — regression

The only difference between the two repositories is the related React Navigation package versions.

The 4.24.0 repo uses:

├── @react-navigation/bottom-tabs@7.15.9
├── @react-navigation/native-stack@7.14.11
├── @react-navigation/native@7.2.2

The 4.25.0 repo uses:

├── @react-navigation/bottom-tabs@7.16.1
├── @react-navigation/native-stack@7.15.1
├── @react-navigation/native@7.2.4

This is because those React Navigation updates migrated to react-native-screens 4.25.0.

In the 4.24.0 repo, I also downgraded the React Navigation packages because the newer versions caused another issue at app launch. That might be a separate bug, unless those React Navigation versions make react-native-screens 4.25.0 mandatory. Therefore, keeping react-native-screens to 4.24.0 to mitigate this issue but updating the react-navigation libraries results in this error

I also prepared a ready to install repo for this.

Steps to reproduce

1. Download the two repos, npm install and compare

Snack or a link to a repository

https://github.com/DragomirAndrei19/react-native-screens-white-flash-425-regression

Screens version

4.25.0

React Native version

0.85.3

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Android emulator

Device model

Pixel 9a Simulator

Acknowledgements

Yes

[candidosales]

The issue was fixed in this version 4.26.0-nightly-20260514-5f94921df

[kkafar]

Hey! Thanks for the report. @candidosales have you, by any change, tracked down the commit that fixed this? We're planning to publish 4.25.1 & I'll cherry-pick this change.

If not, that's fine. I'm sure somebody from the team will know on Monday 😄

[DragomirAndrei19]

The issue was fixed in this version 4.26.0-nightly-20260514-5f94921df

@candidosales

In the provided example, 4.26.0-nightly-20260514-5f94921df doesn't seem to fix it, and neither does the newer 4.26.0-nightly-20260515-407d0e81d.

[kkafar]

Update: I think I understand what is going on. I'll need to coordinate with react-navigation team to resolve this issue rather on their side.

[kkafar]

So tldr is:

indeed, in 4.25.0 we've aligned Android with iOS and switched towards something we call managed operation mode. To put it simply: when you press on a tab, native side changes it immediately, even if there are no contents rendered yet. That's why you see a flash. There should be none if you navigate programatically.

Preloading the content / giving you opportunity to have loading skeletons is a task for the downstream. I've reached out to react-navigation team to sort this out.

I'll keep the ticket open for some time, but we likely won't do much on the side of the react-native-screens.

[kkafar]

Regarding the second issue you reported: that's expected and won't be fixed. We've introduced some big changes in the experimental Tabs API before stabilisation and this is the effect.

[DragomirAndrei19]

Regarding the second issue you reported: that's expected and won't be fixed. We've introduced some big changes in the experimental Tabs API before stabilisation and this is the effect.

Thank you for the clarification. I assumed that was the case, but right now, if we downgrade react-native-screens back to 4.24.0 to avoid this issue, we also have to downgrade React Navigation (one or several sub-packages).

This means that any future versions/fixes in React Navigation will effectively make react-native-screens@4.25.0 mandatory.

This wasn’t entirely clear from the release notes alone, although this is obviously on React Navigation’s side.

[satya164]

@DragomirAndrei19 try specifying lazy: false in screenOptions.

[DragomirAndrei19]

@satya164

Thank you. At first glance, setting lazy: false in the screen options of <Tab.Navigator> does seem to work around the issue.

I want to make sure I understand the expected behavior: with the default lazy: true, are tab screens still intentionally mounted only on first focus, but after the react-native-screens@4.25.0 changes that first mount can now become visible as a white flash because the native tab switch happens before the JS content is ready?

If so, is this something React Navigation intends to handle so existing projects keep the previous behavior without changes, or should affected projects explicitly add lazy: false and treat it as the recommended migration path after upgrading?

[satya164]

@DragomirAndrei19

with the default lazy: true, are tab screens still intentionally mounted only on first focus, but after the react-native-screens@4.25.0 changes that first mount can now become visible as a white flash because the native tab switch happens before the JS content is ready?

Yes

If so, is this something React Navigation intends to handle so existing projects keep the previous behavior without changes, or should affected projects explicitly add lazy: false and treat it as the recommended migration path after upgrading

Currently, the only solution is to disable lazy loading, which we will make default in React Navigation when using native tabs, so you don't need to do it manually.

[kkafar]

@DragomirAndrei19 I've got a word from react-navigation team that you can set lazy: false in screen options, so that the screen will be preloaded immediately.