How to navigate from splash screen to login screen in react native?

Question

I am a newbie to react native. I'm developing a sample app where user will get splash screen on opening of the app and later he will get login screen. But I am unable to figure out the way to navigate from splash screen to login screen.
Below are the code snippets,

Splash screen' app.js file -

import React, { Component } from 'react';

import { Platform, StyleSheet, View, Text, Image, TouchableOpacity, Alert } from 'react-native';

export default class Myapp extends Component<{}>
{

  constructor(){

    super();

    this.state={

      isVisible : true,

    }

  }

  Hide_Splash_Screen=()=>{

    this.setState({ 
      isVisible : false 

    });

  }

  componentDidMount(){

    var that = this;

    setTimeout(function(){

      that.Hide_Splash_Screen();

    }, 5000);



  }

    render()
    {
        let Splash_Screen = (

            <View style={styles.SplashScreen_RootView}>

                <View style={styles.SplashScreen_ChildView}>

                    {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}

                    <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}}
                    style={{width:'100%', height: '100%', resizeMode: 'contain'}} />

                </View>


                <TouchableOpacity 
                  activeOpacity = { 0.5 }
                  style={styles.TouchableOpacity_Style}
                  onPress={this.Hide_Splash_Screen} >

                    <Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
                    style={{width:25, height: 25}} />

                </TouchableOpacity>


            </View> )

        return(

            <View style = { styles.MainContainer }>

                <Text style={{textAlign: 'center'}}> Hello Guys </Text>

                {
                  (this.state.isVisible === true) ? Splash_Screen : null
                }


            </View>

        );
    }
}

const styles = StyleSheet.create(
{
    MainContainer:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0
    },

    SplashScreen_RootView:
    {
        justifyContent: 'center',
        flex:1,
        margin: 10,
        position: 'absolute',
        width: '100%',
        height: '100%',

    },

    SplashScreen_ChildView:
    {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00BCD4',
        flex:1,
        margin: 20,
    },

    TouchableOpacity_Style:{

        width:25, 
        height: 25, 
        top:9, 
        right:9, 
        position: 'absolute'

    }
});

login.js snippet -

import React, { Component } from 'react';

import { StyleSheet, TextInput, View, Alert, Button, Text} from 'react-native';

// Importing Stack Navigator library to add multiple activities.
import { StackNavigator } from 'react-navigation';

// Creating Login Activity.
class LoginActivity extends Component {

  // Setting up Login Activity title.
  static navigationOptions =
   {
      title: 'LoginActivity',
   };

constructor(props) {

    super(props)

    this.state = {

      UserEmail: '',
      UserPassword: ''

    }

  }

UserLoginFunction = () =>{

 const { UserEmail }  = this.state ;
 const { UserPassword }  = this.state ;


fetch('https://reactnativecode.000webhostapp.com/User_Login.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({

    email: UserEmail,

    password: UserPassword

  })

}).then((response) => response.json())
      .then((responseJson) => {

        // If server response message same as Data Matched
       if(responseJson === 'Data Matched')
        {

            //Then open Profile activity and send user email to profile activity.
            this.props.navigation.navigate('Second', { Email: UserEmail });

        }
        else{

          Alert.alert(responseJson);
        }

      }).catch((error) => {
        console.error(error);
      });


  }

  render() {
    return (

<View style={styles.MainContainer}>

        <Text style= {styles.TextComponentStyle}>User Login Form</Text>

        <TextInput

          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Email"

          onChangeText={UserEmail => this.setState({UserEmail})}

          // Making the Under line Transparent.
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}
        />

        <TextInput

          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Password"

          onChangeText={UserPassword => this.setState({UserPassword})}

          // Making the Under line Transparent.
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}

          secureTextEntry={true}
        />

        <Button title="Click Here To Login" onPress={this.UserLoginFunction} color="#2196F3" />



</View>

    );
  }
}

// Creating Profile activity.
class ProfileActivity extends Component
{

  // Setting up profile activity title.
   static navigationOptions =
   {
      title: 'ProfileActivity',

   };


   render()
   {

     const {goBack} = this.props.navigation;

      return(
         <View style = { styles.MainContainer }>

            <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Email } </Text>

            <Button title="Click here to Logout" onPress={ () => goBack(null) } />

         </View>
      );
   }
}

export default MainProject = StackNavigator(
{
   First: { screen: LoginActivity },

   Second: { screen: ProfileActivity }

});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10,
},

TextInputStyleClass: {

textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
 borderColor: '#2196F3',

 // Set border Radius.
 borderRadius: 5 ,

},

 TextComponentStyle: {
   fontSize: 20,
  color: "#000",
  textAlign: 'center', 
  marginBottom: 15
 }
});

Now How can I use the login.js folder in main file or vice versa?

Solution 1

I will give you the code of a sample app.It contains just three screens just figure out from the code, How you can navigate correctly from one screen to another. The App.js contains the stack-navigator.To which all the other screens are imported.Study about stack navigator first.

https://drive.google.com/open?id=1VdqBtawsx_Z0c3b7CUDv_d8lfcSlDvZo (above is a google drive link to sample app)

• it contains three screens splashscreen,profilescreen,profiledetailscreen

• its a newest version of react-native app like after npm start you will have to start a emulator separately then click 'a' to launch the app inside the emulator.

• or read the bar code generated inside the terminal which appears after npm start from the app named Expo to launch it in the device.

Solution 2

In order to navigate a user using your app from the Splash screen to the Login screen, you need to either use the NavigatorIOS component (which only works on iOS) or use a navigation library for React Native.

Popular navigation libraries include:

• React Navigation
• React Native Navigation

An example of navigating from Splash to Login screen using my preferred react-native-navigation:

this.props.navigation.push({
   screen: 'MyApp.LoginActivity'
});

In order to use the above however, you will first have to install react-native-navigation and then register each of your screen.

The documentation for each of the above library are fairly straight forward and will most definitely help you navigate between screens.

This guide in the official docs should help you out.

Comments

[Ravi]

I guess the only thing you need to check is react-navigation

[Amal p]

@ Abhishek Thapliyal Try it now this is old code, the stacknavigator has changed i mean it has syntax updations in new react version. I have a accepted answer in this link refer it for new updation stackoverflow.com/questions/54876365/…