diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md
index 1495998a2b9..07ec368eacf 100755
--- a/versioned_docs/version-7.x/drawer-actions.md
+++ b/versioned_docs/version-7.x/drawer-actions.md
@@ -4,6 +4,9 @@ title: DrawerActions reference
sidebar_label: DrawerActions
---
+import Tabs from '@theme/Tabs';
+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).
The following actions are supported:
@@ -12,38 +15,531 @@ The following actions are supported:
The `openDrawer` action can be used to open the drawer pane.
-
+
+
+
+```js name="Drawer Actions - openDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ DrawerActions,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
+
+const Drawer = createDrawerNavigator({
+ drawerContent: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ return ;
+}
+```
+
+
+
+
+```js name="Drawer Actions - openDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ NavigationContainer,
+ DrawerActions,
+ useNavigation,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
-navigation.dispatch(DrawerActions.openDrawer());
+export default function App() {
+ return (
+
+ }
+ >
+
+
+
+
+ );
+}
```
+
+
+
### closeDrawer
The `closeDrawer` action can be used to close the drawer pane.
-
+
+
+
+```js name="Drawer Actions - closeDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ DrawerActions,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent({ navigation }) {
+ return (
+
+
+ {
+ // codeblock-focus-start
+ navigation.dispatch(DrawerActions.closeDrawer());
+ // codeblock-focus-end
+ }}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
+
+const Drawer = createDrawerNavigator({
+ drawerContent: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ return ;
+}
+```
+
+
+
+
+```js name="Drawer Actions - closeDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ NavigationContainer,
+ DrawerActions,
+ useNavigation,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent({ navigation }) {
+ return (
+
+
+ {
+ // codeblock-focus-start
+ navigation.dispatch(DrawerActions.closeDrawer());
+ // codeblock-focus-end
+ }}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
-navigation.dispatch(DrawerActions.closeDrawer());
+export default function App() {
+ return (
+
+ }
+ >
+
+
+
+
+ );
+}
```
+
+
+
### toggleDrawer
The `toggleDrawer` action can be used to open the drawer pane if closed, or close if open.
-
+
+
+
+```js name="Drawer Actions - toggleDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ DrawerActions,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
+
+const Drawer = createDrawerNavigator({
+ drawerContent: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+ return ;
+}
+```
+
+
+
+
+```js name="Drawer Actions - toggleDrawer" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ NavigationContainer,
+ DrawerActions,
+ useNavigation,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen({ navigation }) {
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
-navigation.dispatch(DrawerActions.toggleDrawer());
+export default function App() {
+ return (
+
+ }
+ >
+
+
+
+
+ );
+}
```
+
+
+
### jumpTo
The `jumpTo` action can be used to jump to an existing route in the drawer navigator.
@@ -51,12 +547,175 @@ The `jumpTo` action can be used to jump to an existing route in the drawer navig
- `name` - _string_ - Name of the route to jump to.
- `params` - _object_ - Screen params to pass to the destination route.
-
+
+
+
+```js name="Drawer Actions - jumpTo" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ DrawerActions,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+
+
+ );
+}
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
+
+const Drawer = createDrawerNavigator({
+ drawerContent: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(Drawer);
-```js
-import { DrawerActions } from '@react-navigation/native';
+export default function App() {
+ return ;
+}
+```
+
+
+
+
+```js name="Drawer Actions - jumpTo" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ NavigationContainer,
+ DrawerActions,
+ useNavigation,
+} from '@react-navigation/native';
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItemList,
+ DrawerItem,
+} from '@react-navigation/drawer';
+
+function HomeScreen({ navigation }) {
+ const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' });
-const jumpToAction = DrawerActions.jumpTo('Profile', { name: 'Satya' });
+ return (
+
+ Home!
+
+
+
+
+ );
+}
-navigation.dispatch(jumpToAction);
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.dispatch(DrawerActions.closeDrawer())}
+ />
+ props.navigation.dispatch(DrawerActions.toggleDrawer())}
+ />
+
+ );
+}
+
+const Drawer = createDrawerNavigator();
+
+export default function App() {
+ return (
+
+ }
+ >
+
+
+
+
+ );
+}
```
+
+
+
diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md
index ab2d179a3e2..090af587ad9 100755
--- a/versioned_docs/version-7.x/tab-actions.md
+++ b/versioned_docs/version-7.x/tab-actions.md
@@ -4,6 +4,9 @@ title: TabActions reference
sidebar_label: TabActions
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
`TabActions` is an object containing methods for generating actions specific to tab-based navigators. Its methods expand upon the actions available in [`CommonActions`](navigation-actions.md).
The following actions are supported:
@@ -15,12 +18,123 @@ The `jumpTo` action can be used to jump to an existing route in the tab navigato
- `name` - _string_ - Name of the route to jump to.
- `params` - _object_ - Screen params to pass to the destination route.
-
+
+
+
+```js name="Tab Actions - jumpTo" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ createStaticNavigation,
+ useNavigation,
+ TabActions,
+} from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// codeblock-focus-start
+function HomeScreen() {
+ const navigation = useNavigation();
+ // highlight-next-line
+ const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
+
+ return (
+
+ Home!
+
+
+ );
+}
+// codeblock-focus-end
+
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+const Tab = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+
+const Navigation = createStaticNavigation(Tab);
-```js
-import { TabActions } from '@react-navigation/native';
+export default function App() {
+ return ;
+}
+```
+
+
+
+
+```js name="Tab Actions - jumpTo" snack version=7
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@react-navigation/elements';
+import {
+ NavigationContainer,
+ TabActions,
+ useNavigation,
+} from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+// codeblock-focus-start
+function HomeScreen() {
+ const navigation = useNavigation();
+ // highlight-next-line
+ const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
-const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });
+ return (
+
+ Home!
+
+
+ );
+}
+// codeblock-focus-end
-navigation.dispatch(jumpToAction);
+function ProfileScreen({ route }) {
+ return (
+
+ Profile!
+ {route?.params?.user ? route.params.user : 'Noone'}'s profile
+
+ );
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+ return (
+
+
+
+
+
+
+ );
+}
```
+
+
+