Use 'object' instead 'prop' termibology for navigation & route

Author: satya164

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -53,7 +53,7 @@ The `Tab.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -442,7 +442,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The tab navigator adds the following methods to the navigation prop:
+The tab navigator adds the following methods to the navigation object:
 
 #### `jumpTo`
 

versioned_docs/version-7.x/connecting-navigation-prop.md

@@ -40,7 +40,7 @@ The hook returns an object with following properties:
 - `navigation` - The navigation object containing various helper methods for the navigator to manipulate the [navigation state](navigation-state.md). This isn't the same as the navigation object for the screen and includes some helpers such as `emit` to emit events to the screens.
 - `descriptors` - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by `descriptors[route.key]`. Each descriptor contains the following properties:
 
-  - `navigation` - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive `navigation` prop as well, such as a header component.
+  - `navigation` - The navigation object for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive `navigation` prop as well, such as a header component.
   - `options` - A getter which returns the options such as `title` for the screen if they are specified.
   - `render` - A function which can be used to render the actual screen. Calling `descriptors[route.key].render()` will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.
 

versioned_docs/version-7.x/custom-navigators.md

@@ -182,7 +182,7 @@ const MyTabRouter = options => {
 };
 ```
 
-Instead of writing a custom router to handle custom actions, you can [pass a function to `dispatch`](navigation-prop.md#dispatch) instead. It's cleaner and recommended instead of overriding routers.
+Instead of writing a custom router to handle custom actions, you can [pass a function to `dispatch`](navigation-object.md#dispatch) instead. It's cleaner and recommended instead of overriding routers.
 
 ### Blocking Navigation Actions
 

versioned_docs/version-7.x/custom-routers.md

@@ -91,7 +91,7 @@ The `Drawer.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -529,7 +529,7 @@ If you have custom drawer content, make sure to emit this event.
 
 ### Helpers
 
-The drawer navigator adds the following methods to the navigation prop:
+The drawer navigator adds the following methods to the navigation object:
 
 #### `openDrawer`
 

versioned_docs/version-7.x/drawer-navigator.md

@@ -129,7 +129,7 @@ There are 2 primary ways to configure the navigators:
 
 The static configuration API has reduced boilerplate and simplifies things such as TypeScript types and deep linking. If you're starting a new project or are new to React Navigation, this is the **recommended way** to set up your app.
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=static) to start writing some code with the Static API.
+Continue to ["Hello React Navigation"](hello-react-navigation.md?config=static) to start writing some code with the static API.
 
 ### Dynamic configuration
 
@@ -154,4 +154,4 @@ In a typical React Native app, the `NavigationContainer` should be only used onc
 
 :::
 
-Continue to ["Hello React Navigation"](hello-react-navigation.md?config=dynamic) to start writing some code with the Dynamic API.
+Continue to ["Hello React Navigation"](hello-react-navigation.md?config=dynamic) to start writing some code with the dynamic API.

versioned_docs/version-7.x/getting-started.md

@@ -55,41 +55,32 @@ const StackNavigator = (
 
 The suffix `Screen` in the component name is entirely optional, but a frequently used convention; we could call it `Michael` and this would work just the same.
 
-We saw earlier that our screen components are provided with the `navigation` prop. It's important to note that _this only happens if the screen is rendered as a route by React Navigation_ (for example, in response to `navigation.navigate`). For example, if we render `DetailsScreen` as a child of `HomeScreen`, then `DetailsScreen` won't be provided with the `navigation` prop, and when you press the "Go to Details... again" button on the Home screen, the app will throw one of the quintessential JavaScript exceptions "undefined is not an object".
+## Navigation object
 
-```js
-function HomeScreen() {
-  return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
-      <DetailsScreen />
-    </View>
-  );
-}
-```
-
-The ["Navigation prop reference"](navigation-prop.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `navigation` prop.
-
-## Navigation Prop
-
-This prop will be passed to all screens, and it can be used for the following:
+The navigation object contains methods used for navigation. It contains methods such as:
 
 - `dispatch` will send an action up to the router
 - `navigate`, `goBack`, etc are available to dispatch actions in a convenient way
 
-Navigators can also accept a navigation prop, which they should get from the parent navigator, if there is one.
+This object can be accessed with the [`useNavigation`](use-navigation.md) hook. It's also passed as a prop to screens defined with the dynamic API.
 
-For more details, see the ["Navigation prop document"](navigation-prop.md).
+For more details, see the ["Navigation object docs"](navigation-object.md).
 
-The ["Route prop reference"](route-prop.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `route` prop.
+The ["Route object reference"](route-object.md) section goes into more detail on this, describes workarounds, and provides more information on other properties available on `route` prop.
 
-## Route Prop
+## Route object
 
-This prop will be passed to all screens. Contains information about current route i.e. `params`, `key` and `name`.
+This prop will be passed to all screens. Contains information about the current route i.e. `params`, `key` and `name`. It can also contain arbitrary params:
+
+```js
+{
+  key: 'B',
+  name: 'Profile',
+  params: { id: '123' }
+}
+```
+
+For more details, see the ["Route object reference"](route-object.md).
 
 ## Navigation State
 
@@ -110,18 +101,6 @@ For this navigation state, there are two routes (which may be tabs, or cards in
 
 You can read more about the navigation state [here](navigation-state.md).
 
-## Route
-
-Each route is an object which contains a key to identify it, and a "name" to designate the type of route. It can also contain arbitrary params:
-
-```js
-{
-  key: 'B',
-  name: 'Profile',
-  params: { id: '123' }
-}
-```
-
 ## Header
 
 Also known as navigation header, navigation bar, app bar, and probably many other things. This is the rectangle at the top of your screen that contains the back button and the title for your screen. The entire rectangle is often referred to as the header in React Navigation.

versioned_docs/version-7.x/glossary-of-terms.md

@@ -49,7 +49,7 @@ Options to configure how the screens inside the group get presented in the navig
 </Stack.Group>
 ```
 
-When you pass a function, it'll receive the [`route`](route-prop.md) and [`navigation`](navigation-prop.md):
+When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
 
 ```js
 <Stack.Group

versioned_docs/version-7.x/group.md

@@ -53,8 +53,8 @@ function StackScreen() {
 
 The argument that is passed in to the `options` function is an object with the following properties:
 
-- `navigation` - The [navigation prop](navigation-prop.md) for the screen.
-- `route` - The [route prop](route-prop.md) for the screen
+- `navigation` - The [navigation object](navigation-object.md) for the screen.
+- `route` - The [route object](route-object.md) for the screen
 
 We only needed the `route` prop in the above example but you may in some cases want to use `navigation` as well.
 

versioned_docs/version-7.x/headers.md

@@ -75,7 +75,7 @@ The `Tab.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -408,7 +408,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The tab navigator adds the following methods to the navigation prop:
+The tab navigator adds the following methods to the navigation object:
 
 #### `jumpTo`
 

versioned_docs/version-7.x/material-top-tab-navigator.md

@@ -64,7 +64,7 @@ export default function App() {
 }
 ```
 
-But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer. We don't have access to the right drawer via the `navigation` prop since it's not a navigator.
+But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer. We don't have access to the right drawer via the `navigation` object since it's not a navigator.
 
 To solve this, we need to use context API to pass down a function to control the right drawer:
 
@@ -192,7 +192,7 @@ export default function App() {
 
 But there is one problem. When we call `navigation.openDrawer()` in our `HomeScreen`, it always opens the left drawer since it's the immediate parent of the screen.
 
-To solve this, we need to use [`navigation.getParent`](navigation-prop.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like:
+To solve this, we need to use [`navigation.getParent`](navigation-object.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like:
 
 ```js
 <Button onPress={() => navigation.openDrawer()} title="Open left drawer" />
@@ -282,4 +282,4 @@ Here, we are passing `"LeftDrawer"` and `"RightDrawer"` strings (you can use any
 - To have multiple drawers, you can use [`react-native-drawer-layout`](drawer-layout.md) directly in combination with a drawer navigator.
 - The [`drawerPosition`](drawer-layout.md#drawerposition) prop can be used to position the drawer on the right.
 - The methods to control the drawer can be passed down using context API when using [`react-native-drawer-layout`](drawer-layout.md).
-- When nesting multiple navigators, you can use [`navigation.getParent`](navigation-prop.md#getparent) in combination with the [`id` prop](drawer-navigator.md#id) to refer to the desired drawer.
+- When nesting multiple navigators, you can use [`navigation.getParent`](navigation-object.md#getparent) in combination with the [`id` prop](drawer-navigator.md#id) to refer to the desired drawer.

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

@@ -49,7 +49,7 @@ The `Stack.Navigator` component accepts following props:
 
 #### `id`
 
-Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-prop.md#getparent) to refer to this navigator in a child navigator.
+Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
 
 #### `initialRouteName`
 
@@ -650,7 +650,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The nativestack navigator adds the following methods to the navigation prop:
+The nativestack navigator adds the following methods to the navigation object:
 
 #### `replace`
 

versioned_docs/version-7.x/native-stack-navigator.md

@@ -4,7 +4,7 @@ title: Navigating without the navigation prop
 sidebar_label: Navigating without the navigation prop
 ---
 
-Sometimes you need to trigger a navigation action from places where you do not have access to the `navigation` prop, such as a Redux middleware. For such cases, you can dispatch navigation actions use a [`ref` on the navigation container](navigation-container.md#ref).
+Sometimes you need to trigger a navigation action from places where you do not have access to the `navigation` object, such as a Redux middleware. For such cases, you can dispatch navigation actions use a [`ref` on the navigation container](navigation-container.md#ref).
 
 **Do not** use the `ref` if:
 

versioned_docs/version-7.x/navigating-without-navigation-prop.md

@@ -24,7 +24,7 @@ Another way to write this would be:
 </a>
 ```
 
-We'll do something similar to the latter, but rather than using a `window.location` global, we'll use the `navigation` prop that is passed down to our screen components.
+We'll do something similar to the latter, but rather than using a `window.location` global, we'll use the `navigation` object that's accessible in our screen components.
 
 ## Navigating to a new screen
 
@@ -55,7 +55,7 @@ function HomeScreen() {
 
 Let's break this down:
 
-- `navigation` - the `navigation` object is returned from the [`useNavigation`](use-navigation.md) hook (more about this later in ["The navigation prop in depth"](navigation-prop.md)).
+- `navigation` - the `navigation` object is returned from the [`useNavigation`](use-navigation.md) hook (more about this later in ["The navigation object in depth"](navigation-object.md)).
 - `navigate('Details')` - we call the `navigate` function (on the `navigation` object &mdash; naming is hard!) with the name of the route that we'd like to move the user to.
 
 :::note
@@ -171,4 +171,4 @@ function DetailsScreen() {
 - We can call `navigation.push('RouteName')` as many times as we like and it will continue pushing routes.
 - The header bar will automatically show a back button, but you can programmatically go back by calling `navigation.goBack()`. On Android, the hardware back button just works as expected.
 - You can go back to an existing screen in the stack with `navigation.popTo('RouteName')`, and you can go back to the first screen in the stack with `navigation.popToTop()`.
-- The `navigation` prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).
+- The `navigation` object is available to all screen components with the [`useNavigation`](use-navigation.md) hook.

versioned_docs/version-7.x/navigating.md

@@ -31,7 +31,7 @@ export default function App() {
 
 ## Ref
 
-It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the `navigation` prop, such as a Redux middleware.
+It's also possible to attach a [`ref`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) to the container to get access to various helper methods, for example, dispatch navigation actions. This should be used in rare cases when you don't have access to the [`navigation` object](navigation-object.md), such as a Redux middleware.
 
 Example:
 

versioned_docs/version-7.x/navigation-container.md

@@ -4,7 +4,7 @@ title: NavigationContext
 sidebar_label: NavigationContext
 ---
 
-`NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-prop.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
+`NavigationContext` provides the `navigation` object (same object as the [navigation](navigation-object.md) prop). In fact, [useNavigation](use-navigation.md) uses this context to get the `navigation` prop.
 
 Most of the time, you won't use `NavigationContext` directly, as the provided `useNavigation` covers most use cases. But just in case you have something else in mind, `NavigationContext` is available for you to use.