From 4418242bf7d92d8aaf317b084f511f7327394683 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Tue, 6 Aug 2024 23:02:22 +0200 Subject: [PATCH] Automatically detect React Navigation version for examples --- src/components/Pre.js | 9 +++++- src/plugins/react-navigation-versions.mjs | 2 +- versioned_docs/version-7.x/auth-flow.md | 8 +++--- .../version-7.x/bottom-tab-navigator.md | 12 ++++---- .../custom-android-back-button-handling.md | 4 +-- versioned_docs/version-7.x/drawer-actions.md | 16 +++++------ .../version-7.x/drawer-based-navigation.md | 16 +++++------ .../version-7.x/drawer-navigator.md | 8 +++--- versioned_docs/version-7.x/elements.md | 10 +++---- .../function-after-focusing-screen.md | 12 ++++---- versioned_docs/version-7.x/group.md | 4 +-- .../version-7.x/handling-safe-area.md | 12 ++++---- versioned_docs/version-7.x/header-buttons.md | 8 +++--- versioned_docs/version-7.x/headers.md | 22 +++++++-------- .../version-7.x/hello-react-navigation.md | 16 +++++------ .../version-7.x/hiding-tabbar-in-screens.md | 4 +-- .../version-7.x/material-top-tab-navigator.md | 4 +-- versioned_docs/version-7.x/modal.md | 4 +-- .../version-7.x/multiple-drawers.md | 8 +++--- .../version-7.x/native-stack-navigator.md | 4 +-- .../navigating-without-navigation-prop.md | 8 +++--- versioned_docs/version-7.x/navigating.md | 10 +++---- .../version-7.x/navigation-actions.md | 28 +++++++++---------- .../version-7.x/navigation-container.md | 4 +-- .../version-7.x/navigation-context.md | 4 +-- .../version-7.x/navigation-events.md | 4 +-- .../version-7.x/navigation-lifecycle.md | 12 ++++---- .../version-7.x/navigation-object.md | 28 +++++++++---------- .../version-7.x/nesting-navigators.md | 20 ++++++------- versioned_docs/version-7.x/params.md | 8 +++--- versioned_docs/version-7.x/route-object.md | 4 +-- .../version-7.x/screen-options-resolution.md | 20 ++++++------- versioned_docs/version-7.x/screen-options.md | 12 ++++---- versioned_docs/version-7.x/screen-tracking.md | 4 +-- versioned_docs/version-7.x/stack-actions.md | 16 +++++------ versioned_docs/version-7.x/stack-navigator.md | 4 +-- .../version-7.x/state-persistence.md | 4 +-- versioned_docs/version-7.x/status-bar.md | 8 +++--- versioned_docs/version-7.x/tab-actions.md | 4 +-- .../version-7.x/tab-based-navigation.md | 12 ++++---- versioned_docs/version-7.x/tab-view.md | 2 +- versioned_docs/version-7.x/themes.md | 12 ++++---- .../version-7.x/use-focus-effect.md | 4 +-- versioned_docs/version-7.x/use-is-focused.md | 4 +-- .../version-7.x/use-navigation-state.md | 4 +-- versioned_docs/version-7.x/use-navigation.md | 4 +-- .../version-7.x/use-prevent-remove.md | 4 +-- versioned_docs/version-7.x/use-route.md | 4 +-- .../version-7.x/use-scroll-to-top.md | 8 +++--- versioned_docs/version-7.x/use-theme.md | 4 +-- versioned_docs/version-7.x/web-support.md | 4 +-- 51 files changed, 229 insertions(+), 222 deletions(-) diff --git a/src/components/Pre.js b/src/components/Pre.js index 672f2ca36d9..777e3eadaab 100644 --- a/src/components/Pre.js +++ b/src/components/Pre.js @@ -1,3 +1,4 @@ +import { useActiveVersion } from '@docusaurus/plugin-content-docs/client'; import { useColorMode } from '@docusaurus/theme-common'; import { usePluginData } from '@docusaurus/useGlobalData'; import MDXPre from '@theme-original/MDXComponents/Pre'; @@ -7,12 +8,12 @@ export default function Pre({ children, 'data-name': name, 'data-snack': snack, - 'data-version': version, 'data-dependencies': deps, 'data-lang': lang, ...rest }) { const { colorMode } = useColorMode(); + const activeVersion = useActiveVersion(); const { versions } = usePluginData('react-navigation-versions'); const child = React.Children.only(children); @@ -82,6 +83,12 @@ export default function Pre({ ) : {}; + const version = activeVersion?.name; + + if (version == null || versions[version] == null) { + throw new Error(`Invalid version: ${version}`); + } + Object.assign( dependencies, Object.entries(versions[version]).reduce((acc, [key, value]) => { diff --git a/src/plugins/react-navigation-versions.mjs b/src/plugins/react-navigation-versions.mjs index a969ee48cf7..5df93849790 100644 --- a/src/plugins/react-navigation-versions.mjs +++ b/src/plugins/react-navigation-versions.mjs @@ -3,7 +3,7 @@ export default function friendsPlugin(context, options) { name: 'react-navigation-versions', async contentLoaded({ content, actions }) { const queries = { - 7: { + '7.x': { tag: 'next', packages: [ '@react-navigation/bottom-tabs', diff --git a/versioned_docs/version-7.x/auth-flow.md b/versioned_docs/version-7.x/auth-flow.md index 5b04fba55a0..f649b26663d 100755 --- a/versioned_docs/version-7.x/auth-flow.md +++ b/versioned_docs/version-7.x/auth-flow.md @@ -68,7 +68,7 @@ function useIsSignedOut() { We'll discuss how to expose the context value later. -```js name="Customizing tabs appearance" snack version=7 +```js name="Customizing tabs appearance" snack import * as React from 'react'; import { View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -150,7 +150,7 @@ function SignUpScreen() { For example: -```js name="Customizing tabs appearance" snack version=7 +```js name="Customizing tabs appearance" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -451,7 +451,7 @@ So our component will look like this: -```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store +```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store // codeblock-focus-start import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; @@ -639,7 +639,7 @@ const Navigation = createStaticNavigation(RootStack); -```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store +```js name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store // codeblock-focus-start import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md index 4518e4a1540..6fc47f794bb 100755 --- a/versioned_docs/version-7.x/bottom-tab-navigator.md +++ b/versioned_docs/version-7.x/bottom-tab-navigator.md @@ -25,7 +25,7 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`: -```js name="Bottom Tab Navigator" snack version=7 +```js name="Bottom Tab Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -80,7 +80,7 @@ export default function App() { -```js name="Bottom Tab Navigator" snack version=7 +```js name="Bottom Tab Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -669,7 +669,7 @@ Supported values for `animation` are: -```js name="Bottom Tabs animation" snack version=7 +```js name="Bottom Tabs animation" snack import * as React from 'react'; import { View, Text, Easing } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -715,7 +715,7 @@ export default function App() { -```js name="Bottom Tabs animation" snack version=7 +```js name="Bottom Tabs animation" snack import * as React from 'react'; import { Text, View, Easing } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -922,7 +922,7 @@ Putting these together, you can customize the transition animation for a screen: -```js name="Bottom Tabs custom animation" snack version=7 +```js name="Bottom Tabs custom animation" snack import * as React from 'react'; import { View, Text, Easing } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -980,7 +980,7 @@ export default function App() { -```js name="Bottom Tabs custom animation" snack version=7 +```js name="Bottom Tabs custom animation" snack import * as React from 'react'; import { Text, View, Easing } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/custom-android-back-button-handling.md b/versioned_docs/version-7.x/custom-android-back-button-handling.md index cf900475e29..e2310ac7f7e 100755 --- a/versioned_docs/version-7.x/custom-android-back-button-handling.md +++ b/versioned_docs/version-7.x/custom-android-back-button-handling.md @@ -18,7 +18,7 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and -```js name="Custom android back button" snack version=7 +```js name="Custom android back button" snack import * as React from 'react'; import { Text, View, BackHandler, StyleSheet } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -131,7 +131,7 @@ const styles = StyleSheet.create({ -```js name="Custom android back button" snack version=7 +```js name="Custom android back button" snack import * as React from 'react'; import { Text, View, BackHandler, StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/drawer-actions.md b/versioned_docs/version-7.x/drawer-actions.md index 07ec368eacf..0500a6312c1 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 +```js name="Drawer Actions - openDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -103,7 +103,7 @@ export default function App() { -```js name="Drawer Actions - openDrawer" snack version=7 +```js name="Drawer Actions - openDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -196,7 +196,7 @@ The `closeDrawer` action can be used to close the drawer pane. -```js name="Drawer Actions - closeDrawer" snack version=7 +```js name="Drawer Actions - closeDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -279,7 +279,7 @@ export default function App() { -```js name="Drawer Actions - closeDrawer" snack version=7 +```js name="Drawer Actions - closeDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -370,7 +370,7 @@ The `toggleDrawer` action can be used to open the drawer pane if closed, or clos -```js name="Drawer Actions - toggleDrawer" snack version=7 +```js name="Drawer Actions - toggleDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -455,7 +455,7 @@ export default function App() { -```js name="Drawer Actions - toggleDrawer" snack version=7 +```js name="Drawer Actions - toggleDrawer" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -550,7 +550,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 +```js name="Drawer Actions - jumpTo" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -635,7 +635,7 @@ export default function App() { -```js name="Drawer Actions - jumpTo" snack version=7 +```js name="Drawer Actions - jumpTo" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md index 453eb576123..e01f90d9016 100755 --- a/versioned_docs/version-7.x/drawer-based-navigation.md +++ b/versioned_docs/version-7.x/drawer-based-navigation.md @@ -23,7 +23,7 @@ To use this drawer navigator, import it from `@react-navigation/drawer`: -```js name="Drawer navigation" snack version=7 +```js name="Drawer navigation" snack import * as React from 'react'; import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -72,7 +72,7 @@ export default function App() { -```js name="Drawer navigation" snack version=7 +```js name="Drawer navigation" snack import * as React from 'react'; import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -124,7 +124,7 @@ To open and close drawer, use the following helpers: -```js name="Drawer open and close" snack version=7 +```js name="Drawer open and close" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -203,7 +203,7 @@ export default function App() { -```js name="Drawer open and close" snack version=7 +```js name="Drawer open and close" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -292,7 +292,7 @@ If you would like to toggle the drawer you call the following: -```js name="Drawer toggle" snack version=7 +```js name="Drawer toggle" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -363,7 +363,7 @@ export default function App() { -```js name="Drawer toggle" snack version=7 +```js name="Drawer toggle" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -444,7 +444,7 @@ Each of these functions, behind the scenes, are simply dispatching actions: -```js name="Navigation dispatcher" snack version=7 +```js name="Navigation dispatcher" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -528,7 +528,7 @@ export default function App() { -```js name="Navigation dispatcher" snack version=7 +```js name="Navigation dispatcher" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md index 9d8898bccd6..cd9292daa47 100644 --- a/versioned_docs/version-7.x/drawer-navigator.md +++ b/versioned_docs/version-7.x/drawer-navigator.md @@ -76,7 +76,7 @@ To use this navigator, import it from `@react-navigation/drawer`: -```js name="Drawer Navigator" snack version=7 +```js name="Drawer Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -131,7 +131,7 @@ export default function App() { -```js name="Drawer Navigator" snack version=7 +```js name="Drawer Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -721,7 +721,7 @@ The `progress` object is a `SharedValue` that represents the animated position o -```js name="Drawer animation progress" snack version=7 +```js name="Drawer animation progress" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -774,7 +774,7 @@ export default function App() { -```js name="Drawer animation progress" snack version=7 +```js name="Drawer animation progress" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 44e987fd0c2..713f38fa6c7 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -25,7 +25,7 @@ A component that can be used as a header. This is used by all the navigators by Usage: -```js name="React Navigation Elements Header" snack version=7 +```js name="React Navigation Elements Header" snack import * as React from 'react'; import { SafeAreaProviderCompat } from '@react-navigation/elements'; import { NavigationContainer } from '@react-navigation/native'; @@ -53,7 +53,7 @@ To use the header in a navigator, you can use the `header` option in the screen -```js name="Header with Native Stack" snack version=7 +```js name="Header with Native Stack" snack import * as React from 'react'; import { Text, View, Button } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -93,7 +93,7 @@ export default function App() { -```js name="Header with Native Stack" snack version=7 +```js name="Header with Native Stack" snack import * as React from 'react'; import { Text, View, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -399,7 +399,7 @@ For example, you can use this with `headerTransparent` to render a blur view to -```js name="Header blur" snack version=7 dependencies=expo-blur +```js name="Header blur" snack dependencies=expo-blur import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import { @@ -466,7 +466,7 @@ export default App; -```js name="Header blur" snack version=7 dependencies=expo-blur +```js name="Header blur" snack dependencies=expo-blur import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/function-after-focusing-screen.md b/versioned_docs/version-7.x/function-after-focusing-screen.md index dd4ec23b6da..24da95e0a02 100755 --- a/versioned_docs/version-7.x/function-after-focusing-screen.md +++ b/versioned_docs/version-7.x/function-after-focusing-screen.md @@ -26,7 +26,7 @@ Example: -```js name="Focus event listener" snack version=7 +```js name="Focus event listener" snack // codeblock-focus-start import * as React from 'react'; import { View } from 'react-native'; @@ -78,7 +78,7 @@ export default function App() { -```js name="Focus event listener" snack version=7 +```js name="Focus event listener" snack // codeblock-focus-start import * as React from 'react'; import { View } from 'react-native'; @@ -140,7 +140,7 @@ This is particularly handy when we are trying to stop something when the page is -```js name="useFocusEffect hook" snack version=7 +```js name="useFocusEffect hook" snack import * as React from 'react'; import { View } from 'react-native'; import { @@ -187,7 +187,7 @@ export default function App() { -```js name="useFocusEffect hook" snack version=7 +```js name="useFocusEffect hook" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer, useFocusEffect } from '@react-navigation/native'; @@ -245,7 +245,7 @@ The `useIsFocused` hook will cause our component to re-render when we focus and -```js name="useIsFocused hook" snack version=7 +```js name="useIsFocused hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { useIsFocused, createStaticNavigation } from '@react-navigation/native'; @@ -287,7 +287,7 @@ export default function App() { -```js name="useIsFocused hook" snack version=7 +```js name="useIsFocused hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer, useIsFocused } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/group.md b/versioned_docs/version-7.x/group.md index 4700aa0a789..eecb2620ac7 100644 --- a/versioned_docs/version-7.x/group.md +++ b/versioned_docs/version-7.x/group.md @@ -14,7 +14,7 @@ A group contains several [screens](screen.md) inside a navigator for organizatio Groups can be defined using the `groups` property in the navigator configuration: -```js name="Stack groups" snack version=7 +```js name="Stack groups" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -82,7 +82,7 @@ The keys of the `groups` object (e.g. `Guest`, `User`) are used as the [`navigat A `Group` component is returned from a `createXNavigator` function. After creating the navigator, it can be used as children of the `Navigator` component: -```js name="Stack groups" snack version=7 +```js name="Stack groups" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/handling-safe-area.md b/versioned_docs/version-7.x/handling-safe-area.md index 216bdd69b86..6d5ced2dcf7 100755 --- a/versioned_docs/version-7.x/handling-safe-area.md +++ b/versioned_docs/version-7.x/handling-safe-area.md @@ -45,7 +45,7 @@ For example, if I render nothing for the `header` or `tabBar`, nothing renders -```js name="Hidden components" snack version=7 +```js name="Hidden components" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -103,7 +103,7 @@ export default function App() { -```js name="Hidden components" snack version=7 +```js name="Hidden components" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -160,7 +160,7 @@ To fix this issue you can apply safe area insets on your content. This can be ac -```js name="Safe area example" snack version=7 +```js name="Safe area example" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -234,7 +234,7 @@ export default function App() { -```js name="Safe area example" snack version=7 +```js name="Safe area example" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -330,7 +330,7 @@ In some cases you might need more control over which paddings are applied. For e -```js name="useSafeAreaInsets hook" snack version=7 +```js name="useSafeAreaInsets hook" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -402,7 +402,7 @@ export default function App() { -```js name="useSafeAreaInsets hook" snack version=7 +```js name="useSafeAreaInsets hook" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md index 41b88af88ad..025baecf061 100755 --- a/versioned_docs/version-7.x/header-buttons.md +++ b/versioned_docs/version-7.x/header-buttons.md @@ -16,7 +16,7 @@ The most common way to interact with a header is by tapping on a button either t -```js name="Header button" snack version=7 +```js name="Header button" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -58,7 +58,7 @@ export default function App() { -```js name="Header button" snack version=7 +```js name="Header button" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -124,7 +124,7 @@ In some cases, components in the header need to interact with the screen compone -```js name="Header button" snack version=7 +```js name="Header button" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -178,7 +178,7 @@ export default function App() { -```js name="Header button" snack version=7 +```js name="Header button" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/headers.md b/versioned_docs/version-7.x/headers.md index 38d332e2b93..9bfd242ea5e 100755 --- a/versioned_docs/version-7.x/headers.md +++ b/versioned_docs/version-7.x/headers.md @@ -16,7 +16,7 @@ Each screen has `options` which is either an object or a function that returns a -```js name="Setting header title" snack version=7 +```js name="Setting header title" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -55,7 +55,7 @@ export default function App() { -```js name="Setting header title" snack version=7 +```js name="Setting header title" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -110,7 +110,7 @@ In order to use params in the title, we need to make `options` for the screen a -```js name="Using params in the title" snack version=7 +```js name="Using params in the title" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -177,7 +177,7 @@ export default function App() { -```js name="Using params in the title" snack version=7 +```js name="Using params in the title" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -258,7 +258,7 @@ We only needed the `route` object in the above example but you may in some cases It's often necessary to update the `options` configuration for the active screen from the mounted screen component itself. We can do this using `navigation.setOptions` -```js name="Updating options" snack version=7 +```js name="Updating options" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -317,7 +317,7 @@ There are three key properties to use when customizing the style of your header: -```js name="Header styles" snack version=7 +```js name="Header styles" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -363,7 +363,7 @@ export default function App() { -```js name="Header styles" snack version=7 +```js name="Header styles" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -430,7 +430,7 @@ It is common to want to configure the header in a similar way across many screen -```js name="Common screen options" snack version=7 +```js name="Common screen options" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -495,7 +495,7 @@ export default function App() { -```js name="Common screen options" snack version=7 +```js name="Common screen options" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -573,7 +573,7 @@ Sometimes you need more control than just changing the text and styles of your t -```js name="Custom title" snack version=7 +```js name="Custom title" snack import * as React from 'react'; import { Text, View, Image } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -620,7 +620,7 @@ export default function App() { -```js name="Custom title" snack version=7 +```js name="Custom title" snack import * as React from 'react'; import { Text, View, Image } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/hello-react-navigation.md b/versioned_docs/version-7.x/hello-react-navigation.md index f7c8d6a102a..666056ea09c 100755 --- a/versioned_docs/version-7.x/hello-react-navigation.md +++ b/versioned_docs/version-7.x/hello-react-navigation.md @@ -44,7 +44,7 @@ npm install @react-navigation/elements@next `createStaticNavigation` is a function that takes the navigator defined earlier and returns a component that can be rendered in the app. It's only called once in the app. -```js name="Native Stack Example" snack version=7 +```js name="Native Stack Example" snack // In App.js in a new project import * as React from 'react'; @@ -80,7 +80,7 @@ export default function App() { `NavigationContainer` is a component that manages our navigation tree and contains the [navigation state](navigation-state.md). This component must wrap all the navigators in the app. Usually, we'd render this component at the root of our app, which is usually the component exported from `App.js`. -```js name="Native Stack Example" snack version=7 +```js name="Native Stack Example" snack // In App.js in a new project import * as React from 'react'; @@ -137,7 +137,7 @@ Let's add a second screen to our native stack navigator and configure the `Home` -```js name="Native Stack Example" snack version=7 +```js name="Native Stack Example" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -182,7 +182,7 @@ Now our stack has two _routes_, a `Home` route and a `Details` route. A route ca -```js name="Native Stack Example" snack version=7 +```js name="Native Stack Example" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -266,7 +266,7 @@ This will let us specify additional options for the screen. Now, we can add an `options` property: -```js name="Options for Screen" snack version=7 +```js name="Options for Screen" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -314,7 +314,7 @@ export default function App() { Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can add a `screenOptions` property to the configuration: -```js name="Common options for Screens" snack version=7 +```js name="Common options for Screens" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -368,7 +368,7 @@ export default function App() { Any customization options can be passed in the `options` prop for each screen component: -```js name="Options for Screen" snack version=7 +```js name="Options for Screen" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -419,7 +419,7 @@ export default function App() { Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can pass a `screenOptions` prop to the navigator: -```js name="Common options for Screens" snack version=7 +```js name="Common options for Screens" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md index 13e10307160..345d36b62db 100644 --- a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md +++ b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md @@ -73,7 +73,7 @@ But if we want to show the tab bar only on the `Home`, `Feed` and `Notifications -```js name="Hiding tabbar" snack version=7 +```js name="Hiding tabbar" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -133,7 +133,7 @@ export default function App() { -```js name="Hiding tabbar" snack version=7 +```js name="Hiding tabbar" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/material-top-tab-navigator.md b/versioned_docs/version-7.x/material-top-tab-navigator.md index ff9fc56264e..db76639c728 100755 --- a/versioned_docs/version-7.x/material-top-tab-navigator.md +++ b/versioned_docs/version-7.x/material-top-tab-navigator.md @@ -47,7 +47,7 @@ To use this navigator, import it from `@react-navigation/material-top-tabs`: -```js name="Material Top Tab Navigator" snack version=7 +```js name="Material Top Tab Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -102,7 +102,7 @@ export default function App() { -```js name="Material Top Tab Navigator" snack version=7 +```js name="Material Top Tab Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md index a2117440a97..b55c05b78d5 100755 --- a/versioned_docs/version-7.x/modal.md +++ b/versioned_docs/version-7.x/modal.md @@ -18,7 +18,7 @@ A modal is like a popup — it usually has a different transition animation, -```js name="Modal" snack version=7 +```js name="Modal" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -110,7 +110,7 @@ export default function App() { -```js name="Modal" snack version=7 +```js name="Modal" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md index c28f98dd1d1..9beb0b01f1c 100644 --- a/versioned_docs/version-7.x/multiple-drawers.md +++ b/versioned_docs/version-7.x/multiple-drawers.md @@ -291,7 +291,7 @@ Here we have 2 drawer navigators nested inside each other, one is positioned on -```js name="Multiple drawers" snack version=7 +```js name="Multiple drawers" snack import * as React from 'react'; import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -340,7 +340,7 @@ export default function App() { -```js name="Multiple drawers" snack version=7 +```js name="Multiple drawers" snack import * as React from 'react'; import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -413,7 +413,7 @@ The final code would look like this: -```js name="Multiple drawers navigators" snack version=7 +```js name="Multiple drawers navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -478,7 +478,7 @@ export default function App() { -```js name="Multiple drawers navigators" snack version=7 +```js name="Multiple drawers navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index cc9ee8cf193..fda80e8ebe8 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -33,7 +33,7 @@ To use this navigator, import it from `@react-navigation/native-stack`: -```js name="Native Stack Navigator" snack version=7 +```js name="Native Stack Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -85,7 +85,7 @@ export default function App() { -```js name="Native Stack Navigator" snack version=7 +```js name="Native Stack Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/navigating-without-navigation-prop.md b/versioned_docs/version-7.x/navigating-without-navigation-prop.md index cc86f7e20d8..e01cb26729f 100755 --- a/versioned_docs/version-7.x/navigating-without-navigation-prop.md +++ b/versioned_docs/version-7.x/navigating-without-navigation-prop.md @@ -81,7 +81,7 @@ Then, in any of your javascript modules, import the `RootNavigation` and call fu -```js name="Using navigate in any js module" snack version=7 +```js name="Using navigate in any js module" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -144,7 +144,7 @@ export default function App() { -```js name="Using navigate in any js module" snack version=7 +```js name="Using navigate in any js module" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -241,7 +241,7 @@ To avoid this, you can use the `isReady()` method available on the ref as shown -```js name="Handling navigation init" snack version=7 +```js name="Handling navigation init" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -299,7 +299,7 @@ export default function App() { -```js name="Handling navigation init" snack version=7 +```js name="Handling navigation init" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/navigating.md b/versioned_docs/version-7.x/navigating.md index b5c8b1ad59c..92126972637 100755 --- a/versioned_docs/version-7.x/navigating.md +++ b/versioned_docs/version-7.x/navigating.md @@ -28,7 +28,7 @@ We'll do something similar to the latter, but rather than using a `window.locati ## Navigating to a new screen -```js name="Navigating to a new screen" snack version=7 +```js name="Navigating to a new screen" snack // codeblock-focus-start import * as React from 'react'; import { View, Text } from 'react-native'; @@ -100,7 +100,7 @@ So we now have a stack with two routes: 1) the `Home` route 2) the `Details` rou ## Navigate to a screen multiple times -```js name="Navigate to a screen multiple times" snack version=7 +```js name="Navigate to a screen multiple times" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -159,7 +159,7 @@ If you run this code, you'll notice that when you tap "Go to Details... again", Let's suppose that we actually _want_ to add another details screen. This is pretty common in cases where you pass in some unique data to each route (more on that later when we talk about `params`!). To do this, we can change `navigate` to `push`. This allows us to express the intent to add another route regardless of the existing navigation history. -```js name="Navigate to a screen multiple times" snack version=7 +```js name="Navigate to a screen multiple times" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -224,7 +224,7 @@ The header provided by the native stack navigator will automatically include a b Sometimes you'll want to be able to programmatically trigger this behavior, and for that, you can use `navigation.goBack()`. -```js name="Going back" snack version=7 +```js name="Going back" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -292,7 +292,7 @@ On Android, React Navigation hooks in to the hardware back button and fires the Another common requirement is to be able to go back _multiple_ screens -- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we know that we want to go back to `Home` so we can use `popTo('Home')`. Another alternative would be `navigation.popToTop()`, which goes back to the first screen in the stack. -```js name="Going back to specific screen" snack version=7 +```js name="Going back to specific screen" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/navigation-actions.md b/versioned_docs/version-7.x/navigation-actions.md index 8ba28708a20..5475e41ea61 100755 --- a/versioned_docs/version-7.x/navigation-actions.md +++ b/versioned_docs/version-7.x/navigation-actions.md @@ -32,7 +32,7 @@ The `navigate` action allows to navigate to a specific route. It takes the follo -```js name="Common actions navigate" snack version=7 +```js name="Common actions navigate" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -154,7 +154,7 @@ export default function App() { -```js name="Common actions navigate" snack version=7 +```js name="Common actions navigate" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -299,7 +299,7 @@ The `reset` action allows to reset the [navigation state](navigation-state.md) t -```js name="Common actions reset" snack version=7 +```js name="Common actions reset" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -421,7 +421,7 @@ export default function App() { -```js name="Common actions reset" snack version=7 +```js name="Common actions reset" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -590,7 +590,7 @@ The `goBack` action creator allows to go back to the previous route in history. -```js name="Common actions goBack" snack version=7 +```js name="Common actions goBack" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -716,7 +716,7 @@ export default function App() { -```js name="Common actions goBack" snack version=7 +```js name="Common actions goBack" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -852,7 +852,7 @@ If you want to go back from a particular route, you can add a `source` property -```js name="Common actions goBack" snack version=7 +```js name="Common actions goBack" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -974,7 +974,7 @@ export default function App() { -```js name="Common actions goBack" snack version=7 +```js name="Common actions goBack" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1109,7 +1109,7 @@ The `preload` action allows preloading a screen in the background before navigat -```js name="Common actions preload" snack version=7 +```js name="Common actions preload" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -1205,7 +1205,7 @@ export default function App() { -```js name="Common actions preload" snack version=7 +```js name="Common actions preload" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -1351,7 +1351,7 @@ The `setParams` action allows to update params for a certain route. It takes the -```js name="Common actions setParams" snack version=7 +```js name="Common actions setParams" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1473,7 +1473,7 @@ export default function App() { -```js name="Common actions setParams" snack version=7 +```js name="Common actions setParams" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1601,7 +1601,7 @@ If you want to set params for a particular route, you can add a `source` propert -```js name="Common actions setParams" snack version=7 +```js name="Common actions setParams" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1723,7 +1723,7 @@ export default function App() { -```js name="Common actions setParams" snack version=7 +```js name="Common actions setParams" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index 039d58d6e79..e4f7e7125ad 100644 --- a/versioned_docs/version-7.x/navigation-container.md +++ b/versioned_docs/version-7.x/navigation-container.md @@ -69,7 +69,7 @@ Example: -```js name="Using refs" snack version=7 +```js name="Using refs" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -118,7 +118,7 @@ export default function App() { -```js name="Using refs" snack version=7 +```js name="Using refs" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/navigation-context.md b/versioned_docs/version-7.x/navigation-context.md index 3b57228a98f..90db5663241 100755 --- a/versioned_docs/version-7.x/navigation-context.md +++ b/versioned_docs/version-7.x/navigation-context.md @@ -16,7 +16,7 @@ Example: -```js name="Navigation context" snack version=7 +```js name="Navigation context" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -80,7 +80,7 @@ export default App; -```js name="Navigation context" snack version=7 +```js name="Navigation context" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/navigation-events.md b/versioned_docs/version-7.x/navigation-events.md index 284bd8d15d9..279b918b801 100644 --- a/versioned_docs/version-7.x/navigation-events.md +++ b/versioned_docs/version-7.x/navigation-events.md @@ -104,7 +104,7 @@ Normally, you'd add an event listener in `React.useEffect` for function componen -```js name="navigation.addListener with focus" snack version=7 +```js name="navigation.addListener with focus" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -176,7 +176,7 @@ export default function App() { -```js name="navigation.addListener with focus" snack version=7 +```js name="navigation.addListener with focus" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/navigation-lifecycle.md b/versioned_docs/version-7.x/navigation-lifecycle.md index 0fd30bf096c..4119652a4e4 100755 --- a/versioned_docs/version-7.x/navigation-lifecycle.md +++ b/versioned_docs/version-7.x/navigation-lifecycle.md @@ -24,7 +24,7 @@ Similar results can be observed (in combination) with other navigators as well. -```js name="Navigation lifecycle" snack version=7 +```js name="Navigation lifecycle" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -147,7 +147,7 @@ export default function App() { -```js name="Navigation lifecycle" snack version=7 +```js name="Navigation lifecycle" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -293,7 +293,7 @@ Example: -```js name="Focus and blur" snack version=7 +```js name="Focus and blur" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -381,7 +381,7 @@ export default function App() { -```js name="Focus and blur" snack version=7 +```js name="Focus and blur" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -481,7 +481,7 @@ Example: -```js name="Focus effect" snack version=7 +```js name="Focus effect" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -547,7 +547,7 @@ export default function App() { -```js name="Focus effect" snack version=7 +```js name="Focus effect" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/navigation-object.md b/versioned_docs/version-7.x/navigation-object.md index b11d6def137..a2c804e4db0 100755 --- a/versioned_docs/version-7.x/navigation-object.md +++ b/versioned_docs/version-7.x/navigation-object.md @@ -80,7 +80,7 @@ The `navigate` method lets us navigate to another screen in your app. It takes t -```js name="Navigate method" snack version=7 +```js name="Navigate method" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -162,7 +162,7 @@ export default App; -```js name="Navigate method" snack version=7 +```js name="Navigate method" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -298,7 +298,7 @@ By default, `goBack` will go back from the screen that it is called from: -```js name="Navigate method" snack version=7 +```js name="Navigate method" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -379,7 +379,7 @@ export default App; -```js name="Navigate method" snack version=7 +```js name="Navigate method" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -463,7 +463,7 @@ The `reset` method lets us replace the navigator state with a new state: -```js name="Navigate - replace and reset" snack version=7 +```js name="Navigate - replace and reset" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -602,7 +602,7 @@ export default App; -```js name="Navigate - replace and reset" snack version=7 +```js name="Navigate - replace and reset" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -756,7 +756,7 @@ The `preload` method allows preloading a screen in the background before navigat -```js name="Common actions preload" snack version=7 +```js name="Common actions preload" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -849,7 +849,7 @@ export default function App() { -```js name="Common actions preload" snack version=7 +```js name="Common actions preload" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -990,7 +990,7 @@ The `setParams` method lets us update the params (`route.params`) of the current -```js name="Navigate - setParams" snack version=7 +```js name="Navigate - setParams" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -1092,7 +1092,7 @@ export default App; -```js name="Navigate - setParams" snack version=7 +```js name="Navigate - setParams" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -1198,7 +1198,7 @@ The `setOptions` method lets us set screen options from within the component. Th -```js name="Navigate - setOptions" snack version=7 +```js name="Navigate - setOptions" snack import * as React from 'react'; import { View, Text, TextInput } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1288,7 +1288,7 @@ export default App; -```js name="Navigate - setOptions" snack version=7 +```js name="Navigate - setOptions" snack import * as React from 'react'; import { View, Text, TextInput } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1390,7 +1390,7 @@ Screens can add listeners on the `navigation` object with the `addListener` meth -```js name="Navigation events" snack version=7 +```js name="Navigation events" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1469,7 +1469,7 @@ export default function App() { -```js name="Navigation events" snack version=7 +```js name="Navigation events" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index 31f485a2857..a1537b215ab 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -12,7 +12,7 @@ Nesting navigators means rendering a navigator inside a screen of another naviga -```js name="Nested navigators" snack version=7 +```js name="Nested navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -84,7 +84,7 @@ export default function App() { -```js name="Nested navigators" snack version=7 +```js name="Nested navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -216,7 +216,7 @@ To receive events from the parent navigator, you can explicitly listen to parent -```js name="Events from parent" snack version=7 +```js name="Events from parent" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -301,7 +301,7 @@ export default function App() { -```js name="Events from parent" snack version=7 +```js name="Events from parent" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -410,7 +410,7 @@ Consider the following example: -```js name="Navigating to nested screen" snack version=7 +```js name="Navigating to nested screen" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -490,7 +490,7 @@ export default function App() { -```js name="Navigating to nested screen" snack version=7 +```js name="Navigating to nested screen" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -596,7 +596,7 @@ You can also pass params by specifying a `params` key: -```js name="Navigating to nested screen" snack version=7 +```js name="Navigating to nested screen" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -682,7 +682,7 @@ export default function App() { -```js name="Navigating to nested screen" snack version=7 +```js name="Navigating to nested screen" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -817,7 +817,7 @@ For example: -```js name="Nested navigators" snack version=7 +```js name="Nested navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -889,7 +889,7 @@ export default function App() { -```js name="Nested navigators" snack version=7 +```js name="Nested navigators" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/params.md b/versioned_docs/version-7.x/params.md index bbdcd87ff97..9f447c584bb 100755 --- a/versioned_docs/version-7.x/params.md +++ b/versioned_docs/version-7.x/params.md @@ -22,7 +22,7 @@ We recommend that the params you pass are JSON-serializable. That way, you'll be ::: -```js name="Passing params" snack version=7 +```js name="Passing params" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { @@ -145,7 +145,7 @@ Screens can also update their params, like they can update their state. The `nav Basic usage: -```js name="Updating params" snack version=7 +```js name="Updating params" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -207,7 +207,7 @@ Params aren't only useful for passing some data to a new screen, but they can al To achieve this, you can use the `popTo` method to go back to the previous screen as well as pass params to it: -```js name="Passing params back" snack version=7 +```js name="Passing params back" snack import * as React from 'react'; import { Text, View, TextInput } from 'react-native'; import { @@ -293,7 +293,7 @@ Here, after you press "Done", the home screen's `route.params` will be updated t If you have nested navigators, you need to pass params a bit differently. For example, say you have a navigator inside the `More` screen and want to pass params to the `Settings` screen inside that navigator. Then you can pass params as the following: -```js name="Passing params to nested screen" snack version=7 +```js name="Passing params to nested screen" snack import * as React from 'react'; import { Text, View, TextInput } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/route-object.md b/versioned_docs/version-7.x/route-object.md index 67a551d0e09..346af1b4ed1 100755 --- a/versioned_docs/version-7.x/route-object.md +++ b/versioned_docs/version-7.x/route-object.md @@ -18,7 +18,7 @@ Each `screen` component in your app is provided with the `route` object as a pro -```js name="Route prop" snack version=7 +```js name="Route prop" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -51,7 +51,7 @@ export default function App() { -```js name="Route prop" snack version=7 +```js name="Route prop" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/screen-options-resolution.md b/versioned_docs/version-7.x/screen-options-resolution.md index 09576813155..1a97af4543a 100755 --- a/versioned_docs/version-7.x/screen-options-resolution.md +++ b/versioned_docs/version-7.x/screen-options-resolution.md @@ -16,7 +16,7 @@ Let's take for example a tab navigator that contains a native stack in each tab. -```js name="Tabs with native stack" snack version=7 +```js name="Tabs with native stack" snack import * as React from 'react'; import { View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -72,7 +72,7 @@ export default function App() { -```js name="Tabs with native stack" snack version=7 +```js name="Tabs with native stack" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -136,7 +136,7 @@ As we mentioned earlier, you can only modify navigation options for a navigator -```js name="Tabs with native stack" snack version=7 +```js name="Tabs with native stack" snack import * as React from 'react'; import { View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -192,7 +192,7 @@ export default function App() { -```js name="Tabs with native stack" snack version=7 +```js name="Tabs with native stack" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -261,7 +261,7 @@ Imagine the following configuration: -```js name="Parent options from a child" snack version=7 +```js name="Parent options from a child" snack import * as React from 'react'; import { View } from 'react-native'; import { @@ -323,7 +323,7 @@ export default function App() { -```js name="Parent options from a child" snack version=7 +```js name="Parent options from a child" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -416,7 +416,7 @@ Then we can use this function with the `options` prop on `Screen`: -```js name="Parent options from a child" snack version=7 +```js name="Parent options from a child" snack import * as React from 'react'; import { View } from 'react-native'; import { getFocusedRouteNameFromRoute } from '@react-navigation/native'; @@ -503,7 +503,7 @@ export default function App() { -```js name="Parent options from a child" snack version=7 +```js name="Parent options from a child" snack import * as React from 'react'; import { View } from 'react-native'; import { @@ -607,7 +607,7 @@ For example, for the above use case, instead of adding a tab navigator inside a -```js name="Reorganized navigators" snack version=7 +```js name="Reorganized navigators" snack import * as React from 'react'; import { View } from 'react-native'; import { @@ -678,7 +678,7 @@ export default function App() { -```js name="Reorganized navigators" snack version=7 +```js name="Reorganized navigators" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md index 7289b60efbf..34c8a35f3c7 100644 --- a/versioned_docs/version-7.x/screen-options.md +++ b/versioned_docs/version-7.x/screen-options.md @@ -20,7 +20,7 @@ You can pass a prop named `options` to the `Screen` component to configure a scr -```js name="Screen title option" snack version=7 +```js name="Screen title option" snack import * as React from 'react'; import { View, Text } from 'react-native'; import Button from '@react-navigation/elements'; @@ -83,7 +83,7 @@ export default function App() { -```js name="Screen title option" snack version=7 +```js name="Screen title option" snack import * as React from 'react'; import { View, Text } from 'react-native'; import Button from '@react-navigation/elements'; @@ -190,7 +190,7 @@ Example: -```js name="Screen options for group" snack version=7 +```js name="Screen options for group" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -251,7 +251,7 @@ export default function App() { -```js name="Screen options for group" snack version=7 +```js name="Screen options for group" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -398,7 +398,7 @@ Similar to `options`, you can also pass a function to `screenOptions`. The funct -```js name="Screen options for tab navigator" snack version=7 dependencies=@expo/vector-icons +```js name="Screen options for tab navigator" snack dependencies=@expo/vector-icons import * as React from 'react'; import { View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -444,7 +444,7 @@ export default function App() { -```js name="Screen options for tab navigator" snack version=7 dependencies=@expo/vector-icons +```js name="Screen options for tab navigator" snack dependencies=@expo/vector-icons import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/screen-tracking.md b/versioned_docs/version-7.x/screen-tracking.md index a065172e1b6..26e6a0970ec 100644 --- a/versioned_docs/version-7.x/screen-tracking.md +++ b/versioned_docs/version-7.x/screen-tracking.md @@ -21,7 +21,7 @@ This example shows how the approach can be adapted to any mobile analytics SDK. -```js name="Screen tracking for analytics" snack version=7 +```js name="Screen tracking for analytics" snack import * as React from 'react'; import { View } from 'react-native'; // codeblock-focus-start @@ -101,7 +101,7 @@ export default function App() { -```js name="Screen tracking for anylytics" snack version=7 +```js name="Screen tracking for anylytics" snack import * as React from 'react'; import { View } from 'react-native'; // codeblock-focus-start diff --git a/versioned_docs/version-7.x/stack-actions.md b/versioned_docs/version-7.x/stack-actions.md index e1f6ff6abd3..93fa71ec3a6 100755 --- a/versioned_docs/version-7.x/stack-actions.md +++ b/versioned_docs/version-7.x/stack-actions.md @@ -21,7 +21,7 @@ The `replace` action allows to replace a route in the [navigation state](navigat -```js name="Stack actions replace" snack version=7 +```js name="Stack actions replace" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -99,7 +99,7 @@ export default function App() { -```js name="Stack actions replace" snack version=7 +```js name="Stack actions replace" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -201,7 +201,7 @@ The `push` action adds a route on top of the stack and navigates forward to it. -```js name="Stack actions push" snack version=7 +```js name="Stack actions push" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -279,7 +279,7 @@ export default function App() { -```js name="Stack actions push" snack version=7 +```js name="Stack actions push" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -362,7 +362,7 @@ The `pop` action takes you back to a previous screen in the stack. It takes one -```js name="Stack actions pop" snack version=7 +```js name="Stack actions pop" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -444,7 +444,7 @@ export default function App() { -```js name="Stack actions pop" snack version=7 +```js name="Stack actions pop" snack import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -550,7 +550,7 @@ The `popToTop` action takes you back to the first screen in the stack, dismissin -```js name="Stack actions popToTop" snack version=7 +```js name="Stack actions popToTop" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -632,7 +632,7 @@ export default function App() { -```js name="Stack actions pop" snack version=7 +```js name="Stack actions pop" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md index 03e47978c9b..51995bbd390 100755 --- a/versioned_docs/version-7.x/stack-navigator.md +++ b/versioned_docs/version-7.x/stack-navigator.md @@ -94,7 +94,7 @@ To use this navigator, import it from `@react-navigation/stack`: -```js name="Stack Navigator" snack version=7 +```js name="Stack Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { @@ -146,7 +146,7 @@ export default function App() { -```js name="Stack Navigator" snack version=7 +```js name="Stack Navigator" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/state-persistence.md b/versioned_docs/version-7.x/state-persistence.md index a05b85873d1..e0a2a2800e4 100755 --- a/versioned_docs/version-7.x/state-persistence.md +++ b/versioned_docs/version-7.x/state-persistence.md @@ -21,7 +21,7 @@ To be able to persist the [navigation state](navigation-state.md), we can use th -```js name="Persisting the navigation state" snack version=7 dependencies=@react-native-async-storage/async-storage +```js name="Persisting the navigation state" snack dependencies=@react-native-async-storage/async-storage import * as React from 'react'; // codeblock-focus-start import { Platform, View, Linking } from 'react-native'; @@ -146,7 +146,7 @@ export default function App() { -```js name="Persisting the navigation state" snack version=7 dependencies=@react-native-async-storage/async-storage +```js name="Persisting the navigation state" snack dependencies=@react-native-async-storage/async-storage import * as React from 'react'; // codeblock-focus-start import { Platform, View, Linking } from 'react-native'; diff --git a/versioned_docs/version-7.x/status-bar.md b/versioned_docs/version-7.x/status-bar.md index ecb89a1666d..109ad679ac6 100755 --- a/versioned_docs/version-7.x/status-bar.md +++ b/versioned_docs/version-7.x/status-bar.md @@ -16,7 +16,7 @@ This is a simple task when using a stack. You can render the `StatusBar` compone -```js name="Different status bar" snack version=7 +```js name="Different status bar" snack import * as React from 'react'; import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { @@ -108,7 +108,7 @@ const styles = StyleSheet.create({ -```js name="Different status bar" snack version=7 +```js name="Different status bar" snack import * as React from 'react'; import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; @@ -235,7 +235,7 @@ Now, our screens (both `Screen1.js` and `Screen2.js`) will use the `FocusAwareSt -```js name="Different status bar based on tabs" snack version=7 +```js name="Different status bar based on tabs" snack import * as React from 'react'; import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { useIsFocused } from '@react-navigation/native'; @@ -335,7 +335,7 @@ const styles = StyleSheet.create({ -```js name="Different status bar based on tabs" snack version=7 +```js name="Different status bar based on tabs" snack import * as React from 'react'; import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { useIsFocused } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/tab-actions.md b/versioned_docs/version-7.x/tab-actions.md index 090af587ad9..3e8fd06add7 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 +```js name="Tab Actions - jumpTo" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -80,7 +80,7 @@ export default function App() { -```js name="Tab Actions - jumpTo" snack version=7 +```js name="Tab Actions - jumpTo" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md index 3ca2ecc9aef..3bde9197125 100755 --- a/versioned_docs/version-7.x/tab-based-navigation.md +++ b/versioned_docs/version-7.x/tab-based-navigation.md @@ -17,7 +17,7 @@ npm install @react-navigation/bottom-tabs@next -```js name="Tab based navigation" snack version=7 +```js name="Tab based navigation" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -56,7 +56,7 @@ export default function App() { -```js name="Tab based navigation" snack version=7 +```js name="Tab based navigation" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -110,7 +110,7 @@ This is similar to how you would customize a stack navigator — there are s -```js name="Tab based navigation" snack version=7 dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons +```js name="Tab based navigation" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -177,7 +177,7 @@ export default function App() { -```js name="Tab based navigation" snack version=7 dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons +```js name="Tab based navigation" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; @@ -264,7 +264,7 @@ Sometimes we want to add badges to some icons. You can use the [`tabBarBadge` op -```js name="Tab based navigation" snack version=7 +```js name="Tab based navigation" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -312,7 +312,7 @@ export default function App() { -```js name="Tab based navigation" snack version=7 +```js name="Tab based navigation" snack import * as React from 'react'; import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/tab-view.md b/versioned_docs/version-7.x/tab-view.md index 154535e6fee..7250ec4f126 100644 --- a/versioned_docs/version-7.x/tab-view.md +++ b/versioned_docs/version-7.x/tab-view.md @@ -40,7 +40,7 @@ We're done! Now you can build and run the app on your device/simulator. ## Quick start -```js name="React Native Tab View" snack version=7 +```js name="React Native Tab View" snack // codeblock-focus-start import * as React from 'react'; import { View, useWindowDimensions } from 'react-native'; diff --git a/versioned_docs/version-7.x/themes.md b/versioned_docs/version-7.x/themes.md index fe5081a1936..c4e3647aa15 100755 --- a/versioned_docs/version-7.x/themes.md +++ b/versioned_docs/version-7.x/themes.md @@ -19,7 +19,7 @@ To pass a custom theme, you can pass the `theme` prop to the navigation containe -```js name="Simple theme" snack version=7 +```js name="Simple theme" snack // codeblock-focus-start import * as React from 'react'; import { @@ -116,7 +116,7 @@ export default function App() { -```js name="Simple theme" snack version=7 +```js name="Simple theme" snack // codeblock-focus-start import * as React from 'react'; import { @@ -361,7 +361,7 @@ On iOS 13+ and Android 10+, you can get user's preferred color scheme (`'dark'` -```js name="Operating system color theme" snack version=7 +```js name="Operating system color theme" snack import * as React from 'react'; // codeblock-focus-start import { @@ -470,7 +470,7 @@ export default function App() { -```js name="Operating system color theme" snack version=7 +```js name="Operating system color theme" snack import * as React from 'react'; // codeblock-focus-start import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; @@ -589,7 +589,7 @@ To gain access to the theme in any component that is rendered inside the navigat -```js name="System themes" snack version=7 +```js name="System themes" snack import * as React from 'react'; // codeblock-focus-start import { @@ -696,7 +696,7 @@ export default function App() { -```js name="System themes" snack version=7 +```js name="System themes" snack import * as React from 'react'; // codeblock-focus-start import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; diff --git a/versioned_docs/version-7.x/use-focus-effect.md b/versioned_docs/version-7.x/use-focus-effect.md index b6c7a5b1527..4355798290b 100755 --- a/versioned_docs/version-7.x/use-focus-effect.md +++ b/versioned_docs/version-7.x/use-focus-effect.md @@ -14,7 +14,7 @@ To make this easier, the library exports a `useFocusEffect` hook: -```js name="useFocusEffect hook" snack version=7 +```js name="useFocusEffect hook" snack import * as React from 'react'; import { View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -58,7 +58,7 @@ export default function App() { -```js name="useFocusEffect hook" snack version=7 +```js name="useFocusEffect hook" snack import * as React from 'react'; import { View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/use-is-focused.md b/versioned_docs/version-7.x/use-is-focused.md index 73e03e44b06..0f874dbccc8 100755 --- a/versioned_docs/version-7.x/use-is-focused.md +++ b/versioned_docs/version-7.x/use-is-focused.md @@ -12,7 +12,7 @@ We might want to render different content based on the current focus state of th -```js name="useIsFocused hook" snack version=7 +```js name="useIsFocused hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; @@ -54,7 +54,7 @@ export default function App() { -```js name="useIsFocused hook" snack version=7 +```js name="useIsFocused hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/use-navigation-state.md b/versioned_docs/version-7.x/use-navigation-state.md index fa66274eb3f..909445d16b4 100755 --- a/versioned_docs/version-7.x/use-navigation-state.md +++ b/versioned_docs/version-7.x/use-navigation-state.md @@ -50,7 +50,7 @@ In this example, even if you push a new screen, this text won't update. If you u -```js name="useNavigation hook" snack version=7 +```js name="useNavigation hook" snack import * as React from 'react'; import Button from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -144,7 +144,7 @@ export default function App() { -```js name="useNavigationState hook" snack version=7 +```js name="useNavigationState hook" snack import * as React from 'react'; import Button from '@react-navigation/elements'; import { View, Text } from 'react-native'; diff --git a/versioned_docs/version-7.x/use-navigation.md b/versioned_docs/version-7.x/use-navigation.md index 7c994cc0a2f..cc30ac0b581 100755 --- a/versioned_docs/version-7.x/use-navigation.md +++ b/versioned_docs/version-7.x/use-navigation.md @@ -14,7 +14,7 @@ The `useNavigation` hook returns the `navigation` object of the screen where it' -```js name="useNavigation hook" snack version=7 +```js name="useNavigation hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -81,7 +81,7 @@ export default App; -```js name="useNavigation hook" snack version=7 +```js name="useNavigation hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/use-prevent-remove.md b/versioned_docs/version-7.x/use-prevent-remove.md index faef9c9495d..d13b5af31f3 100644 --- a/versioned_docs/version-7.x/use-prevent-remove.md +++ b/versioned_docs/version-7.x/use-prevent-remove.md @@ -21,7 +21,7 @@ Example: -```js name="usePreventRemove hook" snack version=7 +```js name="usePreventRemove hook" snack import * as React from 'react'; import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native'; import { @@ -130,7 +130,7 @@ const styles = StyleSheet.create({ -```js name="usePreventRemove hook" snack version=7 +```js name="usePreventRemove hook" snack import * as React from 'react'; import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/use-route.md b/versioned_docs/version-7.x/use-route.md index 22ea8c3effa..2a3ecba8744 100755 --- a/versioned_docs/version-7.x/use-route.md +++ b/versioned_docs/version-7.x/use-route.md @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; -```js name="useRoute hook" snack version=7 +```js name="useRoute hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -82,7 +82,7 @@ export default App; -```js name="useRoute hook" snack version=7 +```js name="useRoute hook" snack import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; diff --git a/versioned_docs/version-7.x/use-scroll-to-top.md b/versioned_docs/version-7.x/use-scroll-to-top.md index 23b353c8b4c..02e89c808bf 100755 --- a/versioned_docs/version-7.x/use-scroll-to-top.md +++ b/versioned_docs/version-7.x/use-scroll-to-top.md @@ -16,7 +16,7 @@ Example: -```js name="useScrollToTop hook" snack version=7 +```js name="useScrollToTop hook" snack import * as React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStaticNavigation } from '@react-navigation/native'; @@ -80,7 +80,7 @@ export default function App() { -```js name="useScrollToTop hook" snack version=7 +```js name="useScrollToTop hook" snack import * as React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { View, Image } from 'react-native'; @@ -174,7 +174,7 @@ If you require offset to scroll position you can wrap and decorate passed refere -```js name="useScrollToTop hook - providing scroll offset" snack version=7 +```js name="useScrollToTop hook - providing scroll offset" snack import * as React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { View, Image } from 'react-native'; @@ -244,7 +244,7 @@ export default function App() { -```js name="useScrollToTop hook - providing scroll offset" snack version=7 +```js name="useScrollToTop hook - providing scroll offset" snack import * as React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { View, Image } from 'react-native'; diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md index a2f25340d04..9cda3d3e1f5 100644 --- a/versioned_docs/version-7.x/use-theme.md +++ b/versioned_docs/version-7.x/use-theme.md @@ -12,7 +12,7 @@ The `useTheme` hook lets us access the currently active theme. You can use it in -```js name="useTheme hook" snack version=7 +```js name="useTheme hook" snack import * as React from 'react'; import { useNavigation, @@ -123,7 +123,7 @@ export default function App() { -```js name="useTheme hook" snack version=7 +```js name="useTheme hook" snack import * as React from 'react'; import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; import { diff --git a/versioned_docs/version-7.x/web-support.md b/versioned_docs/version-7.x/web-support.md index 8e9e08ef327..66b0a3d0882 100755 --- a/versioned_docs/version-7.x/web-support.md +++ b/versioned_docs/version-7.x/web-support.md @@ -40,7 +40,7 @@ To reduce the bundle size, you can use [dynamic `import()`](https://developer.mo -```js name="Lazy loading screens" snack version=7 +```js name="Lazy loading screens" snack import { Suspense, lazy } from 'react'; const MyStack = createNativeStackNavigator({ @@ -61,7 +61,7 @@ const MyStack = createNativeStackNavigator({ -```js name="Lazy loading screens" snack version=7 +```js name="Lazy loading screens" snack import { Suspense, lazy } from 'react'; const HomeScreen = lazy(() => import('./HomeScreen'));