title: How to navigate from splash screen to login screen in react native?
body: <p>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.<br>
  Below are the code snippets,</p>
  
  <p><strong>Splash screen' app.js file -</strong><br></p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { Platform, StyleSheet, View, Text, Image, TouchableOpacity, Alert } from 'react-native';
  
  export default class Myapp extends Component&lt;{}&gt;
  {
  
    constructor(){
  
      super();
  
      this.state={
  
        isVisible : true,
  
      }
  
    }
  
    Hide_Splash_Screen=()=&gt;{
  
      this.setState({ 
        isVisible : false 
  
      });
  
    }
  
    componentDidMount(){
  
      var that = this;
  
      setTimeout(function(){
  
        that.Hide_Splash_Screen();
  
      }, 5000);
  
  
  
    }
  
      render()
      {
          let Splash_Screen = (
  
              &lt;View style={styles.SplashScreen_RootView}&gt;
  
                  &lt;View style={styles.SplashScreen_ChildView}&gt;
  
                      {/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}
  
                      &lt;Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/welcome.png'}}
                      style={{width:'100%', height: '100%', resizeMode: 'contain'}} /&gt;
  
                  &lt;/View&gt;
  
  
                  &lt;TouchableOpacity 
                    activeOpacity = { 0.5 }
                    style={styles.TouchableOpacity_Style}
                    onPress={this.Hide_Splash_Screen} &gt;
  
                      &lt;Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
                      style={{width:25, height: 25}} /&gt;
  
                  &lt;/TouchableOpacity&gt;
  
  
              &lt;/View&gt; )
  
          return(
  
              &lt;View style = { styles.MainContainer }&gt;
  
                  &lt;Text style={{textAlign: 'center'}}&gt; Hello Guys &lt;/Text&gt;
  
                  {
                    (this.state.isVisible === true) ? Splash_Screen : null
                  }
  
  
              &lt;/View&gt;
  
          );
      }
  }
  
  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'
  
      }
  });
  </code></pre>
  
  <p><strong>login.js snippet -</strong> <br></p>
  
  <pre><code>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 = () =&gt;{
  
   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) =&gt; response.json())
        .then((responseJson) =&gt; {
  
          // 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) =&gt; {
          console.error(error);
        });
  
  
    }
  
    render() {
      return (
  
  &lt;View style={styles.MainContainer}&gt;
  
          &lt;Text style= {styles.TextComponentStyle}&gt;User Login Form&lt;/Text&gt;
  
          &lt;TextInput
  
            // Adding hint in Text Input using Place holder.
            placeholder="Enter User Email"
  
            onChangeText={UserEmail =&gt; this.setState({UserEmail})}
  
            // Making the Under line Transparent.
            underlineColorAndroid='transparent'
  
            style={styles.TextInputStyleClass}
          /&gt;
  
          &lt;TextInput
  
            // Adding hint in Text Input using Place holder.
            placeholder="Enter User Password"
  
            onChangeText={UserPassword =&gt; this.setState({UserPassword})}
  
            // Making the Under line Transparent.
            underlineColorAndroid='transparent'
  
            style={styles.TextInputStyleClass}
  
            secureTextEntry={true}
          /&gt;
  
          &lt;Button title="Click Here To Login" onPress={this.UserLoginFunction} color="#2196F3" /&gt;
  
  
  
  &lt;/View&gt;
  
      );
    }
  }
  
  // Creating Profile activity.
  class ProfileActivity extends Component
  {
  
    // Setting up profile activity title.
     static navigationOptions =
     {
        title: 'ProfileActivity',
  
     };
  
  
     render()
     {
  
       const {goBack} = this.props.navigation;
  
        return(
           &lt;View style = { styles.MainContainer }&gt;
  
              &lt;Text style = {styles.TextComponentStyle}&gt; { this.props.navigation.state.params.Email } &lt;/Text&gt;
  
              &lt;Button title="Click here to Logout" onPress={ () =&gt; goBack(null) } /&gt;
  
           &lt;/View&gt;
        );
     }
  }
  
  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
   }
  });
  </code></pre>
  
  <p>Now How can I use the login.js folder in main file or vice versa?</p>