title: How to change screen in react native with react-navigation on click of a button?
body: <p>I have defined all my routes/navigations in my root component (App.js) and am trying to access one of those screens (UserScreen) from a child component(LoginScreen) on click of a button.</p>
  
  <p>Here is my App.js</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, TextInput, TouchableHighlight, Button } from 'react-native';
  import LoginComponent from './components/LoginComponent';
  import { StackNavigator } from 'react-navigation';
  
  
  class MainWelcome extends React.Component {
   render() {
     return (
      &lt;View&gt;
       &lt;Text&gt;Welcome Page&lt;/Text&gt;
      &lt;Button
        title="Login"
        onPress={() =&gt; this.props.navigation.navigate('Login')}
      /&gt;
    &lt;/View&gt;
    );
   }
  }
  
  class LoginScreen extends React.Component {
   render() {
    return (
     &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
       &lt;LoginComponent /&gt;
     &lt;/View&gt;
    );
   }
  }
  
  class UserScreen extends React.Component {
   render() {
    return (
    &lt;View&gt;
      &lt;Text&gt;Details Screen&lt;/Text&gt;
    &lt;/View&gt;
    );
   }
  }
  
   const RootStack = StackNavigator(
    {
    Register: {
     screen: RegisterScreen,
    },
    Login: {
     screen: LoginScreen,
    },
    UserPage: {
     screen: UserScreen,
    },
    Welcome: {
     screen: MainWelcome,
    },
   },
  {
    initialRouteName: 'Welcome',
   }
  );
  
  export default class App extends React.Component {
    render() {
      return (
       &lt;RootStack /&gt;
     );
    }
   }
  </code></pre>
  
  <p>This is my LoginComponent.js</p>
  
  <pre><code>  import React from 'react';
    import { StyleSheet, Text, View, TouchableHighlight, TextInput, StackNavigator } from 'react-native';
  
    class LoginComponent extends React.Component {
     constructor(){
      super();
          this.state = {
                  loginusername: '',
                  loginpassword: '',
                  isloggedin: false,
                  loggedinuser: null,
          }  
        }
  
    render() {
     return (
      &lt;View&gt;
        &lt;Text&gt;Please Log In&lt;/Text&gt;
      &lt;View&gt;
         &lt;TextInput
             placeholder="USERNAME"
             placeholderTextColor = 'black'
             onChangeText={(loginusername) =&gt; this.setState({loginusername})}
              /&gt;
        &lt;TextInput
                  placeholder="Password"
                  placeholderTextColor = 'black'
                  onChangeText={(loginpassword) =&gt; this.setState({loginpassword})}
              /&gt;
        &lt;TouchableHighlight onPress={() =&gt; {
          {this.props.navigation.navigate('UserPage')}
          }
        }&gt;
        &lt;View&gt;
        &lt;Text&gt;Login&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
      &lt;/View&gt;  
    &lt;/View&gt;
    );
   }
  }
  
  export default LoginComponent;
  </code></pre>
  
  <p>Here in LoginComponent.js, I am doing <code>{this.props.navigation.navigate('UserPage')}</code> to redirect to the userscreen on click of a button but it says <code>TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')</code>. I am not sure what I am doing wrong and if I should be passing something from the App.js to LoginComponent.js.</p>