How to go from one screen to another in react native expo project?

Question

I have created an application using React native expo where I have two screens - Splash & Login. So, after the Splash screen appears for 3 seconds it goes to the Login Screen. Now, in the Login Screen I just want to perform a single task - by clicking the Sign in button I want to switch the login Screen back to the Splash Screen. Below I have provided the code of my three classes-

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import store from './src/store';
import {Provider} from 'react-redux';
import Splash from './src/Splash';
import Login from './src/Login';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state ={currentScreen:'Splash'};
    console.log('Start doing some tasks for about 3 seconds')

    setTimeout( ()=> {
      console.log('Done some tasks for about 3 second')
      this.setState({currentScreen: 'Login'})
    } , 3000)

  }

  render() {

      const {currentScreen} = this.state;

      let mainScreen = currentScreen === 'Splash' ?
      <Splash/> : <Login/>

      return mainScreen

  }
}

Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, Image, TouchableWithoutFeedback,
        StatusBar, TextInput, SafeAreaView, Keyboard, TouchableOpacity,
        KeyboardAvoidingView } from 'react-native';



 class Login extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content"/>
        <KeyboardAvoidingView
          behavior = "padding"
          style={styles.container}
        >
        
        <TouchableWithoutFeedback
          style = {styles.container}
          onPress = {Keyboard.dismiss}
        >
        
        <View style = {styles.logoContainer}>

          <View style = {styles.logoContainer}>


            <Text style={styles.title}>
              Account Information
            </Text>
          </View>

          <View style={styles.infoContainer}>

            <TextInput
              style = {styles.input}
              placeholder = "Enter User name/Email"
              placeholderTextColor = 'rgba(255,255,255,0.8)'
              keyboardType = 'email-address'
              returnKeyType = 'next'
              autoCorrect= {false}
              onSubmitEditing = {() => this.refs.txtPassword.focus()}
            />

          <TextInput
              style = {styles.input}
              placeholder = "Enter Password"
              placeholderTextColor = 'rgba(255,255,255,0.8)'
              returnKeyType = 'go'
              autoCorrect= {false}
              ref = {"textPassword"}
          />

          <TouchableOpacity style={styles.buttonContainer}>

            <Text style={styles.buttonText}>SIGN IN</Text>

          </TouchableOpacity>

          </View>

          </View>

        </TouchableWithoutFeedback>
        
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

export default Login;

Splash.js

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



 class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello Splash</Text>
      </View>
    );
  }
}

export default Splash;

Then I just installed the react navigation using the following command-

npm install --save react-navigation

And then followed the React native expo documantation- https://docs.expo.io/versions/latest/react-native/navigation/

But none of them was working according to the plan. So, I just need one easy solution to go from the Login screen to Splash screen by the Sign In button press. It would be very nice if anyone help me about this.

Answer 1

You can make use of react-navigation for navigating from Splash screen to login and back.

I have made some changes to your code.

App.js

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

const AppNavigator = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen
  },
  Login: {
    screen: Login
  }
});

export default createAppContainer(AppNavigator);

Splash.js

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

class Splash extends Component {
  constructor(props) {
    super(props);

    setTimeout(() => {
      props.navigation.navigate("Login");
    }, 3000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello Splash</Text>
      </View>
    );
  }
}

export default Splash;

Login.js

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
  StatusBar,
  TextInput,
  SafeAreaView,
  Keyboard,
  TouchableOpacity,
  KeyboardAvoidingView
} from "react-native";

class Login extends Component {
  render() {
    const { navigation } = this.props;

    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content" />
        <KeyboardAvoidingView behavior="padding" style={styles.container}>
          <TouchableWithoutFeedback
            style={styles.container}
            onPress={Keyboard.dismiss}
          >
            <View style={styles.logoContainer}>
              <View style={styles.logoContainer}>
                <Text style={styles.title}>Account Information</Text>
              </View>

              <View style={styles.infoContainer}>
                <TextInput
                  style={styles.input}
                  placeholder="Enter User name/Email"
                  placeholderTextColor="rgba(255,255,255,0.8)"
                  keyboardType="email-address"
                  returnKeyType="next"
                  autoCorrect={false}
                  onSubmitEditing={() => this.refs.txtPassword.focus()}
                />

                <TextInput
                  style={styles.input}
                  placeholder="Enter Password"
                  placeholderTextColor="rgba(255,255,255,0.8)"
                  returnKeyType="go"
                  autoCorrect={false}
                  ref={"textPassword"}
                />

                <TouchableOpacity style={styles.buttonContainer} onPress={() => navigation.navigate("SplashScreen")}>
                  <Text style={styles.buttonText}>SIGN IN</Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
      </SafeAreaView>
    );
  }
}

export default Login;

Also I would suggest reading the docs of react-navigation . The examples given there are simple.

https://reactnavigation.org/docs/en/hello-react-navigation.html

Answer 2

Change the code of App.js. you have already install react navigation. App.js :

import { StyleSheet, Text, View } from 'react-native';
import {createStackNavigator} from 'react-navigation';
import store from './src/store';
import {Provider} from 'react-redux';
import SplashScreen from './src/Splash';
import LoginScreen from './src/Login';
const App = createStackNavigator({
  Splash: { screen: SplashScreen },
  Login: { screen: LoginScreen },
});
export default App;
On Login screen sign button onPress :
this.props.navigation.goBack();