React Navigation - Cannot Read Property 'navigate' Of Undefined

I've been trying to get up and running with react navigation but I run into a problem when I try to move navigation items into their own components. HomeScreen.js import React, { C

Solution 1:

If you rename navigate={this.props.navigator} to navigator={this.props.navigation}, it should work because in NavButton you are calling this.props.navigator.navigate.

Solution 2:

An ordinary component that is not a screen component will not receive the navigation prop by default.

To resolve this exception, you could pass the navigation prop in to NavButton when you render it from a screen, like so: <NavButton navigation={this.props.navigation} />

Alternatively, we can use the withNavigation function to provide the navigation prop automatically

import { withNavigation } from 'react-navigation';

class NavButton extends React.Component {
  render() {
    return (
      <Button
        title="Back"
        onPress={() => {
          this.props.navigation.goBack();
        }}
      />
    );
  }
}

// withNavigation returns a component that wraps NavButton and passes in the
// navigation prop
export default withNavigation(NavButton);

refer: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Solution 3:

Make sure you are compiling ES6

if not simply use this.props.navigation or this.props.navigation.navigate whatever you need

Solution 4:

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton() {
  const navigation = useNavigation();

  return (
    <Button
      title='Screen Name'
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

You can use useNavigation from @react-navigation/native with React Navigation v 5.x. More details in the documentation.