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.