Skip to content

Commit 50598f5

Browse files
satya164satya164
committed
Use elements button for examples
1 parent c9cec95 commit 50598f5

28 files changed

+628
-675
lines changed

‎versioned_docs/version-7.x/auth-flow.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -457,9 +457,10 @@ import * as React from 'react';
457457
import * as SecureStore from 'expo-secure-store';
458458

459459
// codeblock-focus-end
460-
import { Button, Text, TextInput, View } from 'react-native';
460+
import { Text, TextInput, View } from 'react-native';
461461
import { createStaticNavigation } from '@react-navigation/native';
462462
import { createNativeStackNavigator } from '@react-navigation/native-stack';
463+
import { Button } from '@react-navigation/elements';
463464

464465
const AuthContext = React.createContext();
465466

@@ -489,7 +490,7 @@ function HomeScreen() {
489490
return (
490491
<View>
491492
<Text>Signed in!</Text>
492-
<Button title="Sign out" onPress={signOut} />
493+
<Button onPress={signOut}>Sign out</Button>
493494
</View>
494495
);
495496
}
@@ -513,7 +514,7 @@ function SignInScreen() {
513514
onChangeText={setPassword}
514515
secureTextEntry
515516
/>
516-
<Button title="Sign in" onPress={() => signIn({ username, password })} />
517+
<Button onPress={() => signIn({ username, password })}>Sign in</Button>
517518
</View>
518519
);
519520
}
@@ -644,9 +645,10 @@ import * as React from 'react';
644645
import * as SecureStore from 'expo-secure-store';
645646

646647
// codeblock-focus-end
647-
import { Button, Text, TextInput, View } from 'react-native';
648+
import { Text, TextInput, View } from 'react-native';
648649
import { NavigationContainer } from '@react-navigation/native';
649650
import { createNativeStackNavigator } from '@react-navigation/native-stack';
651+
import { Button } from '@react-navigation/elements';
650652

651653
const AuthContext = React.createContext();
652654

@@ -664,7 +666,7 @@ function HomeScreen() {
664666
return (
665667
<View>
666668
<Text>Signed in!</Text>
667-
<Button title="Sign out" onPress={signOut} />
669+
<Button onPress={signOut}>Sign out</Button>
668670
</View>
669671
);
670672
}
@@ -688,7 +690,7 @@ function SignInScreen() {
688690
onChangeText={setPassword}
689691
secureTextEntry
690692
/>
691-
<Button title="Sign in" onPress={() => signIn({ username, password })} />
693+
<Button onPress={() => signIn({ username, password })}>Sign in</Button>
692694
</View>
693695
);
694696
}
@@ -829,7 +831,7 @@ function SignInScreen() {
829831
onChangeText={setPassword}
830832
secureTextEntry
831833
/>
832-
<Button title="Sign in" onPress={() => signIn({ username, password })} />
834+
<Button onPress={() => signIn({ username, password })}>Sign in</Button>
833835
</View>
834836
);
835837
}

‎versioned_docs/version-7.x/bottom-tab-navigator.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,12 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`:
2727

2828
```js name="Bottom Tab Navigator" snack version=7
2929
import * as React from 'react';
30-
import { Text, View, Button } from 'react-native';
30+
import { Text, View } from 'react-native';
3131
import {
3232
createStaticNavigation,
3333
useNavigation,
3434
} from '@react-navigation/native';
35+
import { Button } from '@react-navigation/elements';
3536
// codeblock-focus-start
3637
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
3738

