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 * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
function MyBackButton() {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
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} />;
}