title: How to navigate from one screen to another scree in react native>?
body: <p><strong>Explanation:</strong> I have working with react native in android.I started with the login screen and pass the parameter to another screen using API success call.i used a StackNavigation to navigate the screen. After successful login it will move to another screen with parameter.</p>
  
  <p><strong>Issue:</strong>  API call is success but the navigation screen is not changed. fire an error like undefined is not a function (evaluating '_this.props.navigator('SecondScreen')')</p>
  
  <p>I have post my all code over here.</p>
  
  <p><strong>index.android.js</strong>
  // This is the entry point of an application. It will cal the first App.js.</p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React,{Component} from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from 'react-native';
  
  import App from './src/components/App';
  import SecondScreen from './src/components/SecondScreen';
  import {StackNavigator} from 'react-navigation';
  
  export default class reactNavigationSample extends Component{
    render(){
        const {navigation} =this.props;
      return(
            &lt;App navigation ={navigation}/&gt;
      );
    }
  }
  const SampleApp = StackNavigator({
      Home:{screen:App},
      SecondScreen:{screen: SecondScreen}
  });
  AppRegistry.registerComponent('AwesomeProject', () =&gt; SampleApp);
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <p>// This file have a UI which is two TextInput and Button. When i click on button it will call the login method and the login method will call the API with the possible credentials of the login API. After successfull login it should move to another screen.</p>
  
  <pre><code>export default class App extends Component{
      static navigationOptions ={
          title : 'Home Screen',
      }
      constructor(props){
          super(props);
          navigate = props.navigation,
          this.state={email:'',password:'',device_token:'',device_type:''};
  
      }
      login = () =&gt; {
          fetch('http://span.mobiosolutions.com/api/v1/login',{
              method:'POST',
              headers:{
                  'Accept':'application/json',
                  'Content-Type':'application/json',
              },
              body:JSON.stringify({
                  email: this.state.username,
                  password: this.state.password,
                  device_token: 'aajdflkajdjfajdflkj',
                  device_type: '1'
              })
          })
          .then((response) =&gt; response.json())
              .then((res) =&gt; {
                  if(res.statusCode === 1){
                      console.log(res);
                      var username=res.message;
                      AsyncStorage.setItem('username',username);
                      this.props.navigator('SecondScreen')
                  }else{
                      alert(res.message);
                  }
              })
              .done();
      }
      render(){
          const {navigate} = this.props.navigation;
          return(
              &lt;View style={styles.container}&gt;
  
                  &lt;Image source={require('../img/background.jpg')} style={styles.backgroundImage}&gt;
                      &lt;View style={styles.content}&gt;
                          &lt;Text style={styles.logo}&gt;- NATIVE -&lt;/Text&gt;
  
                          &lt;View style={styles.inputContainer}&gt;
  
                              &lt;TextInput underlineColorAndroid='transparent' style={styles.input}
                                         onChangeText={(username) =&gt; this.setState({username})}
                                         value={this.state.username}
                                         placeholder='username' /&gt;
  
                              &lt;TextInput secureTextEntry={true} underlineColorAndroid='transparent' style={styles.input}
                                         onChangeText={(password) =&gt; this.setState({password})}
                                         value={this.state.password} placeholder='password'/&gt;
                              {/*&lt;Button*/}
                              {/*onPress={() =&gt; navigate('SecondScreen')}*/}
                              {/*title="Login"/&gt;*/}
  
                              &lt;Button
                                  onPress={this.login}
                                  title="Login"/&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/Image&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const styles=StyleSheet.create({
      container:{
          flex:1,
          justifyContent:'center',
          alignItems:'center',
          backgroundColor:'#F5FCFF',
      },
      backgroundImage:{
          flex:1,
          alignSelf:'stretch',
          width:null,
          justifyContent:'center',
      },
      welcome:{
          fontSize:20,
          textAlign:'center',
          margin:10,
      },
      instructions:{
          textAlign:'center',
          color:'#333333',
          marginBottom:5,
      },
      content:{
          alignItems:'center',
      },
      logo:{
          color:'white',
          fontSize:40,
          fontStyle:'italic',
          fontWeight:'bold',
          textShadowColor:'#252525',
          textShadowOffset:{width:2,height:2},
          textShadowRadius:15,
          marginBottom:20,
      },
      inputContainer:{
          margin:20,
          marginBottom:0,
          padding:20,
          paddingBottom:10,
          alignSelf:'stretch',
          borderWidth:1,
          borderColor:'#fff',
          backgroundColor:'rgba(255,255,255,0.2)',
      },
      input:{
          fontSize:16,
          height:40,
          padding:10,
          marginBottom:10,
          backgroundColor:'rgba(255,255,255,1)',
      },
  });
  </code></pre>
  
  <p><strong>SecondScreen.js</strong></p>
  
  <pre><code>const SecondScreen = () =&gt; {
      return(
          &lt;View style={styles.container}&gt;
              &lt;Text style={styles.welcome}&gt;
                  THIS IS THE SECOND SCREEN.
              &lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  const styles=StyleSheet.create({
      container:{
          flex:1,
          justifyContent:'center',
          alignItems:'center',
          backgroundColor:'#F5FCFF',
      },
      welcome:{
          fontSize:20,
          textAlign:'center',
          margin:10,
      },
      instructions:{
          textAlign:'center',
          color:'#333333',
          marginBottom:5,
      },
  });
  
  
  SecondScreen.navigationOptions ={
      title: 'Second Screen Title'
  }
  
  export default SecondScreen
  </code></pre>
  
  <p>Please help me solved out this issue in React Native. Thank you in advance.</p>