From fcb5e31400933b073e648b4c5c8ac9460313170e Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Wed, 28 Feb 2024 17:27:59 +0100 Subject: [PATCH] Fixes to examples --- versioned_docs/version-7.x/auth-flow.md | 15 ++++++------ .../version-7.x/drawer-based-navigation.md | 4 ++-- versioned_docs/version-7.x/elements.md | 4 ++-- versioned_docs/version-7.x/group.md | 4 ++-- .../version-7.x/handling-safe-area.md | 2 +- .../navigating-without-navigation-prop.md | 4 ++-- .../version-7.x/navigation-container.md | 4 ++-- .../version-7.x/navigation-context.md | 4 ++-- .../version-7.x/navigation-object.md | 24 +++++++++---------- versioned_docs/version-7.x/screen-options.md | 8 +++---- versioned_docs/version-7.x/testing.md | 2 +- versioned_docs/version-7.x/themes.md | 4 ++-- 12 files changed, 39 insertions(+), 40 deletions(-) diff --git a/versioned_docs/version-7.x/auth-flow.md b/versioned_docs/version-7.x/auth-flow.md index 8241522d51e..3dc7faa922b 100755 --- a/versioned_docs/version-7.x/auth-flow.md +++ b/versioned_docs/version-7.x/auth-flow.md @@ -33,7 +33,7 @@ We want the following behavior from our authentication flow: We can configure different screens to be available based on some condition. For example, if the user is signed in, we can define `Home`, `Profile`, `Settings` etc. If the user is not signed in, we can define `SignIn` and `SignUp` screens. - + To do this, we need a couple of things: @@ -449,9 +449,9 @@ In our component, we will: So our component will look like this: - + -```js name="Signing in and signing out with AuthContext" snack version=7 +```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store // codeblock-focus-start import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; @@ -625,7 +625,6 @@ const RootStack = createNativeStackNavigator({ screen: SignInScreen, options: { title: 'Sign in', - animationTypeForReplace: state.isSignout ? 'pop' : 'push', }, if: useIsSignedOut, }, @@ -639,7 +638,7 @@ const Navigation = createStaticNavigation(RootStack); -```js name="Signing in and signing out with AuthContext" snack version=7 +```js name="Signing in and signing out with AuthContext" snack version=7 dependencies=expo-secure-store // codeblock-focus-start import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; @@ -843,7 +842,7 @@ You can similarly fill in the other screens according to your requirements. Consider the following example: - + ```js const RootStack = createNativeStackNavigator({ @@ -898,7 +897,7 @@ This can be a problem, we probably want the user to be taken to the `SignIn` scr So our updated code will look like following: - + ```js const RootStack = createNativeStackNavigator({ @@ -957,7 +956,7 @@ const RootStack = createNativeStackNavigator({ If you have a bunch of shared screens, you can also use [`navigationKey` with a `Group`](group.md#navigationkey) to remove all of the screens in the group. For example: - + ```js const RootStack = createNativeStackNavigator({ diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md index ce92c66b188..3673051ab0c 100755 --- a/versioned_docs/version-7.x/drawer-based-navigation.md +++ b/versioned_docs/version-7.x/drawer-based-navigation.md @@ -120,7 +120,7 @@ export default function App() { To open and close drawer, use the following helpers: - + ```js name="Drawer open and close" snack version=7 import * as React from 'react'; @@ -432,7 +432,7 @@ export default function App() { Each of these functions, behind the scenes, are simply dispatching actions: - + ```js name="Navigation dispatcher" snack version=7 import * as React from 'react'; diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 12276cb51e6..a220345143a 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -164,7 +164,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@~12.9.1 +```js name="Header blur" snack version=7 dependencies=expo-blur import * as React from 'react'; import { Button, View, StyleSheet } from 'react-native'; import { @@ -231,7 +231,7 @@ export default App; -```js name="Header blur" snack version=7 dependencies=expo-blur@~12.9.1 +```js name="Header blur" snack version=7 dependencies=expo-blur import * as React from 'react'; import { Button, View, StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/versioned_docs/version-7.x/group.md b/versioned_docs/version-7.x/group.md index 8a70774b705..8a8e3bb98b8 100644 --- a/versioned_docs/version-7.x/group.md +++ b/versioned_docs/version-7.x/group.md @@ -40,7 +40,7 @@ After creating the navigator, it can be used as children of the `Navigator` comp -```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements +```js name="Stack groups" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -105,7 +105,7 @@ export default function App() { -```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements +```js name="Stack groups" snack version=7 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 848fabc84b2..216bdd69b86 100755 --- a/versioned_docs/version-7.x/handling-safe-area.md +++ b/versioned_docs/version-7.x/handling-safe-area.md @@ -328,7 +328,7 @@ To fix this you can, once again, apply safe area insets to your content. This wi In some cases you might need more control over which paddings are applied. For example, you can only apply the top and the bottom padding by changing the `style` object: - + ```js name="useSafeAreaInsets hook" snack version=7 import * as React from 'react'; 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 ae39321d01f..06677284389 100755 --- a/versioned_docs/version-7.x/navigating-without-navigation-prop.md +++ b/versioned_docs/version-7.x/navigating-without-navigation-prop.md @@ -79,7 +79,7 @@ export function navigate(name, params) { Then, in any of your javascript modules, import the `RootNavigation` and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works as well when used from within them. - + ```js name="Using navigate in any js module" snack version=7 import * as React from 'react'; @@ -237,7 +237,7 @@ For an example, consider the following scenario, you have a screen somewhere in To avoid this, you can use the `isReady()` method available on the ref as shown in the above examples. - + ```js name="Handling navigation init" snack version=7 import * as React from 'react'; diff --git a/versioned_docs/version-7.x/navigation-container.md b/versioned_docs/version-7.x/navigation-container.md index 7b1e3a0c839..67e4b1b8bc6 100644 --- a/versioned_docs/version-7.x/navigation-container.md +++ b/versioned_docs/version-7.x/navigation-container.md @@ -67,7 +67,7 @@ Example: -```js name="Using refs" snack version=7 dependencies=@react-navigation/elements +```js name="Using refs" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -115,7 +115,7 @@ export default function App() { -```js name="Using refs" snack version=7 dependencies=@react-navigation/elements +```js name="Using refs" snack version=7 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 5dda95dc526..148d31269cd 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 dependencies=@react-navigation/elements +```js name="Navigation context" snack version=7 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 dependencies=@react-navigation/elements +```js name="Navigation context" snack version=7 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-object.md b/versioned_docs/version-7.x/navigation-object.md index 8ff84e5bc1c..48f2f00e0b9 100755 --- a/versioned_docs/version-7.x/navigation-object.md +++ b/versioned_docs/version-7.x/navigation-object.md @@ -75,7 +75,7 @@ The `navigate` method lets us navigate to another screen in your app. It takes t -```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate method" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -143,7 +143,7 @@ export default App; -```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate method" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -249,7 +249,7 @@ By default, `goBack` will go back from the screen that it is called from: -```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate method" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -316,7 +316,7 @@ export default App; -```js name="Navigate method" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate method" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -380,7 +380,7 @@ The `reset` method lets us replace the navigator state with a new state: -```js name="Navigate - replace and reset" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - replace and reset" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -498,7 +498,7 @@ export default App; -```js name="Navigate - replace and reset" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - replace and reset" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -620,7 +620,7 @@ The `setParams` method lets us update the params (`route.params`) of the current -```js name="Navigate - setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -708,7 +708,7 @@ export default App; -```js name="Navigate - setParams" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - setParams" snack version=7 import * as React from 'react'; import { Button } from '@react-navigation/elements'; import { View, Text } from 'react-native'; @@ -796,7 +796,7 @@ The `setOptions` method lets us set screen options from within the component. Th -```js name="Navigate - setOptions" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - setOptions" snack version=7 import * as React from 'react'; import { View, Text, TextInput } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -872,7 +872,7 @@ export default App; -```js name="Navigate - setOptions" snack version=7 dependencies=@react-navigation/elements +```js name="Navigate - setOptions" snack version=7 import * as React from 'react'; import { View, Text, TextInput } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -957,7 +957,7 @@ Screens can add listeners on the `navigation` object with the `addListener` meth -```js name="Navigation events" snack version=7 dependencies=@react-navigation/elements +```js name="Navigation events" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -1022,7 +1022,7 @@ export default function App() { -```js name="Navigation events" snack version=7 dependencies=@react-navigation/elements +```js name="Navigation events" snack version=7 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/screen-options.md b/versioned_docs/version-7.x/screen-options.md index 1b29277a09e..8a0ad063bb8 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 dependencies=@react-navigation/elements +```js name="Screen title option" snack version=7 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 dependencies=@react-navigation/elements +```js name="Screen title option" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import Button from '@react-navigation/elements'; @@ -186,7 +186,7 @@ Example: -```js name="Screen options for group" snack version=7 dependencies=@react-navigation/elements +```js name="Screen options for group" snack version=7 import * as React from 'react'; import { View, Text } from 'react-native'; import { Button } from '@react-navigation/elements'; @@ -248,7 +248,7 @@ export default function App() { -```js name="Screen options for group" snack version=7 dependencies=@react-navigation/elements +```js name="Screen options for group" snack version=7 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/testing.md b/versioned_docs/version-7.x/testing.md index 60f92bafd90..07b86a0e892 100644 --- a/versioned_docs/version-7.x/testing.md +++ b/versioned_docs/version-7.x/testing.md @@ -63,7 +63,7 @@ We recommend using [React Native Testing Library](https://callstack.github.io/re Example: - + ```js name='Testing with jest' import * as React from 'react'; diff --git a/versioned_docs/version-7.x/themes.md b/versioned_docs/version-7.x/themes.md index 6b4598a90b1..cde26fcffc4 100755 --- a/versioned_docs/version-7.x/themes.md +++ b/versioned_docs/version-7.x/themes.md @@ -329,7 +329,7 @@ import { DefaultTheme, DarkTheme } from '@react-navigation/native'; On iOS 13+ and Android 10+, you can get user's preferred color scheme (`'dark'` or `'light'`) with the ([Appearance API](https://reactnative.dev/docs/appearance)). - + ```js name="Operating system color theme" snack version=7 import * as React from 'react'; @@ -554,7 +554,7 @@ export default function App() { To gain access to the theme in any component that is rendered inside the navigation container:, you can use the `useTheme` hook. It returns the theme object: - + ```js name="System themes" snack version=7 import * as React from 'react';