I'm trying to Use AppLoading to render home screen components but cant get the splash screen to stay until everything is loaded - react-hooks

Question

After optimising my images iv realised that I still need more time for my components to load. They are card like components with images.
I have 2 components to load one is in a flatList, the other just a basic card like component each component contains images. I have been trying in vain to get this to work and have to ask if anyone has a good solution. Here's what I have so far.
import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import AppLoading from "expo-app-loading";
import Header from "./components/Header";
import HomeScreen from "./screens/HomeScreen";
const fetchHomeScreen = () => {
return HomeScreen.loadAsync({
HomeScreen: require("./screens/HomeScreen"),
Header: require("./components/Header"),
});
};
export default function App() {
const [HomeScreenLoaded, setHomeScreenLoaded] = useState(false);
if (!HomeScreenLoaded) {
return (
<AppLoading
startAsync={fetchHomeScreen}
onFinish={() => setHomeScreenLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<View style={styles.screen}>
<Header title="Your Beast Log" />
<HomeScreen />
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: "#3E3636",
},
});

Answer 1

Are you using expo status bar ?? then try these;
import splash screen
import * as SplashScreen from 'expo-splash-screen';
add this to the top of main function
SplashScreen.preventAutoHideAsync()
export default function App() {....}
then add this to your screen where you hide the splash screen
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
if(appIsready) {
(async () => {
await SplashScreen.hideAsync();
})()
}
},[appIsReady])
async function prepare() {
try {
await fetchHomeScreen;
//OR
await HomeScreen.loadAsync({
HomeScreen: require("./screens/HomeScreen"),
Header: require("./components/Header"),
});
} catch (e) {
console.warn(e);
} finally {
// Tell the application to render
setAppIsReady(true);
}
}