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

user_18677155 0
Viewed 116

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

react-navigation-v6 react-navigation-stack react-navigation expo react-native
3 Answers

Import DarkTheme from "@react-navigation/native" and set the theme prop on NavigationContainer to DarkTheme Code below

<NavigationContainer theme={DarkTheme}>
<Stack.Navigator>
  <Stack.Screen name="LScreen" component={LScreen} />
  <Stack.Screen name="HScreen" component={HScreen} />
  <Stack.Screen name="CPScreen" component={CPScreen} />
</Stack.Navigator>
</NavigationContainer>

user_138778740

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.

user_176668630

Just remove animation during navigation. That's all!

user_186771550
Related