question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

White flash when using DarkTheme

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:24
  • Comments:27 (5 by maintainers)

github_iconTop GitHub Comments

33reactions
frknnaycommented, Dec 28, 2020

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

27reactions
ubaidmoincommented, Dec 18, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix the White Flash on Page Load When Using a Dark Theme ...
Recently a GitHub issue was opened that described a white flash on page load when the dark theme was active. After some investigation,...
Read more >
white flash on dark mode on refreshing page - Stack Overflow
white flash on dark mode on refreshing page · This is called a FOUC - flash of unstyled content. · The browser needs...
Read more >
Fix White Flash in Dark Mode in Firefox - Quasi Engineer
One fix is to go to “ about:config ” in firefox and set browser.display.background_color to a darker colour, say #2E2E31 . If this...
Read more >
How can disable this white flash when opening Chrome? (My ...
the chrome flag: Auto Dark Mode for Web Contents, set to enabled stops the flash but breaks the default page text/background for most...
Read more >
Fix the White Flash on Page Load When Using a Dark Mode ...
This Hugo theme I wrote have had a problem. It defaults to the light mode, but if you switch to the dark mode,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found