January 12, 2021

Fixing flashes of white in react-navigation

I was having a consistently annoying issue whilst trying to build a react-native app for iOS. Whenever I would navigate between pages (stacks), there would be an extremely quick flash of white content before the page was rendered. I had set the background color of practically every element to black, yet it would still flash up as white.

This happens due to the background of the <Stack.Screen>component being the backgroundColour of <NavigationContainer /> theme prop. So in my case, to fix this, all I needed to do was create a theme object and apply it to the <NavigationContianer />.

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


const theme = {
  colors: {
    background: 'black',


<NavigationContainer ={theme}>
      <Stack.Screen name="About" component={AboutScreen}/>
      <Stack.Screen name="Listen" component={LiveScreen}/>
      <Stack.Screen name="Schedule" component={ScheduleScreen}/>

Hopefully this can help someone else who was banging their head against the wall like i was.

Previous post