Version: 5.x

Access the navigation prop from any component

useNavigation is a hook which gives access to the navigation object. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.

An ordinary component that is not a screen component will not receive the navigation prop automatically. For example in this GoToButton component:

import * as React from 'react';
import { Button } from 'react-native';

function GoToButton({ navigation, screenName }) {
  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

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

Alternatively, you can use the useNavigation to provide the navigation prop automatically (through React context, if you're curious).

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

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

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

Using this approach, you can render GoToButton anywhere in your app without passing in a navigation prop explicitly and it will work as expected.