Use elements button for examples

react-navigation · Jun 27, 2024 · 50598f5 · 50598f5
1 parent c9cec95
commit 50598f5
Show file tree

Hide file tree

Showing 28 changed files with 628 additions and 675 deletions.
diff --git 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 (
     <View>
       <Text>Signed in!</Text>
-      <Button title="Sign out" onPress={signOut} />
+      <Button onPress={signOut}>Sign out</Button>
     </View>
   );
 }
@@ -513,7 +514,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }
@@ -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 (
     <View>
       <Text>Signed in!</Text>
-      <Button title="Sign out" onPress={signOut} />
+      <Button onPress={signOut}>Sign out</Button>
     </View>
   );
 }
@@ -688,7 +690,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }
@@ -829,7 +831,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }

diff --git 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 (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -56,7 +56,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -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 (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -119,7 +119,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -252,12 +252,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since
 function MyTabBar({ navigation }) {
   return (
     <Button
-      title="Go somewhere"
       onPress={() => {
         // Navigate using the `navigation` prop that you received
         navigation.navigate('SomeScreen');
       }}
-    />
+    >
+      Go somewhere
+    </Button>
   );
 }
 ```
@@ -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
@@ -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 ? (
-            <Pressable
+            <PlatformPressable
               onPress={() => {
                 setSelected(item.key);
               }}
@@ -86,7 +80,7 @@ function ScreenWithCustomBackBehavior() {
               >
                 {item.key}
               </Text>
-            </Pressable>
+            </PlatformPressable>
           ) : (
             <Text style={styles.text}>
               {item.key === selected ? 'Selected: ' : ''}
@@ -96,9 +90,10 @@ function ScreenWithCustomBackBehavior() {
         </>
       ))}
       <Button
-        title="Toggle selection mode"
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
-      />
+      >
+        Toggle selection mode
+      </Button>
       <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
     </View>
   );
@@ -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 ? (
-            <Pressable
+            <PlatformPressable
               onPress={() => {
                 setSelected(item.key);
               }}
@@ -206,7 +195,7 @@ function ScreenWithCustomBackBehavior() {
               >
                 {item.key}
               </Text>
-            </Pressable>
+            </PlatformPressable>
           ) : (
             <Text style={styles.text}>
               {item.key === selected ? 'Selected: ' : ''}
@@ -216,9 +205,10 @@ function ScreenWithCustomBackBehavior() {
         </>
       ))}
       <Button
-        title="Toggle selection mode"
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
-      />
+      >
+        Toggle selection mode
+      </Button>
       <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
     </View>
   );