Skip to main content
Version: 7.x

useNavigation

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

The useNavigation hook returns the navigation object of the screen where it's used:

import { useNavigation } from '@react-navigation/native';

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

return (
<Button
onPress={() => {
navigation.goBack();
}}
>
Back
</Button>
);
}
Try on Snack

See the documentation for the navigation object for more info.

Using with class component‚Äč

You can wrap your class component in a function component to use the hook:

class MyBackButton extends React.Component {
render() {
// Get it from props
const { navigation } = this.props;
}
}

// Wrap and export
export default function (props) {
const navigation = useNavigation();

return <MyBackButton {...props} navigation={navigation} />;
}