Show splash screen before show main screen in react native without using 3rd party library

Question

I am a beginner in react native so maybe my question seems silly to all experts.

but I am struggling with a basic feature that I want to implement that i want to start my app with a splash screen and after few seconds I want to show the login screen or main screen.

I checked some example but did not found any example with full code so don't know how to use those code snippets in my app.

I've tried to apply some code as per documentation but my code is giving an error, please have a look and help me.

Below is my code:

Index.android.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Navigator
    } from 'react-native';
    import Splash from './Splash';
    import Login from './Login';
    
    export default class DigitalReceipt extends Component {
      render() {
        return (
           {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
        );
      }
      renderScene(route, navigator) {
        var routeId = route.id;
        if (routeId === 'Splash') {
          return (
            
          );
        }
        if (routeId === 'Login') {
          return (
            
          );
        }
        return this.noRoute(navigator);
      
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    AppRegistry.registerComponent('DigitalReceipt', () => DigitalReceipt);

Splash.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Login from './Login';
    
    class Splash extends Component{
        componentWillMount() {
            var navigator = this.props.navigator;
            setTimeout(() => {
                navigate('Login')
            }, 1000);
          }
          
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                     
                         
                        Digital Receipt  
                    
                    
                        Powered by React Native  
                     
                
            );
        }
    }
    const SplashApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        },
        subtitle:{
            color: '#2ea9d3',
            fontWeight: '200',
            paddingBottom: 20
        },
        titleWrapper:{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
    
        logo:{
            width: 96,
            height: 96
        }
    });
    
    AppRegistry.registerComponent('SplashApp', () => SplashApp);

Login.js

    import React, { Component } from 'react';
    import { 
        AppRegistry,
        View,
        Text,
        StyleSheet,
        Image
    } from 'react-native';
    import { StackNavigator } from 'react-navigation';
    import Splash from './Splash';
    
    class Login extends Component{
        static navigationOptions = {
            title: 'Welcome',
          };
        render(){
            const { navigate } = this.props.navigation;
            return (
                
                    
                        Login Screen  
                     
                
            );
        }
        
    }
    const LoginApp = StackNavigator({
        Login: { screen: Login },
        Splash: { screen: Splash },
      });
    const styles = StyleSheet.create({
        wrapper: {
            backgroundColor: '#FFFFFF',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        title: {
            color: '#2ea9d3',
            fontSize: 32,
            fontWeight: 'bold'
        }
    });
    AppRegistry.registerComponent('LoginApp', () => LoginApp);

Please help me, sorry for the silly mistakes in code if you find any.

Thanks

Answer 1

You may try this example. There is no need stacknavigator in the splash screen.

constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

componentDidMount() {
    setTimeout( () => {
        this.setTimePassed();
    },1000);
}

setTimePassed() {
    this.setState({timePassed: true});
}

render() {
    if (!this.state.timePassed) {
        return <SplashScreen/>;
    } else {
        return <Login/>;
    }
}

Answer 2

You can always do it the native way:

Fisrt you need images for displaying your splashscreen on different devices:

• LDPI:
  • Portrait: 200x320px
  • Landscape: 320x200px
• MDPI:
  • Portrait: 320x480px
  • Landscape: 480x320px
• HDPI:
  • Portrait: 480x800px
  • Landscape: 800x480px
• XHDPI:
  • Portrait: 720px1280px
  • Landscape: 1280x720px
• XXHDPI:
  • Portrait: 960px1600px
  • Landscape: 1600x960px
• XXXHDPI:
  • Portrait: 1280px1920px
  • Landscape: 1920x1280px

They need to be png format, then put them on android/app/src/main/res/drawable and create a folder named with the resolution of each image. Ex: drawable/drawable-hdpi.

Then in the drawable folder you have to create a file named background_splash.xml and put something like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/screen"/>
    </item>
</selector>

After that you have to add a new style in android/app/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

</resources>

Update your AndroidManifest.xml file adding a new activity called SplashActivity and add android:theme="@style/SplashTheme". Now create a empty activity with the name MainActibity. Your AndroidManifest.xml should look something like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.exampleapp"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="23"
        android:targetSdkVersion="26" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
        <activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" 
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustResize"
            android:exported=”true”
        />
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Now we need to tell SplashActivity to go to the MainActivity, which represents our actual application. To do that you need to create a new Java class named SplashActivity.

package com.exampleapp; // change to the name of your app.

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

And now you should see a splashscreen.

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

Answer 3

The correct way to make a Splash Screen in react is to modify root routes. Firstable you need to create the image for your app. You can do this really fast by uploading your image in the site https://apetools.webprofusion.com/app/#/ where it will create a bundle file with all the images for iOs, windows & android and put them in folders for each device. You need to copy those folders to the route of each device, in case you have any folder created, replace it. Route {device}/app/src/main/res/{folder-name}

In the drawable folder in route {device}/app/src/main/res/drawable you'll have icon.png & screen.png and create a file named

splash_background.xml in this file add the next text

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <bitmap
      android:gravity="fill"
      android:src="@drawable/screen"
    />
  </item>
</selector>

In the route {device}/app/src/main/java/com/{name-of-project} add a file named SplashActivity.java

In this file SplashActivity.java add the next:

package com.prework;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}

