React-native-screens: White flash when using DarkTheme

[dogukany]

When DarkTheme is activated white flash appears while moving to the other page. Its not appear in DefaultTheme.

<Button
          title={'route'}
          onPress={() => {
            this.props.navigation.navigate('Add');
          }}
        />

    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Add" component={Add} />
      </Stack.Navigator>
    </NavigationContainer>

[enheit]

I have the same issue on Android (v9)

[msvargas]

I was think same your, but the white flash must be the root view container, in my case always was white, because, simply check color schema and change your backgroundColor root wrapper.

const colorScheme = useColorScheme();

return  <View style={[styles.container, { backgroundColor: colorScheme === 'dark' ? 'black' : '#F5FCFF' }]}>
      {children}
      {bootSplashIsVisible && (
        <Animated.View style={[StyleSheet.absoluteFill, styles.bootsplash, { opacity: opacity.current }]}>
          <Animated.View style={{ transform: [{ translateY: translateY.current }] }}>
            <FastImage
              source={images.logo}
              onLoadEnd={() => {
                console.log('[AppLoading] hide boot splash');
                BootSplash.hide();
                !initialized && setBootSplashLogoIsLoaded(true);
              }}
              style={styles.logo}
            />
            <ActivityIndicator size="large" color={Colors.blueGrey800} />
          </Animated.View>
        </Animated.View>
      )}
    </View>

NOTE: I am not use react navigation

[WoLewicki]

@dogukny @enheit does @punisher97 's solution fix your issue?

[enheit]

@WoLewicki I have not checked yet... I will try ASAP

[kmagiera]

I believe the white flash comes from some container view having a white (or default background). Possibly the app container you render need to be styled properly

[msvargas]

@kmagiera it's correct i use react-navigation and setting backgroundColor(#000) in previous viewContainer, in my case a stack

const Stack = createStackNavigator();

const RootNavigator = () => {
  const theme = useTheme();
  const isAuthenticated = useSelector(isAuthenticatedSelector);
  const navigationTheme = theme.dark ? DarkTheme : DefaultTheme;
  const screenOptions: StackNavigationOptions = {
    headerTintColor: '#fff',
    cardStyle: { backgroundColor: '#000' },
    headerShown: false,
  };

  return (
    <NavigationContainer theme={navigationTheme}>
      <Stack.Navigator screenOptions={screenOptions}>
        {!isAuthenticated ? (
          <Stack.Screen
            name="Auth"
            component={AuthNavigator}
            options={{ headerShown: false, animationTypeForReplace: isAuthenticated ? 'push' : 'pop' }}
          />
        ) : (
          <Stack.Screen name="Home" component={HomeScreen} options={{}} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

[dogukany]

@dogukny @enheit does @punisher97 's solution fix your issue?

Still appears. I changed root view's background to black already and tried with useTheme but didn't fix.
I use with react navigation
```

function HomeScreen(props) {
const {colors} = useTheme();

return (
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.background, // or #000000
}}>

[msvargas]

@dogukny an screen its not a root view container, must be in the top, the first View or Navigator

[WoLewicki]

Did you manage to fix the issue with these solutions @dogukny?

[nonewcode]

The contentStyle of <Stack.Screen>, backgroundColour of <NavigationContainer /> theme prop, rootView.backgroundColour in AppDelegate.m for iOS & windowBackground in styles.xml for Android all need to be set.

[dogukany]

Did you manage to fix the issue with these solutions @dogukny?

I did punisher97's solution for first view but didn't change. It's not about just black color or darktheme, other colors effect too.

[WoLewicki]

I believe it is the same issue as #111, so I will close this issue to keep the discussion about it in 1 place only. Feel free to comment if I am wrong.

[ubaidmoin]

The contentStyle of <Stack.Screen>, backgroundColour of <NavigationContainer /> theme prop, rootView.backgroundColour in AppDelegate.m for iOS & windowBackground in styles.xml for Android all need to be set.

I resolved the issue by following @dogukny instructions.
In NavigationContainer add:
theme={{ colors: { background: '#000' }}}
It stopped the white flickering as i set it to black.

[frknnay]

detachInactiveScreens={false} also fixed the issue for me.
example:
<MainStack.Navigator detachInactiveScreens={false} screenOptions={{ animationEnabled: false }} > ... </MainStack.Navigator>

[iqqmuT]

@frknnay For me it was screenOptions={{ animationEnabled: false }} (which you also have) that fixed the issue.

[luizwhite]

It is a good practice to define all props like this.
So, to resolve my issue i did

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

const App: React.FC = () => (
  <NavigationContainer
    theme={{
      dark: true,
      colors: {
        ...DefaultTheme.colors,
        background: '#mycolor',
        card: '#mycolor',
      },
    }}
  >
  ...
...