javascriptreact-nativereact-navigationreact-navigation-stackreact-navigation-v6

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


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


Solution

  • Just remove animation during navigation. That's all!