React-native splash screen example using react-navigation

In this article, we learn about custom React-native splash screen example using react-navigation, to do this follow the steps to install libraries, In this we simply start the app with a splash screen then redirect to the home screen using react-navigation, so let’s start

1.Install react-navigation

Install react-navigation using the following command, also you can learn more about react-navigation latest v5.0 from this post

npm install react-navigation

2. Install navigation transition

Run the following command to install navigation transition

npm install react-navigation-slide-from-right-transition

3. Add the following imports

import { createStackNavigator,createAppContainer } from 'react-navigation';
import NavigationDrawerButton from './components/NavigationDrawerButton';
import SplashScreen from './components/SplashScreen';

In the above imports, NavigationDrawerButton from the components folder is my previous project with DrawerNavigation in which I want to add a splash screen, for that I had created one SplashScreen.js which is following

4. SplashScreen.js

This is the source code splashScreen.js. as you can see below I have added setTimeout with  2000 milisecound in componentDidMount method which calls at the begining to screen. also you can add if else condition to manage session to decide which screen will opens after splash screen.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Alert, ImageBackground,Image,AsyncStorage,ActivityIndicator} from 'react-native';
import { StackNavigator } from 'react-navigation';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {


componentDidMount () {
    setTimeout(() => {
    //  this._retrieveData();
     this.props.navigation.replace("navigationDrawerButton");
    
    }, 2000)
  }

//This method is used for session management after login you can set isLoggedIn= "true" in AsyncStorage
 /* _retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('isLoggedIn');
        const email = await AsyncStorage.getItem('email');

    if (value !== null) {
      // We have data!!
      console.log(value);
      if(value == "true"){
         this.props.navigation.navigate("home",{email : email});
       }else{
         this.props.navigation.navigate("register");
       }
    }else{
      this.props.navigation.navigate("register");
    }
   } catch (error) {
     // Error retrieving data
   }
}

*/

  render() {
    return (
      <View style={styles.container}>
       <ImageBackground
  source={require('../image/ic_splash.jpg')}
      imageStyle={{resizeMode: 'stretch'}}
  style={{width: '100%', height: '100%'}}>


      <View  style={{ flex: 1, justifyContent: 'center',
    alignItems: 'center', }} >


     <Text style={{ height: 50,color:"#1562b0", fontSize: 20, fontWeight: 'bold',}}>Add Logo here</Text>
      <ActivityIndicator size="large" color="#1562b0" />

          </View>


      </ImageBackground>

      </View>
    );
  }
}

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,
  },
   headerStyle: {
    width: 150,
    height: 150,
  },
});

5. App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, AppRegistry,Image} from 'react-native';
import { createStackNavigator,createAppContainer } from 'react-navigation';
import NavigationDrawerButton from './components/NavigationDrawerButton';
import SplashScreen from './components/SplashScreen';
import Home from './components/Home';

import getSlideFromRightTransition from 'react-navigation-slide-from-right-transition';



const Navigation = createStackNavigator({

splashscreen :{
  screen: SplashScreen,    //This will render SplashScreen at 1st time
   navigationOptions: {
        header: null,
      }
},
navigationDrawerButton :{
  screen: NavigationDrawerButton,    // This is my home page project with drawer nagivation
   navigationOptions: {
        header: null,
      }
}

},{
     transitionConfig: getSlideFromRightTransition     //This use for navigation transition

  },
)
export default createAppContainer(Navigation);

6. Home screen

For home screen please check my previous project, I added this splash screen in this project, simply define screens inside App.js and call them using createAppContainer as you see in the above App.js

Thank you 🙂