@@ -42,10 +43,9 @@ function HomeScreen() {
4243
return (
4344
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
4445
<Text>Home Screen</Text>
45-
<Button
46-
title="Go to Profile"
47-
onPress={() => navigation.navigate('Profile')}
48-
/>
46+
<Button onPress={() => navigation.navigate('Profile')}>
47+
Go to Profile
48+
</Button>
4949
</View>
5050
);
5151
}
@@ -56,7 +56,7 @@ function ProfileScreen() {
5656
return (
5757
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
5858
<Text>Profile Screen</Text>
59-
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
59+
<Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
6060
</View>
6161
);
6262
}
@@ -82,8 +82,9 @@ export default function App() {
8282

8383
```js name="Bottom Tab Navigator" snack version=7
8484
import * as React from 'react';
85-
import { Text, View, Button } from 'react-native';
85+
import { Text, View } from 'react-native';
8686
import { NavigationContainer, useNavigation } from '@react-navigation/native';
87+
import { Button } from '@react-navigation/elements';
8788
// codeblock-focus-start
8889
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
8990

@@ -105,10 +106,9 @@ function HomeScreen() {
105106
return (
106107
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
107108
<Text>Home Screen</Text>
108-
<Button
109-
title="Go to Profile"
110-
onPress={() => navigation.navigate('Profile')}
111-
/>
109+
<Button onPress={() => navigation.navigate('Profile')}>
110+
Go to Profile
111+
</Button>
112112
</View>
113113
);
114114
}
@@ -119,7 +119,7 @@ function ProfileScreen() {
119119
return (
120120
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
121121
<Text>Profile Screen</Text>
122-
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
122+
<Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
123123
</View>
124124
);
125125
}
@@ -252,12 +252,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since
252252
function MyTabBar({ navigation }) {
253253
return (
254254
<Button
255-
title="Go somewhere"
256255
onPress={() => {
257256
// Navigate using the `navigation` prop that you received
258257
navigation.navigate('SomeScreen');
259258
}}
260-
/>
259+
>
260+
Go somewhere
261+
</Button>
261262
);
262263
}
263264
```
@@ -384,7 +385,7 @@ import { BlurView } from 'expo-blur';
384385
>
385386
```
386387

387-
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.
388+
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.
388389

389390
#### `tabBarPosition`
390391

‎versioned_docs/version-7.x/custom-android-back-button-handling.md

+14-24
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,11 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and
2020

2121
```js name="Custom android back button" snack version=7
2222
import * as React from 'react';
23-
import {
24-
Pressable,
25-
Text,
26-
View,
27-
Button,
28-
BackHandler,
29-
StyleSheet,
30-
} from 'react-native';
23+
import { Text, View, BackHandler, StyleSheet } from 'react-native';
3124
import { createStaticNavigation } from '@react-navigation/native';
3225
import { useFocusEffect } from '@react-navigation/native';
3326
import { createNativeStackNavigator } from '@react-navigation/native-stack';
27+
import { PlatformPressable, Button } from '@react-navigation/elements';
3428

3529
const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
3630

@@ -70,7 +64,7 @@ function ScreenWithCustomBackBehavior() {
7064
{listData.map((item) => (
7165
<>
7266
{isSelectionModeEnabled ? (
73-
<Pressable
67+
<PlatformPressable
7468
onPress={() => {
7569
setSelected(item.key);
7670
}}
@@ -86,7 +80,7 @@ function ScreenWithCustomBackBehavior() {
8680
>
8781
{item.key}
8882
</Text>
89-
</Pressable>
83+
</PlatformPressable>
9084
) : (
9185
<Text style={styles.text}>
9286
{item.key === selected ? 'Selected: ' : ''}
@@ -96,9 +90,10 @@ function ScreenWithCustomBackBehavior() {
9690
</>
9791
))}
9892
<Button
99-
title="Toggle selection mode"
10093
onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
101-
/>
94+
>
95+
Toggle selection mode
96+
</Button>
10297
<Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
10398
</View>
10499
);
@@ -138,17 +133,11 @@ const styles = StyleSheet.create({
138133

139134
```js name="Custom android back button" snack version=7
140135
import * as React from 'react';
141-
import {
142-
Pressable,
143-
Text,
144-
View,
145-
Button,
146-
BackHandler,
147-
StyleSheet,
148-
} from 'react-native';
136+
import { Text, View, BackHandler, StyleSheet } from 'react-native';
149137
import { NavigationContainer } from '@react-navigation/native';
150138
import { useFocusEffect } from '@react-navigation/native';
151139
import { createNativeStackNavigator } from '@react-navigation/native-stack';
140+
import { PlatformPressable, Button } from '@react-navigation/elements';
152141

153142
const Stack = createNativeStackNavigator();
154143

@@ -190,7 +179,7 @@ function ScreenWithCustomBackBehavior() {
190179
{listData.map((item) => (
191180
<>
192181
{isSelectionModeEnabled ? (
193-
<Pressable
182+
<PlatformPressable
194183
onPress={() => {
195184
setSelected(item.key);
196185
}}
@@ -206,7 +195,7 @@ function ScreenWithCustomBackBehavior() {
206195
>
207196
{item.key}
208197
</Text>
209-
</Pressable>
198+
</PlatformPressable>
210199
) : (
211200
<Text style={styles.text}>
212201
{item.key === selected ? 'Selected: ' : ''}
@@ -216,9 +205,10 @@ function ScreenWithCustomBackBehavior() {
216205
</>
217206
))}
218207
<Button
219-
title="Toggle selection mode"
220208
onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
221-
/>
209+
>
210+
Toggle selection mode
211+
</Button>
222212
<Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
223213
</View>
224214
);

0 commit comments

Comments
 (0)