Emphasize ID prop for getParent

Author: satya164

versioned_docs/version-5.x/navigation-events.md

@@ -21,8 +21,6 @@ Each callback registered as an event listener receive an event object as its arg
 - `target` - The route key for the screen that should receive the event. For some events, this maybe `undefined` if the event wasn't related to a specific screen.
 - `preventDefault` - For some events, there may be a `preventDefault` method on the event object. Calling this method will prevent the default action performed by the event (such as switching tabs on `tabPress`). Support for preventing actions are only available for certain events like `tabPress` and won't work for all events.
 
-One thing to keep in mind is that you can only listen to events from the immediate parent navigator. For example, if you try to add a listener in a screen is inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use `navigation.getParent()` to get a reference to parent navigator's navigation prop and add a listener.
-
 There are 2 ways to listen to events:
 
 ### `navigation.addListener`
@@ -78,6 +76,8 @@ class Profile extends React.Component {
 }
 ```
 
+One thing to keep in mind is that you can only listen to events from the immediate navigator with `addListener`. For example, if you try to add a listener in a screen that's inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use `navigation.getParent()` to get a reference to parent navigator's navigation prop and add a listener.
+
 ### `listeners` prop on `Screen`
 
 Sometimes you might want to add a listener from the component where you defined the navigator rather than inside the screen. You can use the `listeners` prop on the `Screen` component to add listeners. The `listeners` prop takes an object with the event names as keys and the listener callbacks as values.

versioned_docs/version-6.x/navigation-events.md

@@ -32,9 +32,7 @@ This event is emitted when the user is leaving the screen, there's a chance to [
 
 ## Listening to events
 
-There are multiple ways to listen to events from the navigators. Before we get into how to add listeners, one thing to keep in mind is that you can only listen to events from the immediate parent navigator. For example, if you try to add a listener in a screen is inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use [`navigation.getParent`](navigation-prop.md#getparent) to get a reference to parent navigator's navigation prop and add a listener.
-
-Each callback registered as an event listener receive an event object as its argument. The event object contains few properties:
+There are multiple ways to listen to events from the navigators. Each callback registered as an event listener receives an event object as its argument. The event object contains few properties:
 
 - `data` - Additional data regarding the event passed by the navigator. This can be `undefined` if no data was passed.
 - `target` - The route key for the screen that should receive the event. For some events, this maybe `undefined` if the event wasn't related to a specific screen.
@@ -95,6 +93,18 @@ class Profile extends React.Component {
 }
 ```
 
+One thing to keep in mind is that you can only listen to events from the immediate navigator with `addListener`. For example, if you try to add a listener in a screen that's inside a stack that's nested in a tab, it won't get the `tabPress` event. If you need to listen to an event from a parent navigator, you may use [`navigation.getParent`](navigation-prop.md#getparent) to get a reference to parent navigator's navigation prop and add a listener.
+
+```js
+const unsubscribe = navigation
+  .getParent('MyTabs')
+  .addListener('tabPress', (e) => {
+    // Do something
+  });
+```
+
+Here `'MyTabs'` refers to the value you pass in the `id` prop of the parent `Tab.Navigator` whose event you want to listen to.
+
 ### `listeners` prop on `Screen`
 
 Sometimes you might want to add a listener from the component where you defined the navigator rather than inside the screen. You can use the `listeners` prop on the `Screen` component to add listeners. The `listeners` prop takes an object with the event names as keys and the listener callbacks as values.
@@ -136,7 +146,7 @@ Example:
 
 ### `screenListeners` prop on the navigator
 
-You can pass a prop named `screenListeners` to the navigator component, where you can specify listeners for events from all screens. This can be useful if you want to listen to specific events regardless of the screen, or want to listen to common events such as `state` which is emitted to all screens.
+You can pass a prop named `screenListeners` to the navigator component, where you can specify listeners for events from all screens for this navigator. This can be useful if you want to listen to specific events regardless of the screen, or want to listen to common events such as `state` which is emitted to all screens.
 
 Example:
 

versioned_docs/version-6.x/navigation-prop.md

@@ -358,6 +358,7 @@ To use an ID for a navigator, first pass a unique `id` prop:
 Then when using `getParent`, instead of:
 
 ```js
+// Avoid this
 const drawerNavigation = navigation.getParent().getParent();
 
 // ...
@@ -368,6 +369,7 @@ drawerNavigation?.openDrawer();
 You can do:
 
 ```js
+// Do this
 const drawerNavigation = navigation.getParent('LeftDrawer');
 
 // ...

versioned_docs/version-6.x/nesting-navigators.md

@@ -87,11 +87,15 @@ For example, if you have a stack navigator nested inside a tab navigator, the sc
 To receive events from parent navigator, you can explicitly listen to parent's events with [`navigation.getParent`](navigation-prop.md#getparent):
 
 ```js
-const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
-  // Do something
-});
+const unsubscribe = navigation
+  .getParent('MyTabs')
+  .addListener('tabPress', (e) => {
+    // Do something
+  });
 ```
 
+Here `'MyTabs'` refers to the value you pass in the `id` prop of the parent `Tab.Navigator` whose event you want to listen to.
+
 ### Parent navigator's UI is rendered on top of child navigator
 
 For example, when you nest a stack navigator inside a drawer navigator, you'll see that the drawer appears above the stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators.

versioned_docs/version-6.x/upgrading-from-5.x.md

@@ -22,7 +22,7 @@ React Navigation 6 requires newer versions of following libraries:
 To upgrade `react-native-safe-area-context` and `react-native-screens` to the latest supported versions, do the following:
 
 > **NOTE:**
-> 
+>
 > If your react-native Version is <= 0.63.4, don't use `react-native-safe-area-context` in Version 4, but only till 3.4.1. [More Information see here](https://github.com/th3rdwave/react-native-safe-area-context/issues/248)
 
 For Expo managed projects:
@@ -177,7 +177,7 @@ A common scenario where you should use `merge: true` is if you have a custom tab
 
 ### Dropped `dangerously` from `dangerouslyGetParent` and `dangerouslyGetState`
 
-The `dangerouslyGetParent` and `dangerouslyGetState` methods on the `navigation` prop are useful in many scenarios, and sometimes necessary. So we dropped the `dangerously` prefix to make it clear that it's safe to use. Now you can use [`navigation.getParent()`](navigation-prop.md#getparent) and [`navigation.getState()`](navigation-prop.md#getstate).
+The `dangerouslyGetParent` and `dangerouslyGetState` methods on the `navigation` prop are useful in many scenarios, and sometimes necessary. So we dropped the `dangerously` prefix to make it clear that it's safe to use. Now you can use [`navigation.getParent`](navigation-prop.md#getparent) and [`navigation.getState()`](navigation-prop.md#getstate).
 
 ### No more `state` property on the `route` prop