Use useNavigation instead of navigation prop

nidelson · Feb 29, 2024 · 3aa1b36 · 3aa1b36
1 parent fcb5e31
commit 3aa1b36
Show file tree

Hide file tree

Showing 20 changed files with 220 additions and 96 deletions.
diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md
@@ -78,9 +78,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -91,7 +93,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function NotificationsScreen({ navigation }) {
+function NotificationsScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.goBack()} title="Go back home" />
@@ -203,15 +207,17 @@ export default function App() {
 ```js name="Drawer open and close" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
@@ -359,15 +365,17 @@ export default function App() {
 ```js name="Drawer toggle" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
@@ -522,15 +530,17 @@ export default function App() {
 ```js name="Navigation dispatcher" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer, DrawerActions } from '@react-navigation/native';
+import { NavigationContainer, useNavigation, DrawerActions } from '@react-navigation/native';
 import {
   createDrawerNavigator,
   DrawerContentScrollView,
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
 
-function Feed({ navigation }) {
+function Feed() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>

diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md
@@ -234,14 +234,16 @@ export default App;
 ```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
 import { Button, View, StyleSheet } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 // codeblock-focus-start
 import { BlurView } from 'expo-blur';
 
 // codeblock-focus-end
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
@@ -252,7 +254,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button title="Go back" onPress={() => navigation.goBack()} />

diff --git a/versioned_docs/version-7.x/function-after-focusing-screen.md b/versioned_docs/version-7.x/function-after-focusing-screen.md
@@ -84,11 +84,13 @@ import * as React from 'react';
 import { View } from 'react-native';
 
 // codeblock-focus-end
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 // codeblock-focus-start
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       alert('Screen is focused');

diff --git a/versioned_docs/version-7.x/group.md b/versioned_docs/version-7.x/group.md
@@ -110,11 +110,13 @@ import * as React from 'react';
 import { View, Text } from 'react-native';
 import { Button } from '@react-navigation/elements';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 
 const Stack = createNativeStackNavigator();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>

diff --git a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
@@ -137,7 +137,7 @@ export default function App() {
 ```js name="Hiding tabbar" snack version=7
 import * as React from 'react';
 import { Text, View, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -148,7 +148,9 @@ function EmptyScreen() {
   return <View />;
 }
 
-function Home({ navigation }) {
+function Home() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>

diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md
@@ -116,11 +116,13 @@ export default function App() {
 ```js name="Modal" snack version=7
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
 // codeblock-focus-start
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
@@ -132,7 +134,9 @@ function HomeScreen({ navigation }) {
   );
 }
 
-function ModalScreen({ navigation }) {
+function ModalScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is a modal!</Text>

diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md
@@ -80,9 +80,12 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
+import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -211,11 +214,13 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
+import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
 const RightDrawerContext = React.createContext();
 
-function HomeScreen({ navigation }) {
+function HomeScreen() {
+  const navigation = useNavigation();
   const { openRightDrawer } = React.useContext(RightDrawerContext);
 
   return (
@@ -340,9 +345,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -472,9 +479,11 @@ export default function App() {
 import * as React from 'react';
 import { Button, Text, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+  const navigation = useNavigation();
 
-function HomeScreen({ navigation }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button

diff --git a/versioned_docs/version-7.x/navigation-context.md b/versioned_docs/version-7.x/navigation-context.md
@@ -111,7 +111,9 @@ function SomeComponent() {
   );
 }
 
-function ProfileScreen({ navigation }) {
+function ProfileScreen() {
+  const navigation = React.useContext(NavigationContext);
+
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button onPress={() => navigation.goBack()}>Go back</Button>

diff --git a/versioned_docs/version-7.x/navigation-events.md b/versioned_docs/version-7.x/navigation-events.md
@@ -58,7 +58,9 @@ Normally, you'd add an event listener in `React.useEffect` for function componen
 <samp id="simple-focus-and-blur" />
 
 ```js
-function Profile({ navigation }) {
+function Profile() {
+  const navigation = useNavigation();
+
   React.useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
       // do something