at using Expo, After splash screen, Blink(Flash) with white screen - react-native

Question

I made Expo app with react native navigation 5.
please refer my solved question(same install situation).
but After splash on FIRST launching, White screen is blink(Flashed : about 0.5 sec). Especially, At Dark theme, I can find this bug easily.
This is App.tsx
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
if (!isLoadingComplete) {
return null;
} else {
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar style='light'/>
</SafeAreaProvider>
);
}
}
and this is index.tsx at nvigation
import { RootStackParamList } from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<RootNavigator />
</NavigationContainer>
);
}
const Stack = createStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
</Stack.Navigator>
);
}
At Hook, useCachedResources.ts
import { MaterialIcons } from '#expo/vector-icons';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import * as React from 'react';
export default function useCachedResources() {
const [isLoadingComplete, setLoadingComplete] = React.useState(false);
React.useEffect(() => {
async function loadResourcesAndDataAsync() {
try {
SplashScreen.preventAutoHideAsync();
await Font.loadAsync({
...MaterialIcons.font,
'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
});
} catch (e) {
console.warn(e);
} finally {
setLoadingComplete(true);
SplashScreen.hideAsync();
}
}
loadResourcesAndDataAsync();
}, []);
return isLoadingComplete;
}
and useColorScheme.ts
import { Appearance, ColorSchemeName } from 'react-native';
import { useEffect, useRef, useState } from 'react';
export default function useColorScheme(delay = 500): NonNullable<ColorSchemeName> {
const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());
let timeout = useRef<NodeJS.Timeout | null>(null).current;
useEffect(() => {
Appearance.addChangeListener(onColorSchemeChange);
return () => {
resetCurrentTimeout();
Appearance.removeChangeListener(onColorSchemeChange);
};
}, []);
function onColorSchemeChange(preferences: Appearance.AppearancePreferences) {
resetCurrentTimeout();
timeout = setTimeout(() => {
setColorScheme(preferences.colorScheme);
}, delay);
}
function resetCurrentTimeout() {
if (timeout) {
clearTimeout(timeout);
}
}
return colorScheme as NonNullable<ColorSchemeName>;
}
How to solve this bug? Please give me your hand.

Answer 1

I just solved this issue by specifying backgroundColor in my app.json to match the background color of the splash screen.
Expo Docs for backgroundColor
(string) - The background color for your app, behind any of your React views. This is also known as the root view background color.
6 character long hex color string, for example, '#000000'. Default is white: '#ffffff'.

Answer 2

Try to use SplashScreen.preventAutoHideAsync() in your App.js before its declaration.
For example:
SplashScreen.preventAutoHideAsync();
export default function App() {
...
Don't forget to delete the SplashScreen.preventAutoHideAsync() call in your loadResourcesAndDataAsync() function. Keep it only in the App.js file.
I hope this help you. Worked for me.

Answer 3

Just got a breakthrough on this after few days so what you will modify in your index.ts file
your code
function RootNavigator() {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title:
'Oops!' }} />
</Stack.Navigator>
);
}
what it should be :
function RootNavigator() {
return (
<Stack.Navigator initialRouteName="Root" screenOptions={{ headerShown: false
}}>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title:
'Oops!' }} />
</Stack.Navigator>
);
}
by adding initialRouteName your problem should get solved

Answer 4

their other reason also makes sure that your import {useState,useEffect } or other hooks from react not react.development, you will face that if you published your app on the expo or generated API or apk