From 5214da30ed2b6cf454e953940f2b0704dc2da67a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Thu, 29 Feb 2024 10:53:01 +0100 Subject: [PATCH 1/3] Add static examples --- .../version-7.x/navigation-actions.md | 1429 ++++++++++++++++- 1 file changed, 1380 insertions(+), 49 deletions(-) diff --git a/versioned_docs/version-7.x/navigation-actions.md b/versioned_docs/version-7.x/navigation-actions.md index 2e60168b3f6..072f0fc2c57 100755 --- a/versioned_docs/version-7.x/navigation-actions.md +++ b/versioned_docs/version-7.x/navigation-actions.md @@ -4,6 +4,9 @@ title: CommonActions reference sidebar_label: CommonActions --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + A navigation action is an object containing at least a `type` property. Internally, the action can be handled by [routers](custom-routers.md) with the `getStateForAction` method to return a new state from an existing [navigation state](navigation-state.md). Each navigation actions can contain at least the following properties: @@ -26,21 +29,238 @@ The `navigate` action allows to navigate to a specific route. It takes the follo - `name` - _string_ - A destination name of the screen in the current or a parent navigator. - `params` - _object_ - Params to use for the destination route. - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions navigate" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} + +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, +}); + +const Navigation = createStaticNavigation(Stack); + +export default function App() { + return ; +} +``` + + + -navigation.dispatch( - CommonActions.navigate({ - name: 'Profile', - params: { - user: 'jane', - }, - }) -); +```js name="Common actions navigate" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); + +export default function App() { + return ( + + + + + + + ); +} ``` + + + In a stack navigator ([stack](stack-navigator.md) or [native stack](native-stack-navigator.md)), calling `navigate` with a screen name will have the following behavior: - If you're already on a screen with the same name, it will update its params and not push a new screen. @@ -60,25 +280,238 @@ The `reset` action allows to reset the [navigation state](navigation-state.md) t - `state` - _object_ - The new [navigation state](navigation-state.md) object to use. - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions reset" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} + +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, +}); -navigation.dispatch( - CommonActions.reset({ - index: 1, - routes: [ - { name: 'Home' }, - { - name: 'Profile', - params: { user: 'jane' }, - }, - ], - }) -); +const Navigation = createStaticNavigation(Stack); + +export default function App() { + return ; +} +``` + + + + +```js name="Common actions reset" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); + +export default function App() { + return ( + + + + + + + ); +} ``` + + + The state object specified in `reset` replaces the existing [navigation state](navigation-state.md) with the new one. This means that if you provide new route objects without a key, or route objects with a different key, it'll remove the existing screens for those routes and add new screens. If you want to preserve the existing screens but only want to modify the state, you can pass a function to `dispatch` where you can get the existing state. Then you can change it as you like (make sure not to mutate the existing state, but create new state object for your changes). and return a `reset` action with the desired state: @@ -86,9 +519,9 @@ If you want to preserve the existing screens but only want to modify the state, ```js import { CommonActions } from '@react-navigation/native'; -navigation.dispatch(state => { +navigation.dispatch((state) => { // Remove all the screens after `Profile` - const index = state.routes.findIndex(r => r.name === 'Profile'); + const index = state.routes.findIndex((r) => r.name === 'Profile'); const routes = state.routes.slice(0, index + 1); return CommonActions.reset({ @@ -118,28 +551,480 @@ So if you have such a use case, consider a different approach - e.g. updating th The `goBack` action creator allows to go back to the previous route in history. It doesn't take any arguments. - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} + +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, +}); + +const Navigation = createStaticNavigation(Stack); + +export default function App() { + return ; +} +``` + + + + +```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); -navigation.dispatch(CommonActions.goBack()); +export default function App() { + return ( + + + + + + + ); +} ``` + + + If you want to go back from a particular route, you can add a `source` property referring to the route key and a `target` property referring to the `key` of the navigator which contains the route: - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} + +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} -navigation.dispatch({ - ...CommonActions.goBack(), - source: route.key, - target: state.key, +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, }); + +const Navigation = createStaticNavigation(Stack); + +export default function App() { + return ; +} +``` + + + + +```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); + +export default function App() { + return ( + + + + + + + ); +} ``` + + + By default, the key of the route which dispatched the action is passed as the `source` property and the `target` property is `undefined`. ### setParams @@ -148,25 +1033,471 @@ The `setParams` action allows to update params for a certain route. It takes the - `params` - _object_ - required - New params to be merged into existing route params. - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} + +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, +}); + +const Navigation = createStaticNavigation(Stack); -navigation.dispatch(CommonActions.setParams({ user: 'Wojtek' })); +export default function App() { + return ; +} ``` + + + +```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); + +export default function App() { + return ( + + + + + + + ); +} +``` + + + + If you want to set params for a particular route, you can add a `source` property referring to the route key: - + + -```js -import { CommonActions } from '@react-navigation/native'; +```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { + createStaticNavigation, + useNavigation, + CommonActions, +} from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen() { + const navigation = useNavigation(); + + return ( + + Home! + + + + ); +} -navigation.dispatch({ - ...CommonActions.setParams({ user: 'Wojtek' }), - source: route.key, +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator({ + screens: { + Home: HomeScreen, + Profile: ProfileScreen, + }, }); + +const Navigation = createStaticNavigation(Stack); + +export default function App() { + return ; +} ``` + + + +```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { createStackNavigator } from '@react-navigation/stack'; + +function HomeScreen({ navigation }) { + return ( + + Home! + + + + ); +} + +function ProfileScreen({ navigation, route }) { + return ( + + Profile! + {route.params.user}'s profile + + + + + + ); +} + +const Stack = createStackNavigator(); + +export default function App() { + return ( + + + + + + + ); +} +``` + + + + If the `source` property is explicitly set to `undefined`, it'll set the params for the focused route. From 71d3e8db76ea7e6323a62ed71ca1b6c87d437068 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Thu, 29 Feb 2024 14:14:45 +0100 Subject: [PATCH 2/3] Remvoe dependencies, default and use useNavigation instead of prop --- .../version-7.x/navigation-actions.md | 114 ++++++++++++------ 1 file changed, 79 insertions(+), 35 deletions(-) diff --git a/versioned_docs/version-7.x/navigation-actions.md b/versioned_docs/version-7.x/navigation-actions.md index 072f0fc2c57..16aa26b6aa6 100755 --- a/versioned_docs/version-7.x/navigation-actions.md +++ b/versioned_docs/version-7.x/navigation-actions.md @@ -32,7 +32,7 @@ The `navigate` action allows to navigate to a specific route. It takes the follo -```js name="Common actions navigate" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions navigate" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -148,16 +148,22 @@ export default function App() { ``` - + -```js name="Common actions navigate" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions navigate" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -185,7 +191,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! @@ -283,7 +291,7 @@ The `reset` action allows to reset the [navigation state](navigation-state.md) t -```js name="Common actions reset" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions reset" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -399,16 +407,22 @@ export default function App() { ``` - + -```js name="Common actions reset" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions reset" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -433,7 +447,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! @@ -554,7 +570,7 @@ The `goBack` action creator allows to go back to the previous route in history. -```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions goBack" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -674,16 +690,22 @@ export default function App() { ``` - + -```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions goBack" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -715,7 +737,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! @@ -796,7 +820,7 @@ If you want to go back from a particular route, you can add a `source` property -```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions goBack" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -914,14 +938,20 @@ export default function App() { -```js name="Common actions goBack" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions goBack" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -946,7 +976,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! @@ -1036,7 +1068,7 @@ The `setParams` action allows to update params for a certain route. It takes the -```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -1152,16 +1184,18 @@ export default function App() { ``` - + -```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { NavigationContainer, CommonActions, useNavigation } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -1186,7 +1220,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! @@ -1271,7 +1307,7 @@ If you want to set params for a particular route, you can add a `source` propert -```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -1387,16 +1423,22 @@ export default function App() { ``` - + -```js name="Common actions setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Common actions setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions } from '@react-navigation/native'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); + return ( Home! @@ -1421,7 +1463,9 @@ function HomeScreen({ navigation }) { ); } -function ProfileScreen({ navigation, route }) { +function ProfileScreen({ route }) { + const navigation = useNavigation(); + return ( Profile! From 87b2ac44ea9401dea17c08e7663f15aaf5c17b72 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 5 Mar 2024 12:40:41 +0100 Subject: [PATCH 3/3] Formatting --- .../version-7.x/navigation-actions.md | 591 +++++++++--------- 1 file changed, 279 insertions(+), 312 deletions(-) diff --git a/versioned_docs/version-7.x/navigation-actions.md b/versioned_docs/version-7.x/navigation-actions.md index 16aa26b6aa6..bafc95142f7 100755 --- a/versioned_docs/version-7.x/navigation-actions.md +++ b/versioned_docs/version-7.x/navigation-actions.md @@ -34,8 +34,8 @@ The `navigate` action allows to navigate to a specific route. It takes the follo ```js name="Common actions navigate" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -50,19 +50,18 @@ function HomeScreen() { Home! @@ -80,18 +79,18 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -161,26 +160,23 @@ import { } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -191,26 +187,24 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile @@ -293,8 +287,8 @@ The `reset` action allows to reset the [navigation state](navigation-state.md) t ```js name="Common actions reset" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -309,7 +303,7 @@ function HomeScreen() { Home! @@ -336,55 +330,54 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -411,8 +404,8 @@ export default function App() { ```js name="Common actions reset" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, CommonActions, @@ -420,14 +413,12 @@ import { } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -447,63 +438,60 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile @@ -572,8 +560,8 @@ The `goBack` action creator allows to go back to the previous route in history. ```js name="Common actions goBack" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -588,7 +576,7 @@ function HomeScreen() { Home! @@ -622,18 +609,18 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -694,8 +681,8 @@ export default function App() { ```js name="Common actions goBack" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, CommonActions, @@ -703,14 +690,12 @@ import { } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -737,26 +721,24 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile @@ -822,8 +804,8 @@ If you want to go back from a particular route, you can add a `source` property ```js name="Common actions goBack" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -838,7 +820,7 @@ function HomeScreen() { Home! @@ -865,18 +847,18 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -940,8 +921,8 @@ export default function App() { ```js name="Common actions goBack" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, CommonActions, @@ -949,14 +930,12 @@ import { } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -976,26 +955,24 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile @@ -1070,8 +1046,8 @@ The `setParams` action allows to update params for a certain route. It takes the ```js name="Common actions setParams" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -1086,7 +1062,7 @@ function HomeScreen() { Home! @@ -1113,18 +1089,18 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -1188,19 +1163,21 @@ export default function App() { ```js name="Common actions setParams" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, CommonActions, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; +import { + NavigationContainer, + CommonActions, + useNavigation, +} from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -1220,26 +1197,24 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile @@ -1309,8 +1282,8 @@ If you want to set params for a particular route, you can add a `source` propert ```js name="Common actions setParams" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -1325,7 +1298,7 @@ function HomeScreen() { Home! @@ -1352,18 +1325,18 @@ function ProfileScreen({ route }) { Profile! {route.params.user}'s profile @@ -1427,8 +1399,8 @@ export default function App() { ```js name="Common actions setParams" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, CommonActions, @@ -1436,14 +1408,12 @@ import { } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; -function HomeScreen() { - const navigation = useNavigation(); - +function HomeScreen({ navigation }) { return ( Home! @@ -1463,26 +1433,24 @@ function HomeScreen() { ); } -function ProfileScreen({ route }) { - const navigation = useNavigation(); - +function ProfileScreen({ navigation, route }) { return ( Profile! {route.params.user}'s profile