White flash when using DarkTheme
See original GitHub issueWhen 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:
- Created 4 years ago
- Reactions:24
- Comments:27 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
detachInactiveScreens={false}
also fixed the issue for me. example:<MainStack.Navigator detachInactiveScreens={false} screenOptions={{ animationEnabled: false }} > ... </MainStack.Navigator>
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.