How to hide splash screen in react native build using expo - react-native

Question

My app is not loading after splash screen. It just stuck there.
So I added expo-splash-screen and still is not passing the splash screen. Before adding splash screen everything was working fine :(
See this is my App.js code. As you can see it only holds the navigation container which holds the links to other screens including the main home screen.
import {StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { MaterialIcons } from "#expo/vector-icons";
import { HomeNavigator } from './CustomNavigation';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import FavouritesScreen from './src/screens/FavouritesScreen'
import HomeScreen from './src/screens/HomeScreen';
import MoreOptions from './src/screens/MoreOptions'
import React, { useEffect, useState } from 'react'
console.reportErrorsAsExceptions = false; //to hide touch warning
const Stack = createNativeStackNavigator()
const Tab = createBottomTabNavigator();
SplashScreen.preventAutoHideAsync();
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false)
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
await Font.loadAsync(Entypo.font);
await new Promise(resolve => setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
// Tell the application to render
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;` `
}
return (
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
onLayout={onLayoutRootView}>
<StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ff3b3b" translucent={true} />
<NavigationContainer>
//it contains nothing but the navigation code
</NavigationContainer>
</View>)
Please tell me where and what I'm doing wrong here.

Answer 1

I give you the working example please check it
then after you don't understand let me know
code
import React, { useRef, useEffect } from 'react';
import { StyleSheet, View, Image, StatusBar, Text } from 'react-native';
/**
* RN libraries
*/
import { useNavigation } from '#react-navigation/native';
export default function Splash() {
const animation = useRef(null);
const navigation = useNavigation();
useEffect(() => {
animation.current?.play();
navigation.addListener('focus', () => {
animation.current?.play();
});
setTimeout(() => {
navigate();
}, 2500);
}, []);
const navigate = () => {
navigation.navigate('Home');
};
return (
<View style={styles.animationContainer}>
<Text
style={{
textAlign: 'center',
fontSize: 50,
fontStyle: 'italic',
fontFamily: 'Poppins-Medium',
fontWeight: '800',
color: '#fff',
}}>
Online{'\n'}Education
</Text>
<Text
style={{ color: '#fff', fontSize: 20, fontFamily: 'Poppins-Medium' }}>
Free{'\n'}
</Text>
<View
style={{
backgroundColor: '#5D6CFA',
width: 169,
height: 117,
borderRadius: 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
{/* <Text style={{color:"#000",fontFamily:'Poppins-Bold',fontSize:25}}>Let's start</Text> */}
</View>
</View>
);
}
const styles = StyleSheet.create({
animationContainer: {
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
});

Answer 2

Maybe pass your setAppIsReady(true); after the finally and then remove it like this
React.useEffect(() => {
async function prepare() {
try {
// Pre-load fonts, make any API calls you need to do here
AsyncStorage.setItem("alreadyAppLaunched", "true")
await LoadFonts()
await checkOsDarkMode()
await stores.AuthStore.getAllData()
} catch (e) {
console.warn(e);
}
setReady(true);
}
prepare()
}, [])