How to get rid of white flashes on navigation using @react-navigation/native and @react-navigation/native-stack

Question

Whenever I navigate to another screen,the screen flashes white as the screen navigated to seems to fade in. I built the app to both have a light and dark mode; this would have been fine for light mode but in dark mode the white flash is annoying and I have no idea on how on how to get rid of it.

My App.js

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import LScreen from './src/screens/LScreen'
import HScreen from './src/screens/HScreen'
import CPScreen from './src/screens/CPScreen'

export default function App() {
  const Stack = createNativeStackNavigator()

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="LScreen" component={LScreen} />
        <Stack.Screen name="HScreen" component={HScreen} />
        <Stack.Screen name="CPScreen" component={CPScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Can someone kindly advise on how I can overcome this challenge or an alternative to this navigation method

Answer 1

First of all, you have to import '@react-navigation/native' adding to 'DefaultTheme' like so:

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

Inside this DefaultTheme there is a an array that has the background color rgb(242, 242, 242). This is the white flash you see. We will set this to some other value.

Create this constant:

const MyTheme = { 
  ...DefaultTheme, 
  colors: {
    ...DefaultTheme.colors, 
    background: '//whatever color you want it to be',
  }
};

Then you set the theme property on the NavigationContainer component like this:

<NavigationContainer theme={MyTheme}>
// Your stacks
</NavigationContainer>

This is the documentation to guide you: https://reactnavigation.org/docs/themes/

Answer 2

I created a similar project to test and here is the solution I came up with.

Try to use:

import {createStackNavigator} from '@react-navigation/stack'

Rather than:

import { createNativeStackNavigator } from '@react-navigation/native-stack'

With yours, I was seeing the same delay/white between screens. When I changed to the other, I saw no white screen. I tested this with a yellow and black background.

I created a basic light/dark theme using React Native Paper, and there were no issues there either.