From d7b53a9a19b3855c85173c6d87cbaee2e991a7eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Thu, 29 Feb 2024 11:22:06 +0100 Subject: [PATCH 1/4] Add static examples --- versioned_docs/version-7.x/drawer-actions.md | 683 ++++++++++++++++++- versioned_docs/version-7.x/tab-actions.md | 115 +++- 2 files changed, 776 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..645fa12f26c 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,523 @@ The following actions are supported: The `openDrawer` action can be used to open the drawer pane. - + + + +```js name="Drawer Actions - openDrawer" snack version=7 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, DrawerActions } 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.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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +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 ( + + + + // codeblock-focus-start + props.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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, DrawerActions } 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 ( + + + + // codeblock-focus-start + props.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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, DrawerActions } 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 +539,173 @@ 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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, DrawerActions } 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..fc20cadf16f 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,114 @@ 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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +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 dependencies=@react-navigation/elements +import * as React from 'react'; +import { Button } from '@react-navigation/elements'; +import { View, Text } from 'react-native'; +import { NavigationContainer, TabActions } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; + +// codeblock-focus-start +function HomeScreen({ navigation }) { + // 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 ( + + + + + + + ); +} ``` + + + From d571074a55e341257bb998a1f9be1d14aa1c4ab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Thu, 29 Feb 2024 14:22:33 +0100 Subject: [PATCH 2/4] Remvoe dependencies, default and use useNavigation instead of prop --- versioned_docs/version-7.x/drawer-actions.md | 60 +++++++++++++------- versioned_docs/version-7.x/tab-actions.md | 15 +++-- 2 files changed, 50 insertions(+), 25 deletions(-) diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md index 645fa12f26c..af0527d0673 100755 --- a/versioned_docs/version-7.x/drawer-actions.md +++ b/versioned_docs/version-7.x/drawer-actions.md @@ -18,7 +18,7 @@ The `openDrawer` action can be used to open the drawer pane. -```js name="Drawer Actions - openDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - openDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -102,13 +102,17 @@ export default function App() { ``` - + -```js name="Drawer Actions - openDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - openDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, DrawerActions } from '@react-navigation/native'; +import { + NavigationContainer, + DrawerActions, + useNavigation, +} from '@react-navigation/native'; import { createDrawerNavigator, DrawerContentScrollView, @@ -116,7 +120,8 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( @@ -193,7 +198,7 @@ The `closeDrawer` action can be used to close the drawer pane. -```js name="Drawer Actions - closeDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - closeDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -275,13 +280,17 @@ export default function App() { ``` - + -```js name="Drawer Actions - closeDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - closeDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, DrawerActions } from '@react-navigation/native'; +import { + NavigationContainer, + DrawerActions, + useNavigation, +} from '@react-navigation/native'; import { createDrawerNavigator, DrawerContentScrollView, @@ -289,7 +298,8 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( @@ -364,7 +374,7 @@ The `toggleDrawer` action can be used to open the drawer pane if closed, or clos -```js name="Drawer Actions - toggleDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - toggleDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -448,13 +458,17 @@ export default function App() { ``` - + -```js name="Drawer Actions - toggleDrawer" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - toggleDrawer" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, DrawerActions } from '@react-navigation/native'; +import { + NavigationContainer, + DrawerActions, + useNavigation, +} from '@react-navigation/native'; import { createDrawerNavigator, DrawerContentScrollView, @@ -462,7 +476,8 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( @@ -542,7 +557,7 @@ The `jumpTo` action can be used to jump to an existing route in the drawer navig -```js name="Drawer Actions - jumpTo" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - jumpTo" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -626,13 +641,17 @@ export default function App() { ``` - + -```js name="Drawer Actions - jumpTo" snack version=7 dependencies=@react-navigation/elements +```js name="Drawer Actions - jumpTo" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, DrawerActions } from '@react-navigation/native'; +import { + NavigationContainer, + DrawerActions, + useNavigation, +} from '@react-navigation/native'; import { createDrawerNavigator, DrawerContentScrollView, @@ -640,7 +659,8 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md index fc20cadf16f..30c03450347 100755 --- a/versioned_docs/version-7.x/tab-actions.md +++ b/versioned_docs/version-7.x/tab-actions.md @@ -21,7 +21,7 @@ The `jumpTo` action can be used to jump to an existing route in the tab navigato -```js name="Tab Actions - jumpTo" snack version=7 dependencies=@react-navigation/elements +```js name="Tab Actions - jumpTo" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -76,17 +76,22 @@ export default function App() { ``` - + -```js name="Tab Actions - jumpTo" snack version=7 dependencies=@react-navigation/elements +```js name="Tab Actions - jumpTo" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; -import { NavigationContainer, TabActions } from '@react-navigation/native'; +import { + NavigationContainer, + TabActions, + useNavigation, +} from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; // codeblock-focus-start -function HomeScreen({ navigation }) { +function HomeScreen() { + const navigation = useNavigation(); // highlight-next-line const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' }); From 5481e88e9fc0522061e3075957a61c7e7aa5dbb9 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 5 Mar 2024 09:50:35 +0100 Subject: [PATCH 3/4] Formatting --- versioned_docs/version-7.x/drawer-actions.md | 82 +++++++++----------- 1 file changed, 36 insertions(+), 46 deletions(-) diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md index af0527d0673..c0cd84b930e 100755 --- a/versioned_docs/version-7.x/drawer-actions.md +++ b/versioned_docs/version-7.x/drawer-actions.md @@ -42,12 +42,11 @@ function HomeScreen() { Home! @@ -128,12 +127,11 @@ function HomeScreen() { Home! @@ -243,18 +241,17 @@ function ProfileScreen({ route }) { ); } -function CustomDrawerContent(props) { +function CustomDrawerContent({ navigation }) { return ( - // codeblock-focus-start - props.navigation.dispatch(DrawerActions.closeDrawer()) + onPress={() => { + // codeblock-focus-start + navigation.dispatch(DrawerActions.closeDrawer()); // codeblock-focus-end - } + }} /> - // codeblock-focus-start - props.navigation.dispatch(DrawerActions.closeDrawer()) + onPress={() => { + // codeblock-focus-start + navigation.dispatch(DrawerActions.closeDrawer()); // codeblock-focus-end - } + }} /> @@ -476,8 +471,7 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen() { - const navigation = useNavigation(); +function HomeScreen({ navigation }) { const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( @@ -487,12 +481,11 @@ function HomeScreen() { Open Drawer @@ -587,12 +580,11 @@ function HomeScreen() { Toggle Drawer @@ -659,8 +651,7 @@ import { DrawerItem, } from '@react-navigation/drawer'; -function HomeScreen() { - const navigation = useNavigation(); +function HomeScreen({ navigation }) { const jumpToAction = DrawerActions.jumpTo('Profile', { user: 'Satya' }); return ( @@ -673,12 +664,11 @@ function HomeScreen() { Toggle Drawer From 79212636b616e8195eb08921f2f43476d4cf5172 Mon Sep 17 00:00:00 2001 From: kacperkapusciak Date: Tue, 5 Mar 2024 09:54:27 +0100 Subject: [PATCH 4/4] Moar formatting --- versioned_docs/version-7.x/drawer-actions.md | 16 ++++++++-------- versioned_docs/version-7.x/tab-actions.md | 16 ++++++++++------ 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md index c0cd84b930e..07ec368eacf 100755 --- a/versioned_docs/version-7.x/drawer-actions.md +++ b/versioned_docs/version-7.x/drawer-actions.md @@ -20,8 +20,8 @@ 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 { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -105,8 +105,8 @@ export default function App() { ```js name="Drawer Actions - openDrawer" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, DrawerActions, @@ -198,8 +198,8 @@ 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 { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -281,8 +281,8 @@ export default function App() { ```js name="Drawer Actions - closeDrawer" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, DrawerActions, @@ -372,8 +372,8 @@ The `toggleDrawer` action can be used to open the drawer pane if closed, or clos ```js name="Drawer Actions - toggleDrawer" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -457,8 +457,8 @@ export default function App() { ```js name="Drawer Actions - toggleDrawer" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, DrawerActions, @@ -552,8 +552,8 @@ The `jumpTo` action can be used to jump to an existing route in the drawer navig ```js name="Drawer Actions - jumpTo" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -637,8 +637,8 @@ export default function App() { ```js name="Drawer Actions - jumpTo" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, DrawerActions, diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md index 30c03450347..090af587ad9 100755 --- a/versioned_docs/version-7.x/tab-actions.md +++ b/versioned_docs/version-7.x/tab-actions.md @@ -23,8 +23,8 @@ The `jumpTo` action can be used to jump to an existing route in the tab navigato ```js name="Tab Actions - jumpTo" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { createStaticNavigation, useNavigation, @@ -42,8 +42,10 @@ function HomeScreen() { Home! @@ -80,8 +82,8 @@ export default function App() { ```js name="Tab Actions - jumpTo" snack version=7 import * as React from 'react'; -import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; +import { Button } from '@react-navigation/elements'; import { NavigationContainer, TabActions, @@ -99,8 +101,10 @@ function HomeScreen() { Home!