Skip to content

Commit 3aa1b36

Browse files
satya164satya164
committed
Use useNavigation instead of navigation prop
1 parent fcb5e31 commit 3aa1b36

20 files changed

Lines changed: 220 additions & 96 deletions

‎versioned_docs/version-7.x/drawer-based-navigation.md‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,11 @@ export default function App() {
7878
import * as React from 'react';
7979
import { Button, View } from 'react-native';
8080
import { createDrawerNavigator } from '@react-navigation/drawer';
81-
import { NavigationContainer } from '@react-navigation/native';
81+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
82+
83+
function HomeScreen() {
84+
const navigation = useNavigation();
8285

83-
function HomeScreen({ navigation }) {
8486
return (
8587
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
8688
<Button
@@ -91,7 +93,9 @@ function HomeScreen({ navigation }) {
9193
);
9294
}
9395

94-
function NotificationsScreen({ navigation }) {
96+
function NotificationsScreen() {
97+
const navigation = useNavigation();
98+
9599
return (
96100
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
97101
<Button onPress={() => navigation.goBack()} title="Go back home" />
@@ -203,15 +207,17 @@ export default function App() {
203207
```js name="Drawer open and close" snack version=7
204208
import * as React from 'react';
205209
import { View, Text, Button } from 'react-native';
206-
import { NavigationContainer } from '@react-navigation/native';
210+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
207211
import {
208212
createDrawerNavigator,
209213
DrawerContentScrollView,
210214
DrawerItemList,
211215
DrawerItem,
212216
} from '@react-navigation/drawer';
213217

214-
function Feed({ navigation }) {
218+
function Feed() {
219+
const navigation = useNavigation();
220+
215221
return (
216222
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
217223
<Text>Feed Screen</Text>
@@ -359,15 +365,17 @@ export default function App() {
359365
```js name="Drawer toggle" snack version=7
360366
import * as React from 'react';
361367
import { View, Text, Button } from 'react-native';
362-
import { NavigationContainer } from '@react-navigation/native';
368+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
363369
import {
364370
createDrawerNavigator,
365371
DrawerContentScrollView,
366372
DrawerItemList,
367373
DrawerItem,
368374
} from '@react-navigation/drawer';
369375

370-
function Feed({ navigation }) {
376+
function Feed() {
377+
const navigation = useNavigation();
378+
371379
return (
372380
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
373381
<Text>Feed Screen</Text>
@@ -522,15 +530,17 @@ export default function App() {
522530
```js name="Navigation dispatcher" snack version=7
523531
import * as React from 'react';
524532
import { View, Text, Button } from 'react-native';
525-
import { NavigationContainer, DrawerActions } from '@react-navigation/native';
533+
import { NavigationContainer, useNavigation, DrawerActions } from '@react-navigation/native';
526534
import {
527535
createDrawerNavigator,
528536
DrawerContentScrollView,
529537
DrawerItemList,
530538
DrawerItem,
531539
} from '@react-navigation/drawer';
532540

533-
function Feed({ navigation }) {
541+
function Feed() {
542+
const navigation = useNavigation();
543+
534544
return (
535545
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
536546
<Text>Feed Screen</Text>

‎versioned_docs/version-7.x/elements.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -234,14 +234,16 @@ export default App;
234234
```js name="Header blur" snack version=7 dependencies=expo-blur
235235
import * as React from 'react';
236236
import { Button, View, StyleSheet } from 'react-native';
237-
import { NavigationContainer } from '@react-navigation/native';
237+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
238238
import { createStackNavigator } from '@react-navigation/stack';
239239
// codeblock-focus-start
240240
import { BlurView } from 'expo-blur';
241241

242242
// codeblock-focus-end
243243

244-
function HomeScreen({ navigation }) {
244+
function HomeScreen() {
245+
const navigation = useNavigation();
246+
245247
return (
246248
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
247249
<Button
@@ -252,7 +254,9 @@ function HomeScreen({ navigation }) {
252254
);
253255
}
254256

255-
function ProfileScreen({ navigation }) {
257+
function ProfileScreen() {
258+
const navigation = useNavigation();
259+
256260
return (
257261
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
258262
<Button title="Go back" onPress={() => navigation.goBack()} />

‎versioned_docs/version-7.x/function-after-focusing-screen.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,13 @@ import * as React from 'react';
8484
import { View } from 'react-native';
8585

8686
// codeblock-focus-end
87-
import { NavigationContainer } from '@react-navigation/native';
87+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
8888
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
8989

9090
// codeblock-focus-start
91-
function ProfileScreen({ navigation }) {
91+
function ProfileScreen() {
92+
const navigation = useNavigation();
93+
9294
React.useEffect(() => {
9395
const unsubscribe = navigation.addListener('focus', () => {
9496
alert('Screen is focused');

‎versioned_docs/version-7.x/group.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,13 @@ import * as React from 'react';
110110
import { View, Text } from 'react-native';
111111
import { Button } from '@react-navigation/elements';
112112
import { createNativeStackNavigator } from '@react-navigation/native-stack';
113-
import { NavigationContainer } from '@react-navigation/native';
113+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
114114

115115
const Stack = createNativeStackNavigator();
116116

117-
function HomeScreen({ navigation }) {
117+
function HomeScreen() {
118+
const navigation = useNavigation();
119+
118120
return (
119121
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
120122
<Text>Home Screen</Text>

‎versioned_docs/version-7.x/hiding-tabbar-in-screens.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default function App() {
137137
```js name="Hiding tabbar" snack version=7
138138
import * as React from 'react';
139139
import { Text, View, Button } from 'react-native';
140-
import { NavigationContainer } from '@react-navigation/native';
140+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
141141
import { createNativeStackNavigator } from '@react-navigation/native-stack';
142142
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
143143

@@ -148,7 +148,9 @@ function EmptyScreen() {
148148
return <View />;
149149
}
150150

151-
function Home({ navigation }) {
151+
function Home() {
152+
const navigation = useNavigation();
153+
152154
return (
153155
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
154156
<Text>Home Screen</Text>

‎versioned_docs/version-7.x/modal.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,11 +116,13 @@ export default function App() {
116116
```js name="Modal" snack version=7
117117
import * as React from 'react';
118118
import { View, Text, Button } from 'react-native';
119-
import { NavigationContainer } from '@react-navigation/native';
119+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
120120
import { createStackNavigator } from '@react-navigation/stack';
121121

122122
// codeblock-focus-start
123-
function HomeScreen({ navigation }) {
123+
function HomeScreen() {
124+
const navigation = useNavigation();
125+
124126
return (
125127
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
126128
<Text style={{ fontSize: 30 }}>This is the home screen!</Text>
@@ -132,7 +134,9 @@ function HomeScreen({ navigation }) {
132134
);
133135
}
134136

135-
function ModalScreen({ navigation }) {
137+
function ModalScreen() {
138+
const navigation = useNavigation();
139+
136140
return (
137141
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
138142
<Text style={{ fontSize: 30 }}>This is a modal!</Text>

‎versioned_docs/version-7.x/multiple-drawers.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,12 @@ export default function App() {
8080
import * as React from 'react';
8181
import { Button, View } from 'react-native';
8282
import { Drawer } from 'react-native-drawer-layout';
83+
import { useNavigation } from '@react-navigation/native';
8384
import { createDrawerNavigator } from '@react-navigation/drawer';
8485

85-
function HomeScreen({ navigation }) {
86+
function HomeScreen() {
87+
const navigation = useNavigation();
88+
8689
return (
8790
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
8891
<Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -211,11 +214,13 @@ export default function App() {
211214
import * as React from 'react';
212215
import { Button, View } from 'react-native';
213216
import { Drawer } from 'react-native-drawer-layout';
217+
import { useNavigation } from '@react-navigation/native';
214218
import { createDrawerNavigator } from '@react-navigation/drawer';
215219

216220
const RightDrawerContext = React.createContext();
217221

218-
function HomeScreen({ navigation }) {
222+
function HomeScreen() {
223+
const navigation = useNavigation();
219224
const { openRightDrawer } = React.useContext(RightDrawerContext);
220225

221226
return (
@@ -340,9 +345,11 @@ export default function App() {
340345
import * as React from 'react';
341346
import { Button, View } from 'react-native';
342347
import { createDrawerNavigator } from '@react-navigation/drawer';
343-
import { NavigationContainer } from '@react-navigation/native';
348+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
349+
350+
function HomeScreen() {
351+
const navigation = useNavigation();
344352

345-
function HomeScreen({ navigation }) {
346353
return (
347354
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
348355
<Button onPress={() => navigation.openDrawer()} title="Open drawer" />
@@ -472,9 +479,11 @@ export default function App() {
472479
import * as React from 'react';
473480
import { Button, Text, View } from 'react-native';
474481
import { createDrawerNavigator } from '@react-navigation/drawer';
475-
import { NavigationContainer } from '@react-navigation/native';
482+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
483+
484+
function HomeScreen() {
485+
const navigation = useNavigation();
476486

477-
function HomeScreen({ navigation }) {
478487
return (
479488
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
480489
<Button

‎versioned_docs/version-7.x/navigation-context.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,9 @@ function SomeComponent() {
111111
);
112112
}
113113

114-
function ProfileScreen({ navigation }) {
114+
function ProfileScreen() {
115+
const navigation = React.useContext(NavigationContext);
116+
115117
return (
116118
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
117119
<Button onPress={() => navigation.goBack()}>Go back</Button>

‎versioned_docs/version-7.x/navigation-events.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ Normally, you'd add an event listener in `React.useEffect` for function componen
5858
<samp id="simple-focus-and-blur" />
5959

6060
```js
61-
function Profile({ navigation }) {
61+
function Profile() {
62+
const navigation = useNavigation();
63+
6264
React.useEffect(() => {
6365
const unsubscribe = navigation.addListener('focus', () => {
6466
// do something

0 commit comments

Comments
 (0)