react-native : Cannot read property 'navigate' of undefined

Question

I create a component (MyGlobalComponent) with a ActionButton and a tabNavigator and inside it a stackNavigator. I used this component inside my app component.

I want to navigate to a screen of the TabNavigator by pressing a button on the ActionButton but I get this error :

Cannot read property 'navigate' of undefined

at this line :

goToCamera = () => { this.props.navigation.navigate("NewObs"); };

This is my code :

import React, { Component } from "react";
import { AppRegistry, Text, View, Image, Alert, Platform } from "react-native";
import { StackNavigator, TabNavigator } from "react-navigation";

import Photo from "./Photo";
import NouvelleObservation from "./NouvelleObservation";
import Optionpage from "./Optionpage";

import SettingPage from "./page/Setting";
import LoginPage from "./page/Login";

import styles from "./css/styles";



import ActionButton from "react-native-action-button";
import Icon from "react-native-vector-icons/Ionicons";
import Toolbar from "react-native-toolbar";


const MyTabView = TabNavigator({
  Photo: { screen: Photo },
  NewObs: { screen: NouvelleObservation },
  Options: {
    screen: StackNavigator({
      setting: { screen: SettingPage },
      login: { screen: LoginPage }
    })
  }
});

class MyGlobalComponent extends Component {
  constructor(props) {
    super(props);
  }

  goToCamera = () => {
    this.props.navigation.navigate("NewObs");
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <MyTabView />

        <ActionButton
          buttonColor="rgba(231,76,60,1)"
          offsetY={offsetYValue}
          offsetX={10}
        >
          <ActionButton.Item
            buttonColor="#1abc9c"
            title="Go to new obs"
            onPress={() => {
              this.goToCamera();
            }}
          >
            <Icon name="md-camera" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }
}

MyGlobalComponent.router = MyTabView.router;

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <View style={styles.maincontainer}>
          <MyGlobalComponent />
        </View>
    );
  }
}

I try to log props inside each constructor but i don't see navigation.

How to fix this please ?

Answer 1

I face the same issue. I solved it. Try this way. I add following line to the child Component.

import { withNavigation } from 'react-navigation';

and

export default withNavigation(ChildComponent_Name);

You can find more details https://reactnavigation.org/docs/en/navigation-prop.html