title: TypeError: Cannot read property 'navigate' of undefined - React native
body: <p>I'm using Firebase with react-native to authenticate users. My main file is App.js and I'm sending the users to Login component and I have two components to manage routes. Appnavigator.js for creating a switchNavigator and DrawerNavigator.js for createDrawernavigator. After authentication, I want to send the user to one inner component (Admin). </p>
  
  <p>Following are the codes for particular pages,</p>
  
  <p>Login.js</p>
  
  <pre><code>export default class Login extends React.Component {
  
    state = {
      email:"",
      password: "",
      errorMessage: null
    }
  
    handleLogin = () =&gt; {
        const { email , password } = this.state;
        firebase.auth()
            .signInWithEmailAndPassword(email, password)
            .then(() =&gt; this.props.navigation.navigate('Admin'))
            .catch(error =&gt; alert(error))
      } 
    render(){
  .........................
  
  
  &lt;TouchableOpacity style={styles.loginBtn}  onPress = {
            this.handleLogin
          }&gt;
  </code></pre>
  
  <p>And I have two components to manage login activities. 
  DrawerNavigator.js</p>
  
  <pre><code>import Admin from '../screens/Admin.js';
  import Login from '../screens/Login.js'
  
  import menu from '../assets/drawer.png';
  
  const DrawerNavigator = createDrawerNavigator({
  
      Admin: Admin,
  },
  {
      drawerOpenRoute: 'openDrawer',
      drawerCloseRoute: 'DrawerClose',
      drawerToggleRoute: 'DrawerToggle'
  },
  );
  
  export default DrawerNavigator;
  
  </code></pre>
  
  <p>And I have AppNavigator page to create an AppContainer and switchnavigator.</p>
  
  <pre><code>import React from 'react';
  import { createAppContainer, createSwitchNavigator } from 'react-navigation';
  
  import DrawerNavigator from './DrawerNavigator.js';
  import Login from '../screens/Login.js';
  import App from '../App.js';
  
  
  export default createAppContainer(
      createSwitchNavigator({
          Main:DrawerNavigator,
      })
  );
  </code></pre>
  
  <p>I have used this.props.navigation.navigate('Admin') In the handleLogin function to route the user after a successful login. But I'm getting an error </p>
  
  <pre><code>TypeError: Cannot read property 'navigate' of undefined
  </code></pre>
  
  <p>App.js file</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Platform, Text, View, Image, TextInput, TouchableOpacity } from 'react-native';import AppNavigator from './navigation/AppNavigator.js';
  import Login from './screens/Login.js';
  import AppNavigator from '../navigation/AppNavigator.js;
  export default class App extends React.Component {
  
    render(){
    return (
  
      &lt;Login /&gt;
  &lt;AppNavigator /&gt;
    );
  }}
  </code></pre>