3

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

Chris
  • 6,914
  • 5
  • 54
  • 80
coolDog
  • 476
  • 1
  • 3
  • 11

4 Answers4

2

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>
Apungu Raymond
  • 91
  • 6
1

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.

Corey Sutton
  • 767
  • 5
  • 19
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/

Chris
  • 6,914
  • 5
  • 54
  • 80
henZzz
  • 11
  • 1
0

Just remove animation during navigation. That's all!

coolDog
  • 476
  • 1
  • 3
  • 11