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 />.

1
2import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
3
4...
5
6
7const theme = {
8  ...DefaultTheme,
9  colors: {
10    ...DefaultTheme.colors,
11    background: 'black',
12  },
13}
14
15...
16
17<NavigationContainer ={theme}>
18    <Stack.Navigator>
19      <Stack.Screen name="About" component={AboutScreen}/>
20      <Stack.Screen name="Listen" component={LiveScreen}/>
21      <Stack.Screen name="Schedule" component={ScheduleScreen}/>
22    </Stack.Navigator>
23</NavigationContainer>
24
25

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