Improve docs for navigation actions

Author: satya164

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

@@ -752,6 +752,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](tab-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The bottom tab navigator exports the following hooks:

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

@@ -9,6 +9,8 @@ import TabItem from '@theme/TabItem';
 
 `DrawerActions` is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in [CommonActions](navigation-actions.md).
 
+For screens inside a [Drawer Navigator](drawer-navigator.md), drawer actions are available as methods on the `navigation` object.
+
 The following actions are supported:
 
 ## openDrawer
@@ -34,7 +36,7 @@ function HomeScreen() {
       <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.openDrawer());
+          navigation.openDrawer();
           // codeblock-focus-end
         }}
       >
@@ -57,6 +59,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.openDrawer());
+```
+
 ## closeDrawer
 
 The `closeDrawer` action can be used to close the drawer pane.
@@ -68,7 +78,6 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -83,9 +92,7 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home!</Text>
-      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
-        Open Drawer
-      </Button>
+      <Button onPress={() => navigation.openDrawer()}>Open Drawer</Button>
     </View>
   );
 }
@@ -100,7 +107,7 @@ function CustomDrawerContent(props) {
         label="Close drawer"
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.closeDrawer());
+          navigation.closeDrawer();
           // codeblock-focus-end
         }}
       />
@@ -122,6 +129,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.closeDrawer());
+```
+
 ## toggleDrawer
 
 The `toggleDrawer` action can be used to toggle the drawer pane.
@@ -133,48 +148,29 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
-import {
-  createDrawerNavigator,
-  DrawerContentScrollView,
-  DrawerItemList,
-  DrawerItem,
-} from '@react-navigation/drawer';
+import { createDrawerNavigator } from '@react-navigation/drawer';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home!</Text>
-      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
-        Toggle Drawer
-      </Button>
-    </View>
-  );
-}
-
-function CustomDrawerContent(props) {
-  const { navigation } = props;
-
-  return (
-    <DrawerContentScrollView {...props}>
-      <DrawerItemList {...props} />
-      <DrawerItem
-        label="Toggle drawer"
+      <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(DrawerActions.toggleDrawer());
+          navigation.toggleDrawer();
           // codeblock-focus-end
         }}
-      />
-    </DrawerContentScrollView>
+      >
+        Toggle Drawer
+      </Button>
+    </View>
   );
 }
 
 const MyDrawer = createDrawerNavigator({
-  drawerContent: (props) => <CustomDrawerContent {...props} />,
   screens: {
     Home: HomeScreen,
   },
@@ -187,6 +183,14 @@ export default function App() {
 }
 ```
 
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.toggleDrawer());
+```
+
 ## jumpTo
 
 The `jumpTo` action can be used to jump to an existing route in the drawer navigator.
@@ -201,7 +205,6 @@ import { Button } from '@react-navigation/elements';
 import {
   createStaticNavigation,
   useNavigation,
-  DrawerActions,
 } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
@@ -214,9 +217,7 @@ function HomeScreen() {
       <Button
         onPress={() => {
           // codeblock-focus-start
-          navigation.dispatch(
-            DrawerActions.jumpTo('Profile', { user: 'Satya' })
-          );
+          navigation.jumpTo('Profile', { user: 'Satya' });
           // codeblock-focus-end
         }}
       >
@@ -250,3 +251,11 @@ export default function App() {
   return <Navigation />;
 }
 ```
+
+It can also be used with `navigation.dispatch`:
+
+```js
+import { DrawerActions } from '@react-navigation/native';
+
+navigation.dispatch(DrawerActions.jumpTo('Profile', { user: 'Satya' }));
+```

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

@@ -749,6 +749,8 @@ export default function App() {
 }
 ```
 
+See [`openDrawer`](drawer-actions.md#opendrawer) for more details.
+
 #### `closeDrawer`
 
 Closes the drawer pane.
@@ -757,6 +759,8 @@ Closes the drawer pane.
 navigation.closeDrawer();
 ```
 
+See [`closeDrawer`](drawer-actions.md#closedrawer) for more details.
+
 #### `toggleDrawer`
 
 Opens the drawer pane if closed, closes the drawer pane if opened.
@@ -765,6 +769,8 @@ Opens the drawer pane if closed, closes the drawer pane if opened.
 navigation.toggleDrawer();
 ```
 
+See [`toggleDrawer`](drawer-actions.md#toggledrawer) for more details.
+
 #### `jumpTo`
 
 Navigates to an existing screen in the drawer navigator. The method accepts the following arguments:
@@ -827,6 +833,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](drawer-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The drawer navigator exports the following hooks:

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

@@ -659,6 +659,8 @@ export default function App() {
 }
 ```
 
+See [`jumpTo`](tab-actions.md#jumpto) for more details.
+
 ### Hooks
 
 The material top tab navigator exports the following hooks:

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

@@ -1313,6 +1313,8 @@ Replaces the current screen with a new screen in the stack. The method accepts t
 navigation.replace('Profile', { owner: 'Michaś' });
 ```
 
+See [`replace`](stack-actions.md#replace) for more details.
+
 #### `push`
 
 Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:
@@ -1324,6 +1326,8 @@ Pushes a new screen to the top of the stack and navigate to it. The method accep
 navigation.push('Profile', { owner: 'Michaś' });
 ```
 
+See [`push`](stack-actions.md#push) for more details.
+
 #### `pop`
 
 Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (`count`), which allows you to specify how many screens to pop back by.
@@ -1332,6 +1336,8 @@ Pops the current screen from the stack and navigates back to the previous screen
 navigation.pop();
 ```
 
+See [`pop`](stack-actions.md#pop) for more details.
+
 #### `popTo`
 
 Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:
@@ -1347,6 +1353,8 @@ If a matching screen is not found in the stack, this will pop the current screen
 navigation.popTo('Profile', { owner: 'Michaś' });
 ```
 
+See [`popTo`](stack-actions.md#popto) for more details.
+
 #### `popToTop`
 
 Pops all of the screens in the stack except the first one and navigates to it.
@@ -1355,6 +1363,8 @@ Pops all of the screens in the stack except the first one and navigates to it.
 navigation.popToTop();
 ```
 
+See [`popToTop`](stack-actions.md#poptotop) for more details.
+
 ### Hooks
 
 The native stack navigator exports the following hooks: