From 50598f57901e09626b6b0ae119f1eb8cd8783768 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Thu, 27 Jun 2024 13:16:02 +0200 Subject: [PATCH] Use elements button for examples --- versioned_docs/version-7.x/auth-flow.md | 16 +-- .../version-7.x/bottom-tab-navigator.md | 31 ++--- .../custom-android-back-button-handling.md | 38 +++--- .../version-7.x/drawer-based-navigation.md | 86 ++++++------- versioned_docs/version-7.x/drawer-layout.md | 3 +- .../version-7.x/drawer-navigator.md | 35 +++--- versioned_docs/version-7.x/elements.md | 30 ++--- versioned_docs/version-7.x/header-buttons.md | 24 ++-- versioned_docs/version-7.x/headers.md | 46 +++---- .../version-7.x/hiding-tabbar-in-screens.md | 34 +++--- .../version-7.x/material-top-tab-navigator.md | 30 ++--- versioned_docs/version-7.x/modal.md | 20 ++-- .../version-7.x/multiple-drawers.md | 78 ++++++------ .../version-7.x/native-stack-navigator.md | 22 ++-- .../navigating-without-navigation-prop.md | 34 +++--- versioned_docs/version-7.x/navigating.md | 91 +++++++------- .../version-7.x/navigation-lifecycle.md | 102 ++++++++-------- .../version-7.x/nesting-navigators.md | 112 +++++++++-------- versioned_docs/version-7.x/params.md | 55 +++++---- .../version-7.x/screen-options-resolution.md | 60 +++++----- versioned_docs/version-7.x/screen-options.md | 7 +- .../version-7.x/shared-element-transitions.md | 24 ++-- versioned_docs/version-7.x/stack-navigator.md | 38 +++--- versioned_docs/version-7.x/status-bar.md | 68 +++++------ .../version-7.x/tab-based-navigation.md | 26 ++-- versioned_docs/version-7.x/themes.md | 113 ++++++++---------- .../version-7.x/use-prevent-remove.md | 36 ++---- versioned_docs/version-7.x/use-theme.md | 44 +++---- 28 files changed, 628 insertions(+), 675 deletions(-) diff --git a/versioned_docs/version-7.x/auth-flow.md b/versioned_docs/version-7.x/auth-flow.md index 45a59f2f029..b36c427c51a 100755 --- a/versioned_docs/version-7.x/auth-flow.md +++ b/versioned_docs/version-7.x/auth-flow.md @@ -457,9 +457,10 @@ import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; // codeblock-focus-end -import { Button, Text, TextInput, View } from 'react-native'; +import { Text, TextInput, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const AuthContext = React.createContext(); @@ -489,7 +490,7 @@ function HomeScreen() { return ( Signed in! - ); } @@ -513,7 +514,7 @@ function SignInScreen() { onChangeText={setPassword} secureTextEntry /> - ); } @@ -644,9 +645,10 @@ import * as React from 'react'; import * as SecureStore from 'expo-secure-store'; // codeblock-focus-end -import { Button, Text, TextInput, View } from 'react-native'; +import { Text, TextInput, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const AuthContext = React.createContext(); @@ -664,7 +666,7 @@ function HomeScreen() { return ( Signed in! - ); } @@ -688,7 +690,7 @@ function SignInScreen() { onChangeText={setPassword} secureTextEntry /> - ); } @@ -829,7 +831,7 @@ function SignInScreen() { onChangeText={setPassword} secureTextEntry /> - ); } diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md index 7586aefaca3..41f0b61adb4 100755 --- a/versioned_docs/version-7.x/bottom-tab-navigator.md +++ b/versioned_docs/version-7.x/bottom-tab-navigator.md @@ -27,11 +27,12 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`: ```js name="Bottom Tab Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; @@ -42,10 +43,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -56,7 +56,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -82,8 +82,9 @@ export default function App() { ```js name="Bottom Tab Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; @@ -105,10 +106,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -119,7 +119,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -252,12 +252,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since function MyTabBar({ navigation }) { return ( ); } ``` @@ -384,7 +385,7 @@ import { BlurView } from 'expo-blur'; > ``` -When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add a bottom padding to your content. +When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add bottom padding to your content. #### `tabBarPosition` 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 8e7a96d75a0..7ceeb2761b9 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 @@ -20,17 +20,11 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and ```js name="Custom android back button" snack version=7 import * as React from 'react'; -import { - Pressable, - Text, - View, - Button, - BackHandler, - StyleSheet, -} from 'react-native'; +import { Text, View, BackHandler, StyleSheet } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; import { useFocusEffect } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { PlatformPressable, Button } from '@react-navigation/elements'; const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }]; @@ -70,7 +64,7 @@ function ScreenWithCustomBackBehavior() { {listData.map((item) => ( <> {isSelectionModeEnabled ? ( - { setSelected(item.key); }} @@ -86,7 +80,7 @@ function ScreenWithCustomBackBehavior() { > {item.key} - + ) : ( {item.key === selected ? 'Selected: ' : ''} @@ -96,9 +90,10 @@ function ScreenWithCustomBackBehavior() { ))} Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'} ); @@ -138,17 +133,11 @@ const styles = StyleSheet.create({ ```js name="Custom android back button" snack version=7 import * as React from 'react'; -import { - Pressable, - Text, - View, - Button, - BackHandler, - StyleSheet, -} from 'react-native'; +import { Text, View, BackHandler, StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { useFocusEffect } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { PlatformPressable, Button } from '@react-navigation/elements'; const Stack = createNativeStackNavigator(); @@ -190,7 +179,7 @@ function ScreenWithCustomBackBehavior() { {listData.map((item) => ( <> {isSelectionModeEnabled ? ( - { setSelected(item.key); }} @@ -206,7 +195,7 @@ function ScreenWithCustomBackBehavior() { > {item.key} - + ) : ( {item.key === selected ? 'Selected: ' : ''} @@ -216,9 +205,10 @@ function ScreenWithCustomBackBehavior() { ))} Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'} ); diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md index 383796ea636..453eb576123 100755 --- a/versioned_docs/version-7.x/drawer-based-navigation.md +++ b/versioned_docs/version-7.x/drawer-based-navigation.md @@ -25,22 +25,22 @@ To use this drawer navigator, import it from `@react-navigation/drawer`: ```js name="Drawer navigation" snack version=7 import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -50,7 +50,7 @@ function NotificationsScreen() { return ( - ); } @@ -74,19 +74,19 @@ export default function App() { ```js name="Drawer navigation" snack version=7 import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -96,7 +96,7 @@ function NotificationsScreen() { return ( - ); } @@ -126,7 +126,7 @@ To open and close drawer, use the following helpers: ```js name="Drawer open and close" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { useNavigation, createStaticNavigation, @@ -137,6 +137,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -145,9 +146,9 @@ function Feed() { Feed Screen // codeblock-focus-start - // codeblock-focus-end - ); } @@ -204,7 +205,7 @@ export default function App() { ```js name="Drawer open and close" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createDrawerNavigator, @@ -212,6 +213,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -220,9 +222,9 @@ function Feed() { Feed Screen // codeblock-focus-start - // codeblock-focus-end - ); } @@ -292,7 +294,7 @@ If you would like to toggle the drawer you call the following: ```js name="Drawer toggle" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { useNavigation, createStaticNavigation, @@ -303,6 +305,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -310,9 +313,9 @@ function Feed() { return ( Feed Screen - // codeblock-focus-start - // codeblock-focus-end ); @@ -362,7 +365,7 @@ export default function App() { ```js name="Drawer toggle" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createDrawerNavigator, @@ -370,6 +373,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -377,9 +381,9 @@ function Feed() { return ( Feed Screen - // codeblock-focus-start - // codeblock-focus-end ); @@ -442,7 +446,7 @@ Each of these functions, behind the scenes, are simply dispatching actions: ```js name="Navigation dispatcher" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, @@ -454,6 +458,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -462,15 +467,13 @@ function Feed() { Feed Screen // codeblock-focus-start - // codeblock-focus-end - ); } @@ -527,7 +530,7 @@ export default function App() { ```js name="Navigation dispatcher" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation, @@ -539,6 +542,7 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function Feed() { const navigation = useNavigation(); @@ -547,15 +551,13 @@ function Feed() { Feed Screen // codeblock-focus-start - // codeblock-focus-end - ); } diff --git a/versioned_docs/version-7.x/drawer-layout.md b/versioned_docs/version-7.x/drawer-layout.md index 0c7e5b1c5d6..3ca6e1a4dee 100644 --- a/versioned_docs/version-7.x/drawer-layout.md +++ b/versioned_docs/version-7.x/drawer-layout.md @@ -62,8 +62,9 @@ We're done! Now you can build and run the app on your device/simulator. ```js import * as React from 'react'; -import { Button, Text } from 'react-native'; +import { Text } from 'react-native'; import { Drawer } from 'react-native-drawer-layout'; +import { Button } from '@react-navigation/elements'; export default function DrawerExample() { const [open, setOpen] = React.useState(false); diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md index 8f6e7cd3a52..dced01f3d59 100644 --- a/versioned_docs/version-7.x/drawer-navigator.md +++ b/versioned_docs/version-7.x/drawer-navigator.md @@ -65,11 +65,12 @@ To use this navigator, import it from `@react-navigation/drawer`: ```js name="Drawer Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -80,10 +81,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -94,7 +94,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -120,8 +120,9 @@ export default function App() { ```js name="Drawer Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createDrawerNavigator } from '@react-navigation/drawer'; @@ -143,10 +144,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -157,7 +157,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -276,12 +276,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `drawerContent` function CustomDrawerContent({ navigation }) { return ( ); } ``` @@ -638,8 +639,9 @@ The `progress` object is a `SharedValue` that represents the animated position o ```js name="Drawer animation progress" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createDrawerNavigator, @@ -690,8 +692,9 @@ export default function App() { ```js name="Drawer animation progress" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createDrawerNavigator, diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md index 39c26fdcbe7..44e987fd0c2 100644 --- a/versioned_docs/version-7.x/elements.md +++ b/versioned_docs/version-7.x/elements.md @@ -401,12 +401,13 @@ For example, you can use this with `headerTransparent` to render a blur view to ```js name="Header blur" snack version=7 dependencies=expo-blur import * as React from 'react'; -import { Button, View, StyleSheet } from 'react-native'; +import { View, StyleSheet } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; import { BlurView } from 'expo-blur'; function HomeScreen() { @@ -414,10 +415,9 @@ function HomeScreen() { return ( - ); } @@ -427,7 +427,7 @@ function ProfileScreen() { return ( - ); } @@ -468,9 +468,10 @@ export default App; ```js name="Header blur" snack version=7 dependencies=expo-blur import * as React from 'react'; -import { Button, View, StyleSheet } from 'react-native'; +import { View, StyleSheet } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { BlurView } from 'expo-blur'; @@ -481,10 +482,9 @@ function HomeScreen() { return ( - ); } @@ -494,7 +494,7 @@ function ProfileScreen() { return ( - ); } @@ -648,13 +648,15 @@ In addition, the button integrates with React Navigation and accepts the same pr It can be used to navigate between screens by specifying a screen name and params: ```js - ``` Or as a regular button: ```js - ``` ### `Label` diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md index 0e349a403e7..41b88af88ad 100755 --- a/versioned_docs/version-7.x/header-buttons.md +++ b/versioned_docs/version-7.x/header-buttons.md @@ -18,9 +18,10 @@ The most common way to interact with a header is by tapping on a button either t ```js name="Header button" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { return ( @@ -38,7 +39,7 @@ const MyStack = createNativeStackNavigator({ options: { // highlight-start headerRight: () => ( - ), // highlight-end }, @@ -59,9 +60,10 @@ export default function App() { ```js name="Header button" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { return ( @@ -83,7 +85,7 @@ function MyStack() { options={{ // highlight-start headerRight: () => ( - ), // highlight-end }} @@ -124,12 +126,13 @@ In some cases, components in the header need to interact with the screen compone ```js name="Header button" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function HomeScreen() { @@ -142,7 +145,7 @@ function HomeScreen() { // highlight-start navigation.setOptions({ headerRight: () => ( - ), }); // highlight-end @@ -158,7 +161,7 @@ const MyStack = createNativeStackNavigator({ options: { // Add a placeholder button without the `onPress` to avoid flicker // highlight-next-line - headerRight: () => , }, }, }, @@ -177,9 +180,10 @@ export default function App() { ```js name="Header button" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const Stack = createNativeStackNavigator(); @@ -194,7 +198,7 @@ function HomeScreen() { // highlight-start navigation.setOptions({ headerRight: () => ( - ), }); // highlight-end @@ -212,7 +216,7 @@ function MyStack() { options={{ // Add a placeholder button without the `onPress` to avoid flicker // highlight-next-line - headerRight: () => , }} /> diff --git a/versioned_docs/version-7.x/headers.md b/versioned_docs/version-7.x/headers.md index 41d585de09e..38d332e2b93 100755 --- a/versioned_docs/version-7.x/headers.md +++ b/versioned_docs/version-7.x/headers.md @@ -112,12 +112,13 @@ 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 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -125,13 +126,14 @@ function HomeScreen() { return ( ); } @@ -177,9 +179,10 @@ export default function App() { ```js name="Using params in the title" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -187,13 +190,14 @@ function HomeScreen() { return ( ); } @@ -256,12 +260,13 @@ It's often necessary to update the `options` configuration for the active screen ```js name="Updating options" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -271,12 +276,13 @@ function HomeScreen() { Home Screen // codeblock-focus-start // codeblock-focus-end ); @@ -359,7 +365,7 @@ export default function App() { ```js name="Header styles" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; @@ -426,12 +432,13 @@ It is common to want to configure the header in a similar way across many screen ```js name="Common screen options" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -439,10 +446,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -491,9 +497,10 @@ export default function App() { ```js name="Common screen options" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -501,10 +508,9 @@ function HomeScreen() { return ( Home Screen - ); } 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 cd3cbb10c67..23712816fcf 100644 --- a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md +++ b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md @@ -75,13 +75,14 @@ But if we want to show the tab bar only on the `Home`, `Feed` and `Notifications ```js name="Hiding tabbar" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function EmptyScreen() { return ; @@ -93,14 +94,12 @@ function Home() { return ( Home Screen - + ); } @@ -136,10 +135,11 @@ export default function App() { ```js name="Hiding tabbar" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); @@ -154,14 +154,12 @@ function Home() { return ( Home Screen - + ); } 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 3ac362ca6d0..ff9fc56264e 100755 --- a/versioned_docs/version-7.x/material-top-tab-navigator.md +++ b/versioned_docs/version-7.x/material-top-tab-navigator.md @@ -49,11 +49,12 @@ To use this navigator, import it from `@react-navigation/material-top-tabs`: ```js name="Material Top Tab Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; @@ -64,10 +65,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -78,7 +78,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -104,8 +104,9 @@ export default function App() { ```js name="Material Top Tab Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; @@ -127,10 +128,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -141,7 +141,7 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -296,12 +296,14 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since function MyTabBar({ navigation }) { return ( ); } ``` diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md index c5d8da9c1ff..a2117440a97 100755 --- a/versioned_docs/version-7.x/modal.md +++ b/versioned_docs/version-7.x/modal.md @@ -20,12 +20,13 @@ A modal is like a popup — it usually has a different transition animation, ```js name="Modal" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function HomeScreen() { @@ -34,10 +35,7 @@ function HomeScreen() { return ( This is the home screen! - ); } @@ -48,7 +46,7 @@ function ModalScreen() { return ( This is a modal! - ); } @@ -114,9 +112,10 @@ export default function App() { ```js name="Modal" snack version=7 import * as React from 'react'; -import { View, Text, Button } from 'react-native'; +import { View, Text } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function HomeScreen() { @@ -125,10 +124,7 @@ function HomeScreen() { return ( This is the home screen! - ); } @@ -139,7 +135,7 @@ function ModalScreen() { return ( This is a modal! - ); } diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md index 7cfd5bfb893..c28f98dd1d1 100644 --- a/versioned_docs/version-7.x/multiple-drawers.md +++ b/versioned_docs/version-7.x/multiple-drawers.md @@ -23,20 +23,21 @@ In such cases, we can use [`react-native-drawer-layout`](drawer-layout.md) direc ```js import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { Drawer } from 'react-native-drawer-layout'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -78,17 +79,18 @@ export default function App() { ```js import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { Drawer } from 'react-native-drawer-layout'; import { useNavigation } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -140,13 +142,14 @@ To solve this, we need to use context API to pass down a function to control the ```js import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { Drawer } from 'react-native-drawer-layout'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { useNavigation, createStaticNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; const RightDrawerContext = React.createContext(); @@ -156,11 +159,8 @@ function HomeScreen() { return ( - + ); } @@ -212,10 +212,11 @@ export default function App() { ```js import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { Drawer } from 'react-native-drawer-layout'; import { useNavigation } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; const RightDrawerContext = React.createContext(); @@ -225,11 +226,8 @@ function HomeScreen() { return ( - + ); } @@ -295,19 +293,20 @@ Here we have 2 drawer navigators nested inside each other, one is positioned on ```js name="Multiple drawers" snack version=7 import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -343,16 +342,17 @@ export default function App() { ```js name="Multiple drawers" snack version=7 import * as React from 'react'; -import { Button, View } from 'react-native'; +import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - ); } @@ -400,8 +400,8 @@ But there is one problem. When we call `navigation.openDrawer()` in our `HomeScr To solve this, we need to use [`navigation.getParent`](navigation-object.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like: ```js - + ``` However, this means that our button needs to know about the parent navigators, which isn't ideal. If our button is further nested inside other navigators, it'd need multiple `getParent()` calls. To address this, we can use the [`id` prop](drawer-navigator.md#id) to identify the parent navigator. @@ -415,26 +415,25 @@ The final code would look like this: ```js name="Multiple drawers navigators" snack version=7 import * as React from 'react'; -import { Button, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - + ); } @@ -481,23 +480,22 @@ export default function App() { ```js name="Multiple drawers navigators" snack version=7 import * as React from 'react'; -import { Button, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); return ( - + ); } diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md index a7a1ce585b8..61125f06e18 100755 --- a/versioned_docs/version-7.x/native-stack-navigator.md +++ b/versioned_docs/version-7.x/native-stack-navigator.md @@ -35,11 +35,12 @@ To use this navigator, import it from `@react-navigation/native-stack`: ```js name="Native Stack Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createNativeStackNavigator } from '@react-navigation/native-stack'; @@ -50,10 +51,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -87,8 +87,9 @@ export default function App() { ```js name="Native Stack Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createNativeStackNavigator } from '@react-navigation/native-stack'; @@ -110,10 +111,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -741,7 +741,7 @@ React.useEffect(() => { ### Helpers -The nativestack navigator adds the following methods to the navigation object: +The native stack navigator adds the following methods to the navigation object: #### `replace` 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 88bcff29f42..c6f16089253 100755 --- a/versioned_docs/version-7.x/navigating-without-navigation-prop.md +++ b/versioned_docs/version-7.x/navigating-without-navigation-prop.md @@ -83,12 +83,13 @@ Then, in any of your javascript modules, import the `RootNavigation` and call fu ```js name="Using navigate in any js module" snack version=7 import * as React from 'react'; -import { View, Button, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, createNavigationContainerRef, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const navigationRef = createNavigationContainerRef(); @@ -109,10 +110,9 @@ function navigate(name, params) { function Home() { return ( - ); } @@ -122,7 +122,7 @@ function Settings({ route }) { return ( Hello {route.params.userName} - ); } @@ -146,12 +146,13 @@ export default function App() { ```js name="Using navigate in any js module" snack version=7 import * as React from 'react'; -import { View, Button, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { NavigationContainer, createNavigationContainerRef, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const navigationRef = createNavigationContainerRef(); @@ -172,10 +173,9 @@ function navigate(name, params) { function Home() { return ( - ); } @@ -185,7 +185,7 @@ function Settings({ route }) { return ( Hello {route.params.userName} - ); } @@ -243,12 +243,13 @@ To avoid this, you can use the `isReady()` method available on the ref as shown ```js name="Handling navigation init" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, createNavigationContainerRef, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start const navigationRef = createNavigationContainerRef(); @@ -268,7 +269,7 @@ function Home() { return ( Home - ); } @@ -300,12 +301,13 @@ export default function App() { ```js name="Handling navigation init" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, createNavigationContainerRef, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; const Stack = createNativeStackNavigator(); // codeblock-focus-start @@ -326,7 +328,7 @@ function Home() { return ( Home - ); } diff --git a/versioned_docs/version-7.x/navigating.md b/versioned_docs/version-7.x/navigating.md index 75d00c7a25d..d989bd04b27 100755 --- a/versioned_docs/version-7.x/navigating.md +++ b/versioned_docs/version-7.x/navigating.md @@ -31,12 +31,13 @@ We'll do something similar to the latter, but rather than using a `window.locati ```js name="Navigating to a new screen" snack version=7 // codeblock-focus-start import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -44,10 +45,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -99,12 +99,13 @@ So we now have a stack with two routes: 1) the `Home` route 2) the `Details` rou ```js name="Navigate to a screen multiple times" snack version=7 import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -112,10 +113,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -127,10 +127,9 @@ function DetailsScreen() { return ( Details Screen - ); } @@ -157,12 +156,13 @@ Let's suppose that we actually _want_ to add another details screen. This is pre ```js name="Navigate to a screen multiple times" snack version=7 import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -170,10 +170,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -185,10 +184,9 @@ function DetailsScreen() { Details Screen // codeblock-focus-start - // codeblock-focus-end ); @@ -223,12 +221,13 @@ Sometimes you'll want to be able to programmatically trigger this behavior, and ```js name="Going back" snack version=7 import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -236,10 +235,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -251,12 +249,11 @@ function DetailsScreen() { return ( Details Screen - // highlight-start - // highlight-end ); @@ -292,12 +289,13 @@ Another common requirement is to be able to go back _multiple_ screens -- for ex ```js name="Going back to specific screen" snack version=7 import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -305,10 +303,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -320,17 +317,15 @@ function DetailsScreen() { return ( Details Screen - + // highlight-start - + // highlight-end ); diff --git a/versioned_docs/version-7.x/navigation-lifecycle.md b/versioned_docs/version-7.x/navigation-lifecycle.md index b595465758c..0fd30bf096c 100755 --- a/versioned_docs/version-7.x/navigation-lifecycle.md +++ b/versioned_docs/version-7.x/navigation-lifecycle.md @@ -26,13 +26,14 @@ Similar results can be observed (in combination) with other navigators as well. ```js name="Navigation lifecycle" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function SettingsScreen() { const navigation = useNavigation(); @@ -46,10 +47,9 @@ function SettingsScreen() { return ( Settings Screen - ); } @@ -66,10 +66,9 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -86,10 +85,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -106,10 +104,9 @@ function DetailsScreen() { return ( Details Screen - ); } @@ -152,10 +149,11 @@ export default function App() { ```js name="Navigation lifecycle" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function SettingsScreen() { const navigation = useNavigation(); @@ -169,10 +167,9 @@ function SettingsScreen() { return ( Settings Screen - ); } @@ -189,10 +186,9 @@ function ProfileScreen() { return ( Profile Screen - ); } @@ -209,10 +205,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -229,10 +224,9 @@ function DetailsScreen() { return ( Details Screen - ); } @@ -301,12 +295,13 @@ Example: ```js name="Focus and blur" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function ProfileScreen() { @@ -362,10 +357,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -389,9 +383,10 @@ export default function App() { ```js name="Focus and blur" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function ProfileScreen() { @@ -447,10 +442,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -489,12 +483,13 @@ Example: ```js name="Focus effect" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { useFocusEffect } from '@react-navigation/native'; @@ -528,10 +523,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -555,9 +549,10 @@ export default function App() { ```js name="Focus effect" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { useFocusEffect } from '@react-navigation/native'; @@ -591,10 +586,9 @@ function HomeScreen() { return ( Home Screen - ); } diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md index 72aa781b274..31f485a2857 100755 --- a/versioned_docs/version-7.x/nesting-navigators.md +++ b/versioned_docs/version-7.x/nesting-navigators.md @@ -14,13 +14,14 @@ Nesting navigators means rendering a navigator inside a screen of another naviga ```js name="Nested navigators" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -36,10 +37,9 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -86,10 +86,11 @@ export default function App() { ```js name="Nested navigators" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -105,10 +106,9 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -218,13 +218,14 @@ To receive events from the parent navigator, you can explicitly listen to parent ```js name="Events from parent" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -240,10 +241,9 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -303,10 +303,11 @@ export default function App() { ```js name="Events from parent" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -322,10 +323,9 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -412,13 +412,14 @@ Consider the following example: ```js name="Navigating to nested screen" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -426,11 +427,12 @@ function HomeScreen() { return ( Home Screen - ); } @@ -441,7 +443,7 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -452,7 +454,7 @@ function MessagesScreen() { return ( Messages Screen - ); } @@ -490,10 +492,11 @@ export default function App() { ```js name="Navigating to nested screen" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -501,11 +504,12 @@ function HomeScreen() { return ( Home Screen - ); } @@ -516,7 +520,7 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -527,7 +531,7 @@ function MessagesScreen() { return ( Messages Screen - ); } @@ -594,13 +598,14 @@ You can also pass params by specifying a `params` key: ```js name="Navigating to nested screen" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -609,7 +614,6 @@ function HomeScreen() { Home Screen ); } @@ -630,7 +636,7 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -642,7 +648,7 @@ function MessagesScreen({ route }) { Messages Screen User: {route.params.user} - ); } @@ -678,10 +684,11 @@ export default function App() { ```js name="Navigating to nested screen" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function HomeScreen() { const navigation = useNavigation(); @@ -690,7 +697,6 @@ function HomeScreen() { Home Screen ); } @@ -711,7 +719,7 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -723,7 +731,7 @@ function MessagesScreen({ route }) { Messages Screen User: {route.params.user} - ); } @@ -811,13 +819,14 @@ For example: ```js name="Nested navigators" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -833,10 +842,9 @@ function FeedScreen() { return ( Feed Screen - ); } @@ -883,10 +891,11 @@ export default function App() { ```js name="Nested navigators" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function ProfileScreen() { return ( @@ -902,10 +911,9 @@ function FeedScreen() { return ( Feed Screen - ); } diff --git a/versioned_docs/version-7.x/params.md b/versioned_docs/version-7.x/params.md index 4145e172e34..f024bd61149 100755 --- a/versioned_docs/version-7.x/params.md +++ b/versioned_docs/version-7.x/params.md @@ -24,12 +24,13 @@ We recommend that the params you pass are JSON-serializable. That way, you'll be ```js name="Passing params" snack version=7 import * as React from 'react'; -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function HomeScreen() { @@ -39,7 +40,6 @@ function HomeScreen() { Home Screen ); } @@ -67,7 +69,6 @@ function DetailsScreen({ route }) { itemId: {JSON.stringify(itemId)} otherParam: {JSON.stringify(otherParam)} + + ); } @@ -144,12 +147,13 @@ Basic usage: ```js name="Updating params" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function HomeScreen({ route }) { const navigation = useNavigation(); @@ -160,7 +164,6 @@ function HomeScreen({ route }) { Home Screen itemId: {JSON.stringify(itemId)} ); } @@ -204,12 +209,13 @@ To achieve this, you can use the `popTo` method to go back to the previous scree ```js name="Passing params back" snack version=7 import * as React from 'react'; -import { Text, View, TextInput, Button } from 'react-native'; +import { Text, View, TextInput } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start function HomeScreen({ route }) { @@ -228,10 +234,9 @@ function HomeScreen({ route }) { return ( - Post: {route.params?.post} ); @@ -251,13 +256,14 @@ function CreatePostScreen({ route }) { onChangeText={setPostText} /> ); } @@ -289,13 +295,14 @@ If you have nested navigators, you need to pass params a bit differently. For ex ```js name="Passing params to nested screen" snack version=7 import * as React from 'react'; -import { Text, View, TextInput, Button } from 'react-native'; +import { Text, View, TextInput } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function SettingsScreen({ route }) { const navigation = useNavigation(); @@ -305,10 +312,9 @@ function SettingsScreen({ route }) { Settings Screen userParam: {JSON.stringify(user)} - ); } @@ -328,7 +334,6 @@ function HomeScreen() { Home Screen ); } diff --git a/versioned_docs/version-7.x/screen-options-resolution.md b/versioned_docs/version-7.x/screen-options-resolution.md index 65e12558c06..2a4d2281035 100755 --- a/versioned_docs/version-7.x/screen-options-resolution.md +++ b/versioned_docs/version-7.x/screen-options-resolution.md @@ -263,23 +263,23 @@ Imagine the following configuration: ```js name="Parent options from a child" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function FeedScreen() { const navigation = useNavigation(); return ( - ); } @@ -325,20 +325,20 @@ export default function App() { ```js name="Parent options from a child" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function FeedScreen() { const navigation = useNavigation(); return ( - ); } @@ -418,7 +418,7 @@ Then we can use this function with the `options` prop on `Screen`: ```js name="Parent options from a child" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { getFocusedRouteNameFromRoute } from '@react-navigation/native'; import { createStaticNavigation, @@ -426,6 +426,7 @@ import { } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function getHeaderTitle(route) { // If the focused route is not found, we need to assume it's the initial screen @@ -448,10 +449,9 @@ function FeedScreen() { return ( - ); } @@ -505,7 +505,7 @@ export default function App() { ```js name="Parent options from a child" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { NavigationContainer, useNavigation, @@ -513,6 +513,7 @@ import { } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function getHeaderTitle(route) { // If the focused route is not found, we need to assume it's the initial screen @@ -535,10 +536,9 @@ function FeedScreen() { return ( - ); } @@ -609,23 +609,23 @@ For example, for the above use case, instead of adding a tab navigator inside a ```js name="Reorganized navigators" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function FeedScreen() { const navigation = useNavigation(); return ( - ); } @@ -680,20 +680,20 @@ export default function App() { ```js name="Reorganized navigators" snack version=7 import * as React from 'react'; -import { View, Button } from 'react-native'; +import { View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; function FeedScreen() { const navigation = useNavigation(); return ( - ); } diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md index 0a76fe23409..7289b60efbf 100644 --- a/versioned_docs/version-7.x/screen-options.md +++ b/versioned_docs/version-7.x/screen-options.md @@ -496,8 +496,7 @@ export default function App() { The `navigation` object has a `setOptions` method that lets you update the options for a screen from within a component. See [navigation object's docs](navigation-object.md#setoptions) for more details. ```js - ``` diff --git a/versioned_docs/version-7.x/shared-element-transitions.md b/versioned_docs/version-7.x/shared-element-transitions.md index ed91e9e8555..b5b4164ffbb 100644 --- a/versioned_docs/version-7.x/shared-element-transitions.md +++ b/versioned_docs/version-7.x/shared-element-transitions.md @@ -39,12 +39,13 @@ To create a shared transition: ```js name="Shared transition" import * as React from 'react'; -import { View, Button, StyleSheet } from 'react-native'; +import { View, StyleSheet } from 'react-native'; import { useNavigation, createStaticNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; import Animated from 'react-native-reanimated'; @@ -53,10 +54,9 @@ function HomeScreen() { return ( - - - - Home Screen - ); } @@ -135,8 +135,9 @@ export default function App() { ```js name="Stack Navigator" snack version=7 import * as React from 'react'; -import { Text, View, Button } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { createStackNavigator } from '@react-navigation/stack'; @@ -158,10 +159,9 @@ function HomeScreen() { return ( Home Screen - ); } @@ -613,7 +613,8 @@ Supported values for `animation` are: - `default` - Default animation based on the platform and OS version. - `fade` - Simple fade animation for dialogs. -- `fade_from_bottom` - Standard Android-style fade in from the bottom for Android Oreo. +- `fade_from_bottom` - Standard Android-style fade-in from the bottom for Android Oreo. +- `fade_from_right` - Standard Android-style fade-in from the right for Android 14. - `reveal_from_bottom` - Standard Android-style reveal from the bottom for Android Pie. - `scale_from_center` - Scale animation from the center. - `slide_from_right` - Standard iOS-style slide in from the right. @@ -1016,16 +1017,10 @@ If you want to further customize how the dialog animates, or want to close the s Example: ```js -import { - Animated, - View, - Text, - Pressable, - Button, - StyleSheet, -} from 'react-native'; +import { Animated, View, Text, Pressable, StyleSheet } from 'react-native'; import { useTheme, useNavigation } from '@react-navigation/native'; import { useCardAnimation } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; function ModalScreen() { const navigation = useNavigation(); @@ -1077,11 +1072,12 @@ function ModalScreen() { pantry ten times. ); diff --git a/versioned_docs/version-7.x/status-bar.md b/versioned_docs/version-7.x/status-bar.md index 2d058c478e9..11ad9e6f362 100755 --- a/versioned_docs/version-7.x/status-bar.md +++ b/versioned_docs/version-7.x/status-bar.md @@ -18,12 +18,13 @@ This is a simple task when using a stack. You can render the `StatusBar` compone ```js name="Different status bar" snack version=7 import * as React from 'react'; -import { View, Text, StatusBar, Button, StyleSheet } from 'react-native'; +import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; function Screen1() { @@ -47,10 +48,9 @@ function Screen1() { // highlight-end Light Screen - ); } @@ -76,10 +76,9 @@ function Screen2() { // highlight-end Dark Screen - ); } @@ -111,9 +110,10 @@ const styles = StyleSheet.create({ ```js name="Different status bar" snack version=7 import * as React from 'react'; -import { View, Text, StatusBar, Button, StyleSheet } from 'react-native'; +import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; import { SafeAreaProvider, useSafeAreaInsets, @@ -140,10 +140,9 @@ function Screen1() { // highlight-end Light Screen - ); } @@ -169,10 +168,9 @@ function Screen2() { // highlight-end Dark Screen - ); } @@ -239,13 +237,14 @@ Now, our screens (both `Screen1.js` and `Screen2.js`) will use the `FocusAwareSt ```js name="Different status bar based on tabs" snack version=7 import * as React from 'react'; -import { View, Text, StatusBar, Button, StyleSheet } from 'react-native'; +import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { useIsFocused } from '@react-navigation/native'; import { createStaticNavigation, useNavigation, } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; function FocusAwareStatusBar(props) { @@ -274,10 +273,9 @@ function Screen1() { > Light Screen - ); } @@ -301,10 +299,9 @@ function Screen2() { > Dark Screen - ); } @@ -340,10 +337,11 @@ const styles = StyleSheet.create({ ```js name="Different status bar based on tabs" snack version=7 import * as React from 'react'; -import { View, Text, StatusBar, Button, StyleSheet } from 'react-native'; +import { View, Text, StatusBar, StyleSheet } from 'react-native'; import { useIsFocused } from '@react-navigation/native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import { Button } from '@react-navigation/elements'; import { SafeAreaProvider, useSafeAreaInsets, @@ -375,10 +373,9 @@ function Screen1() { > Light Screen - ); } @@ -402,10 +399,9 @@ function Screen2() { > Dark Screen - ); } diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md index 29f620beb03..3ca2ecc9aef 100755 --- a/versioned_docs/version-7.x/tab-based-navigation.md +++ b/versioned_docs/version-7.x/tab-based-navigation.md @@ -384,10 +384,9 @@ function HomeScreen() { return ( Home! - ); } @@ -398,7 +397,7 @@ function SettingsScreen() { return ( Settings! - ); } @@ -416,10 +415,11 @@ Often tabs don't just display one screen — for example, on your Twitter fe ```js import * as React from 'react'; -import { Button, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { Button } from '@react-navigation/elements'; function DetailsScreen() { return ( @@ -435,10 +435,9 @@ function HomeScreen() { return ( Home screen - ); } @@ -449,10 +448,9 @@ function SettingsScreen() { return ( Settings screen - ); } diff --git a/versioned_docs/version-7.x/themes.md b/versioned_docs/version-7.x/themes.md index 9c10a92b942..3653ee68477 100755 --- a/versioned_docs/version-7.x/themes.md +++ b/versioned_docs/version-7.x/themes.md @@ -28,9 +28,10 @@ import { DefaultTheme, } from '@react-navigation/native'; // codeblock-focus-end -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start @@ -51,10 +52,9 @@ function SettingsScreen({ route }) { Settings Screen userParam: {JSON.stringify(user)} - ); } @@ -74,14 +74,15 @@ function HomeScreen() { Home Screen ); } @@ -124,9 +125,10 @@ import { useNavigation, } from '@react-navigation/native'; // codeblock-focus-end -import { Button, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start @@ -148,10 +150,9 @@ function SettingsScreen({ route }) { Settings Screen userParam: {JSON.stringify(user)} - ); } @@ -173,14 +174,15 @@ function HomeScreen() { Home Screen ); } @@ -351,16 +353,11 @@ import { DarkTheme, useTheme, } from '@react-navigation/native'; -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; // codeblock-focus-end import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function SettingsScreen({ route }) { const navigation = useNavigation(); @@ -373,10 +370,9 @@ function SettingsScreen({ route }) { userParam: {JSON.stringify(user)} - ); } @@ -410,14 +406,15 @@ function HomeScreen() { Home Screen ); } @@ -458,13 +455,7 @@ export default function App() { ```js name="Operating system color theme" snack version=7 import * as React from 'react'; // codeblock-focus-start -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; import { NavigationContainer, DefaultTheme, @@ -474,6 +465,7 @@ import { // codeblock-focus-end import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function SettingsScreen({ route, navigation }) { const { user } = route.params; @@ -485,10 +477,9 @@ function SettingsScreen({ route, navigation }) { userParam: {JSON.stringify(user)} - ); } @@ -522,14 +513,15 @@ function HomeScreen() { Home Screen ); } @@ -589,16 +581,11 @@ import { DarkTheme, useTheme, } from '@react-navigation/native'; -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; // codeblock-focus-end import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; +import { Button } from '@react-navigation/elements'; function SettingsScreen({ route }) { const navigation = useNavigation(); @@ -611,10 +598,9 @@ function SettingsScreen({ route }) { userParam: {JSON.stringify(user)} - ); } @@ -652,14 +638,15 @@ function HomeScreen() { Home Screen ); } @@ -694,13 +681,7 @@ export default function App() { ```js name="System themes" snack version=7 import * as React from 'react'; // codeblock-focus-start -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; import { NavigationContainer, DefaultTheme, @@ -722,10 +703,9 @@ function SettingsScreen({ route, navigation }) { userParam: {JSON.stringify(user)} - ); } @@ -763,14 +743,15 @@ function HomeScreen() { Home Screen ); } diff --git a/versioned_docs/version-7.x/use-prevent-remove.md b/versioned_docs/version-7.x/use-prevent-remove.md index a7887c7ee9f..faef9c9495d 100644 --- a/versioned_docs/version-7.x/use-prevent-remove.md +++ b/versioned_docs/version-7.x/use-prevent-remove.md @@ -23,20 +23,14 @@ Example: ```js name="usePreventRemove hook" snack version=7 import * as React from 'react'; -import { - Button, - Alert, - View, - TextInput, - Platform, - StyleSheet, -} from 'react-native'; +import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native'; import { useNavigation, usePreventRemove, createStaticNavigation, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start const EditTextScreen = () => { @@ -89,11 +83,9 @@ const HomeScreen = () => { return ( - ); }; @@ -140,20 +132,14 @@ const styles = StyleSheet.create({ ```js name="usePreventRemove hook" snack version=7 import * as React from 'react'; -import { - Button, - Alert, - View, - TextInput, - Platform, - StyleSheet, -} from 'react-native'; +import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native'; import { NavigationContainer, useNavigation, usePreventRemove, } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; +import { Button } from '@react-navigation/elements'; // codeblock-focus-start const EditTextScreen = () => { @@ -214,11 +200,9 @@ const HomeScreen = () => { return ( - ); }; diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md index d166c80f30c..a2f25340d04 100644 --- a/versioned_docs/version-7.x/use-theme.md +++ b/versioned_docs/version-7.x/use-theme.md @@ -20,16 +20,10 @@ import { DefaultTheme, DarkTheme, } from '@react-navigation/native'; -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; - +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { useTheme } from '@react-navigation/native'; @@ -46,10 +40,9 @@ function SettingsScreen({ route }) { userParam: {JSON.stringify(user)} - ); } @@ -86,14 +79,15 @@ function HomeScreen() { Home Screen ); } @@ -131,13 +125,7 @@ export default function App() { ```js name="useTheme hook" snack version=7 import * as React from 'react'; -import { - Button, - View, - Text, - TouchableOpacity, - useColorScheme, -} from 'react-native'; +import { View, Text, TouchableOpacity, useColorScheme } from 'react-native'; import { NavigationContainer, DefaultTheme, @@ -146,7 +134,7 @@ import { } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createDrawerNavigator } from '@react-navigation/drawer'; - +import { Button } from '@react-navigation/elements'; // codeblock-focus-start import { useTheme } from '@react-navigation/native'; @@ -162,10 +150,9 @@ function SettingsScreen({ route }) { userParam: {JSON.stringify(user)} - ); } @@ -201,14 +188,15 @@ function HomeScreen() { Home Screen ); }