CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-nativesplash-screen
motionless570
motionless570

Reputation: 929

How to make splash screen show for 5 seconds and then disappear in ReactNative

I am creating a splash screen component that I want to run when the app is first launched for at least 5 seconds and then displays another component/screen.

I just started with react-native yesterday so I still don't know how to do complicated things such as this without causing errors. I managed to make it appear once the application is opened but it only shows for a split second.

here is my code:

App.js

const App = () => { 

   const [isFirstLaunch, setIsFirstLaunch] = React.useState(null);

   useEffect(() => {
      AsyncStorage.getItem('alreadyLaunched').then(value => {
          if(value == null){
            
            AsyncStorage.setItem('alreadyLaunched','true');
            setIsFirstLaunch(true);
          }else{
            setIsFirstLaunch(false);
          }
      })
   },[]);

 
  
   if (isFirstLaunch == null){
     return (
       <SplashScreen/>
     )
   }else if(isFirstLaunch == true){
    return (
      <NavigationContainer>
       
        <Drawer.Navigator initialRouteName="Dashboard">
        
         <WelcomeStack.Screen name="Welcome" component={WelcomeScreen}/>
         <WelcomeStack.Screen name="Login" component={LoginScreen}/>
         </Drawer.Navigator>
      
     </NavigationContainer>
           
         )
   }else{
    return (
      <NavigationContainer>
       
        <Drawer.Navigator initialRouteName="Dashboard">
           <Drawer.Screen name="Dashboard" component={LandingScreen} options={{ swipeEnabled:false

           }} />
         
         </Drawer.Navigator>
      
     </NavigationContainer>
           
         )
   }
    
 };
export default App;

SplashScreen.js

const SplashScreen = () => {

    return (
        
      <View style={styles.container}>
          <View style={styles.header}>
            <Image source ={require('../assets/Dilmune-logo1.png')}
            style={styles.logo}
            resizeMode="stretch"
            />
          </View>
      </View>
    );
  };

export default SplashScreen;

Upvotes: 1

Views: 4451

Answers (2)

Csaba Balogh
Csaba Balogh

Reputation: 26

Try something along this line

    const [showSplash, setShowSplash] = useState(true);
     useEffect(() => {
      AsyncStorage.getItem('alreadyLaunched').then(value => {
          if(value == null){
             setTimeout(() => {
          setShowSplash(false)
        },5000)
            AsyncStorage.setItem('alreadyLaunched','true');
            setIsFirstLaunch(true);
          }else{
            setIsFirstLaunch(false);
          }
      })
   },[]);
    
  

    if (isFirstLaunch == null && showSplash){
         return (
           <SplashScreen/>
         )
       } add

Upvotes: 0

Noriller
Noriller

Reputation: 370

you probably will need something like this on your App component:

useEffect(()=>{
const timeout = useTimeout(()=> setShowSplash(false),5000)
return () => clearTimeout(timeout)
}, [])

then, you render the splash or the app accordingly.

Upvotes: 0

Related Questions