After loading the expo-splash-screen, a white screen appears.
App.js
import React, { useCallback, useEffect } from 'react';
import * as Font from 'expo-font';
import { useState } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import MainLogin from './components/navigate';
import { View } from 'react-native';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
await Font.loadAsync ({
'CG-Bold': require('./assets/fonts/CormorantGaramond-Bold.ttf')
});
await new Promise(resolve => setTimeout(resolve, 2000));
setAppIsReady(true);
} catch (e) {
console.warn(e);
} finally {
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () =>{
if (appIsReady) {
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return(
<View onLayout={onLayoutRootView}>
<MainLogin />
</View>
);
}
I tried to do via if else there was progress in expo go but when I built APK in it was also white screen after loading. I've only tried to do. enter image description here
I was solved by chat-GPT, it turns out I needed to add "style={{ flex: 1 }}" to the component so that would display correctly