title: how to navigate to homescreen onPress of login button in react native?
body: <p><strong>onPress</strong> of login button, I want to navigate to some other screen basically a home screen with authentication taking username and password. I am using a  <code>stack navigator</code> but when I click on login button it just hits the API and nothing happens.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>
  
    import React, { Component } from 'react';
     import {
       StyleSheet,
       Platform,
       Text,
       Image,
       View,TouchableOpacity,ImageBackground,ScrollView,AsyncStorage
     } from 'react-native';
  
     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',
     });
  
     import { TabNavigator, StackNavigator } from 'react-navigation';
     import Icon from 'react-native-vector-icons/Ionicons';
     import EvilIcons from 'react-native-vector-icons/EvilIcons';
     import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
     import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right, Item, Input } from 'native-base';
  
  </code></pre>
  
  <p>The access token:</p>
  
  <pre><code>    const ACCESS_TOKEN = 'access_token';
      export default class Landing extends Component {
          static navigationOptions = { 
              header: false
              };
         constructor(props) {
            super(props);
            this.state = {
              username: "",
              password: "",
              error: "",
            };  
          }
  
        async storeToken(accessToken){
          try{
              await AsyncStorage.setItem(ACCESS_TOKEN, access_token)
              this.getToken();
          } catch (error) {
            console.log("Something went wrong")
          }
        }
  
        async getToken(accessToken){
          try{
              let token = await AsyncStorage.getItem(ACCESS_TOKEN)
             console.log("token is: " + token)
          } catch (error) {
            console.log("Something went wrong")
          }
        }
  
        async removeToken(){
          try{
            await AsyncStorage.getItem(ACCESS_TOKEN)
             console.log("token is: " + token)
             this.getToken();
          } catch (error) {
            console.log("Something went wrong")
          }
        }
  
  </code></pre>
  
  <p>Data fetching:</p>
  
  <pre><code>      async onLoginPressed() {
          this.setState({showProgress: true})
          try {      
            let response = await fetch('https://fb3b2e18.ngrok.io/login', {
                        method: 'POST',
                        headers: {
                          'Accept': 'application/json',
                          'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            username: this.state.username,
                            password: this.state.password,
                        })
                      });
            let res = await response.text();
            if (response.status &gt;= 200 &amp;&amp; response.status &lt; 300) {
                //Handle success
                this.setState({error: ""});
                let accessToken = res;
                this.storeToken(accessToken);
                console.log( "res token: " +  accessToken);
                //On success we will store the access_token in the AsyncStorage
                this.storeToken(accessToken);
            } else {
                //Handle error
                let error = res;
                throw error;
            }
          } catch(error) {
              this.removeToken();
              this.setState({error: error});
              console.log("error " + error);
          }
        }
  </code></pre>
  
  <blockquote>
    <p>The render method</p>
  </blockquote>
  
  <pre><code>
          render() {
            const {goBack} = this.props.navigation;
            var {navigate} = this.props.navigation;
              return (
                  &lt;ImageBackground source={require('./landing.png')} style={styles.backgroundImage}&gt;              
                    &lt;ScrollView automaticallyAdjustContentInsets={false} style={styles.scrollView}&gt;   
                       &lt;Text style={styles.welcome}&gt;
                          Welcome to Flipclip
                        &lt;/Text&gt;                                     
                        &lt;View style={{alignItems: 'center', flex: 1,marginBottom: 60}}&gt;                      
                          &lt;Item style={{width: 310,marginBottom: 10}}&gt;
                            &lt;EvilIcons style={{color:'#fefefe'}} name='user' size={20} /&gt;
                            &lt;Input 
                              style={{color: '#f5f5f5',fontSize: 14,fontFamily: 'Montserrat-Regular',}} 
                              placeholder='User Name'
                              placeholderTextColor= '#f5f5f5' 
                              onChangeText={ (text)=&gt; this.setState({username: text}) }
                            /&gt;
                          &lt;/Item&gt;                     
                          &lt;Item style={{width: 310}}&gt;
                            &lt;Icon style={{color:'#fefefe'}} name='ios-lock-outline' size={20}/&gt;
                            &lt;Input 
                              style={{color: '#f5f5f5',fontSize: 14, marginLeft: 5,fontFamily: 'Montserrat-Regular',}} 
                              placeholder='Password'
                              placeholderTextColor= '#f5f5f5' 
                              onChangeText={ (text)=&gt; this.setState({password: text}) }
                            /&gt;
                          &lt;/Item&gt;
                        &lt;/View&gt;
                        &lt;View style={{alignSelf: 'center', flex: 1}}&gt;
                          &lt;Button block transparent style={styles.LoginButton} onPress = {this.onLoginPressed.bind(this)}  &gt;
                            &lt;Text style={styles.logintext}&gt;Sign In&lt;/Text&gt;
                          &lt;/Button&gt;
                        &lt;/View&gt;                  
                        &lt;View style={{justifyContent: 'center'}}&gt;
                          &lt;Text style={styles.SignUpResendOtpText}&gt;
                            Don’t have an account?&amp;nbsp;
                            &lt;Text style={styles.SignUpResendOtpLink} onPress = { () =&gt; navigate ("SignUp", {}) }&gt;
                              Sign Up
                            &lt;/Text&gt;
                          &lt;/Text&gt;
                        &lt;/View&gt;
  
                        &lt;Text style={styles.error}&gt;
                          {this.state.error}
                        &lt;/Text&gt;
                    &lt;/ScrollView&gt;
                  &lt;/ImageBackground&gt;
              )
          }
      }
  </code></pre>
  
  <p>The styling:</p>
  
  <pre><code>
      const styles = StyleSheet.create({
          scrollView:{
            backgroundColor: 'rgba(0,0,0,0.7)', 
            flex:1,
          },
          backgroundImage: {
              flex: 1,
              width: null,
              height: null,
          },
  
          text: {
              color: 'white',
              fontSize: 32,
          },
  
        uploaderName:{
          fontSize: 16,
          color: '#fefefe'
        },
        welcome: {
          fontSize: 28,
          color: '#f5f5f5',
          textAlign: 'center',
          marginTop: 201,
          marginBottom: 135,
          fontFamily: 'FredokaOne-Regular'
        },
        instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
        },
        LoginButton: {
          borderRadius:100,
          backgroundColor: '#ff0046',
          width: 310, 
          marginBottom: 20,
        },
        logintext:{
          color: '#f5f5f5', 
          fontSize: 14,
          fontFamily: 'Montserrat-Medium',
        },
        error: {
          color: 'red',
          paddingTop: 10
        },
        SignUpResendOtpText: {
            color: '#f5f5f5',
            textAlign: 'center',
            fontSize: 14,
            fontFamily: 'Montserrat-Regular',
        },
        SignUpResendOtpLink:{
            color: '#ff0046',
            textAlign: 'center',
            fontSize: 14,
            fontFamily: 'Montserrat-Medium',
            textDecorationLine: 'none',
            textDecorationStyle: 'solid',
            textDecorationColor: '#000'
        },
        success: {
          color: 'green',
          paddingTop: 10
        },
      });
  
  
  </code></pre>