In the route {device}/app/src/main/res/values/styles.xml change it as follow:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
    </style>

</resources>

And in the route {device}/app/src/main/res/AndroidManifest.xml change it as follow

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.prework">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@drawable/icon"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

      <activity
        android:name=".SplashActivity"
        android:label="@string/app_name"
        android:theme="@style/SplashTheme"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
      </activity>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Now rebuild your app by running in the command line react-native run-android

Answer 4

Just Follow this Simple Code.

App.js

import { createStackNavigator,createAppContainer } from "react- 
navigation";
import Splash from "./Controller/Splash";
import Login from "./Controller/Login";
import Register from "./Controller/Register";

 const Navigator = createStackNavigator ({
 main: { screen: Splash },
 LoginScreen: { screen : Login },
 });

const AppNavigator = createAppContainer(Navigator);

  export default class App extends Component {
  render() {
  return <AppNavigator />;
  }
 }

Splash.js

import React, { Component } from "react";
import {View, Text } from "react-native";

export class Splash extends Component {

 componentDidMount() {
    setTimeout(() => {
       this.load();
          }, 4000);
    }

   load = () => {
        this.props.navigation.push("LoginScreen");
    };

    render() {
        return (
     <View >
       <Text style={styles.myText}>Splash Screen</Text>
  </View>
  );
 }
}
 export default Splash;

Hope this Helps :)

Answer 5

That's how I do it:

1. Create a component for your splash screen and place it at the bottom of your App.js, something like:

   return (
      <>
         <SafeAreaView style={{ flex: 1 }}>
            <StatusBar/>
            <Navigator/>
         </SafeAreaView>
   
         <SplashScreen/>
      </>
   )
   

2. Your <SplashScreen /> can be something like:

   import React, { useEffect, useState } from 'react'
   import { Image, StatusBar, Text, Animated } from 'react-native'
   
   const SplashScreen = ({ }) => {
      const [done, setdone] = useState(false)
      const animationOpacity = React.useRef(new Animated.Value(1)).current
      const animationScale = React.useRef(new Animated.Value(1)).current
   
      if (done) return null
   
      function hideAnimation() {
           Animated.parallel([
               Animated.timing(animationOpacity, {
                  toValue: 0,
                  delay: 1000,
                  duration: 400,
                  useNativeDriver: true
              }),
              Animated.timing(animationScale, {
                  toValue: 10,
                  delay: 1000,
                  duration: 400,
                  useNativeDriver: true
              })
           ]).start(() => setdone(true))
       }
   
       hideAnimation()
   
       return (
           <Animated.View style={{
               backgroundColor: 'black',
               ...StyleSheet.absoluteFill,
               justifyContent: 'center',
               alignItems: 'center',
               opacity: animationOpacity,
           }}>
   
               <StatusBar
                   backgroundColor={COLOR.PRIMARY}
                   barStyle='light-content'
               />
   
               <Animated.View 
                   style={{
                       justifyContent: 'center',
                       alignItems: 'center',
                       opacity: animationOpacity,
                       transform: [{ scale: animationScale }]
                   }}
               >
                   <Image /> // some image or icon
                   <Text>Some text</Text>
               </Animated.View>
   
           </Animated.View>
       )
   }
   
   export default SplashScreen
   

3. Adjust the Animation params, backgroundColor, Image, Text according to your needs.

Answer 6

function App() {
  const [isloading, setisloading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setisloading(!isloading);
    }, 3000);
  }, []);

  return (
    <AuthContextProvider>
      <Provider theme={theme}>
        <NavigationContainer>
          {isloading ? <Loading /> : <Select />}
        </NavigationContainer>
      </Provider>
    </AuthContextProvider>
  );
}

do whatever you want to do in <Loading />