Navigation getting undefined while navigating

Question

I am trying to navigate from one component to other. The error I am getting is on press:

undefined is not an object evaluating this.props.navigation.navigate

header.js

import React, { Component } from "react";
import { View, Text, StyleSheet, Button, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";


export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }



  render() {
    return (

        <View style={styles.container}>

        <View style = {{ flex: 1 , flexDirection :"row"}} >

        <Icon name="align-justify" size={30} color="#fff" 

        style= {{ paddingLeft : 20, paddingTop:20 , alignSelf: 'flex-start',}}

        onPress = { () => this.props.navigation.navigate('Notifications') }

        />

        <Text style={styles.Text}> {this.props.title} </Text>

        </View>

        </View>

        );
  }
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: 70,
    flexDirection: "row",
    backgroundColor: "#3498db",
    justifyContent: "center"
  },
  Text: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
    alignSelf: "center",
    paddingLeft: 20
  }
});

navigation.js

import React from 'react';
import { Platform} from "react-native";
import Icon from "react-native-vector-icons";
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';

import LoginScreen from '../components/loginScreen';
import RegisterScreen from '../components/registerScreen';
import HomeScreen from "../components/HomeScreen";
import NotificationsScreen from "../components/NotificationsScreen";

const HomeStack = DrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: { drawerLabel: "Home" }
    },

    Notifications: {
      screen: NotificationsScreen,
      navigationOptions: { drawerLabel: "Notifications" }
    }
  },
  {
    gesturesEnabled: false
  }
);



const MainNavigation = StackNavigator(
  {
    Home: {
      screen: HomeStack,
    },
    Login: {
      screen: LoginScreen,
      navigationOptions: { gesturesEnabled: false }
    },
    Register: {
      screen: RegisterScreen,
      navigationOptions: { gesturesEnabled: false }
    }
  },
  {
    transitionConfig: () => ({ screenInterpolator: () => null }),
    headerMode: "none",
    initialRouteName: "Login",
    navigationOptions: { gesturesEnabled: false }
  }
);


export default MainNavigation;

Answer 1

Only the component you have directly linked to the screen gets this.props.navigation.navigate.

the child elements inside the screen doesn't get this.props.navigation.navigate.

Let's say you are in HomeScreen. you can use this.props.navigation in here. But if you are using Header as child component in HomeScreen then you have to explicitly pass as

<Header navigation={this.props.navigation} />.

Answer 2

In which file do you call MainNavigation?

In order to get the naivagation as a prop you will need wrap you're App component in the MainNavigation Component. Something like this.

<App>
<MainNavigation/>
</App>