From 1ce3fceb1cac2d34e79dd396ee01f70ff8daf22e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?=
 <59940332+patrycjakalinska@users.noreply.github.com>
Date: Tue, 5 Mar 2024 09:58:13 +0100
Subject: [PATCH] Migrate 'Drawer Actions' and 'Tab actions'  examples to
 static API in v7 (#1329)

* Add static examples

* Remvoe dependencies, default and use useNavigation instead of prop

* Formatting

* Moar formatting

---------

Co-authored-by: kacperkapusciak <kacper.kapusciak@swmansion.com>
---
 versioned_docs/version-7.x/drawer-actions.md | 693 ++++++++++++++++++-
 versioned_docs/version-7.x/tab-actions.md    | 124 +++-
 2 files changed, 795 insertions(+), 22 deletions(-)

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.
 
-<samp id="drawer-actions" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.openDrawer());
+          // codeblock-focus-end
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+const Drawer = createDrawerNavigator({
+  drawerContent: (props) => <CustomDrawerContent {...props} />,
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.openDrawer());
+          // codeblock-focus-end
+        }}
+      >
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
 
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
 
-navigation.dispatch(DrawerActions.openDrawer());
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator
+        drawerContent={(props) => <CustomDrawerContent {...props} />}
+      >
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Profile" component={ProfileScreen} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
 
+</TabItem>
+</Tabs>
+
 ### closeDrawer
 
 The `closeDrawer` action can be used to close the drawer pane.
 
-<samp id="drawer-actions" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent({ navigation }) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.closeDrawer());
+          // codeblock-focus-end
+        }}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+const Drawer = createDrawerNavigator({
+  drawerContent: (props) => <CustomDrawerContent {...props} />,
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic" >
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent({ navigation }) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.closeDrawer());
+          // codeblock-focus-end
+        }}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
 
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
 
-navigation.dispatch(DrawerActions.closeDrawer());
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator
+        drawerContent={(props) => <CustomDrawerContent {...props} />}
+      >
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Profile" component={ProfileScreen} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
 
+</TabItem>
+</Tabs>
+
 ### toggleDrawer
 
 The `toggleDrawer` action can be used to open the drawer pane if closed, or close if open.
 
-<samp id="drawer-actions" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.toggleDrawer());
+          // codeblock-focus-end
+        }}
+      >
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+const Drawer = createDrawerNavigator({
+  drawerContent: (props) => <CustomDrawerContent {...props} />,
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Drawer);
+
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(DrawerActions.toggleDrawer());
+          // codeblock-focus-end
+        }}
+      >
+        Toggle Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(jumpToAction)}>
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
 
-```js
-import { DrawerActions } from '@react-navigation/native';
+const Drawer = createDrawerNavigator();
 
-navigation.dispatch(DrawerActions.toggleDrawer());
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator
+        drawerContent={(props) => <CustomDrawerContent {...props} />}
+      >
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Profile" component={ProfileScreen} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
 
+</TabItem>
+</Tabs>
+
 ### 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.
 
-<samp id="drawer-actions" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(jumpToAction);
+          // codeblock-focus-end
+        }}
+      >
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+const Drawer = createDrawerNavigator({
+  drawerContent: (props) => <CustomDrawerContent {...props} />,
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Drawer);
 
-```js
-import { DrawerActions } from '@react-navigation/native';
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open Drawer
+      </Button>
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle Drawer
+      </Button>
+      <Button
+        onPress={() => {
+          // codeblock-focus-start
+          navigation.dispatch(jumpToAction);
+          // codeblock-focus-end
+        }}
+      >
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
 
-navigation.dispatch(jumpToAction);
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Close drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}
+      />
+      <DrawerItem
+        label="Toggle drawer"
+        onPress={() => props.navigation.dispatch(DrawerActions.toggleDrawer())}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+const Drawer = createDrawerNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Drawer.Navigator
+        drawerContent={(props) => <CustomDrawerContent {...props} />}
+      >
+        <Drawer.Screen name="Home" component={HomeScreen} />
+        <Drawer.Screen name="Profile" component={ProfileScreen} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
+
+</TabItem>
+</Tabs>
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.
 
-<samp id="tab-actions" />
+<Tabs groupId="config" queryString="config">
+<TabItem value="static" label="Static" default>
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button
+        onPress={() => {
+          // highlight-next-line
+          navigation.dispatch(jumpToAction);
+        }}
+      >
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+// codeblock-focus-end
+
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator({
+  screens: {
+    Home: HomeScreen,
+    Profile: ProfileScreen,
+  },
+});
+
+const Navigation = createStaticNavigation(Tab);
 
-```js
-import { TabActions } from '@react-navigation/native';
+export default function App() {
+  return <Navigation />;
+}
+```
+
+</TabItem>
+<TabItem value="dynamic" label="Dynamic">
+
+```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 (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Home!</Text>
+      <Button
+        onPress={() => {
+          // highlight-next-line
+          navigation.dispatch(jumpToAction);
+        }}
+      >
+        Jump to Profile
+      </Button>
+    </View>
+  );
+}
+// codeblock-focus-end
 
-navigation.dispatch(jumpToAction);
+function ProfileScreen({ route }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Profile!</Text>
+      <Text>{route?.params?.user ? route.params.user : 'Noone'}'s profile</Text>
+    </View>
+  );
+}
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="Home" component={HomeScreen} />
+        <Tab.Screen name="Profile" component={ProfileScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}
 ```
+
+</TabItem>
+</Tabs>