Question 33337 in React native Question posted in
The official React Native documentation can be found here.

How to hide splash screen in react native build using expo

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.

Tags:

2

Answers


  1. 0

    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,
  },
});
    Login or Signup to reply.
  2. 0

    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()
 }, [])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search