Skip to content

Commit 76bf71e

Browse files
Saadnajmifacebook-github-bot
Saadnajmi
authored and
facebook-github-bot
committed
Merge AlertIOSExample page into AlertExample page (#35586)
Summary: `AlertIOS` was deprecated and removed long ago (e2bd7db) but there continues to be a test page with the name `AlertIOS` in RN-Tester. `AlertIOSExample.js` contains valid examples of how to use `Alert.prompt()` so it's worth keeping them around. Let's move those into `AlertExample.js` and remove `AlertIOSExample.js`. While we're here, let's do some extra fixes to the test page: - Remove `showsIndividualExamples = true`. For whatever reason, I needed to remove this to show the examples properly... - Convert all uses of `<TouchableHighlight>` with `<Pressable>`. The latter replaces the former, so I thought that made sense.. Some extra context: In React Native macOS, we had forked `AlertIOS` into `AlertMacOS`, with a corresponding example page. This PR was made while working on removing those (microsoft#1548). ## Changelog [INTERNAL] [CHANGED] - Moved `Alert.prompt` examples into common rn-tester test page Pull Request resolved: #35586 Test Plan: Test page shows up fine on iOS . ![Simulator Screen Recording - iPhone 14 Pro - 2022-12-07 at 15 15 40](https://user-images.githubusercontent.com/6722175/206318170-1893c8f6-0596-4825-8312-f45e45557095.gif) Reviewed By: lunaleaps Differential Revision: D41825889 Pulled By: NickGerleman fbshipit-source-id: 82e4405b1f3a1ccb558b5a5038a90416e7a32c29
1 parent 74859c7 commit 76bf71e

File tree

4 files changed

+157
-229
lines changed

4 files changed

+157
-229
lines changed

‎Libraries/Alert/Alert.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ interface AlertOptions {
3333
* button will be an 'OK' button.
3434
*
3535
* This is an API that works both on iOS and Android and can show static
36-
* alerts. To show an alert that prompts the user to enter some information,
37-
* see `AlertIOS`; entering text in an alert is common on iOS only.
36+
* alerts. On iOS, you can show an alert that prompts the user to enter
37+
* some information.
3838
*
3939
* ## iOS
4040
*

‎packages/rn-tester/js/examples/Alert/AlertExample.js

Lines changed: 152 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
import * as React from 'react';
1212
import type {RNTesterModule} from '../../types/RNTesterTypes';
13-
import {Alert, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
13+
import {Alert, StyleSheet, Text, Pressable, View} from 'react-native';
1414

1515
// Shows log on the screen
1616
const Log = ({message}: {message: string}) =>
@@ -31,14 +31,14 @@ const AlertWithDefaultButton = () => {
3131

3232
return (
3333
<View>
34-
<TouchableHighlight
34+
<Pressable
3535
testID="alert-with-default-button"
3636
style={styles.wrapper}
3737
onPress={() => Alert.alert('Alert', alertMessage)}>
3838
<View style={styles.button}>
3939
<Text>Tap to view alert</Text>
4040
</View>
41-
</TouchableHighlight>
41+
</Pressable>
4242
</View>
4343
);
4444
};
@@ -50,7 +50,7 @@ const AlertWithTwoButtons = () => {
5050

5151
return (
5252
<View>
53-
<TouchableHighlight
53+
<Pressable
5454
style={styles.wrapper}
5555
onPress={() =>
5656
Alert.alert('Action Required!', alertMessage, [
@@ -61,7 +61,7 @@ const AlertWithTwoButtons = () => {
6161
<View style={styles.button}>
6262
<Text>Tap to view alert</Text>
6363
</View>
64-
</TouchableHighlight>
64+
</Pressable>
6565
<Log message={message} />
6666
</View>
6767
);
@@ -74,7 +74,7 @@ const AlertWithThreeButtons = () => {
7474

7575
return (
7676
<View>
77-
<TouchableHighlight
77+
<Pressable
7878
testID="alert-with-three-buttons"
7979
style={styles.wrapper}
8080
onPress={() =>
@@ -87,7 +87,7 @@ const AlertWithThreeButtons = () => {
8787
<View style={styles.button}>
8888
<Text>Tap to view alert</Text>
8989
</View>
90-
</TouchableHighlight>
90+
</Pressable>
9191
<Log message={message} />
9292
</View>
9393
);
@@ -102,7 +102,7 @@ const AlertWithManyButtons = () => {
102102

103103
return (
104104
<View>
105-
<TouchableHighlight
105+
<Pressable
106106
style={styles.wrapper}
107107
onPress={() =>
108108
Alert.alert(
@@ -117,7 +117,7 @@ const AlertWithManyButtons = () => {
117117
<View style={styles.button}>
118118
<Text>Tap to view alert</Text>
119119
</View>
120-
</TouchableHighlight>
120+
</Pressable>
121121
<Log message={message} />
122122
</View>
123123
);
@@ -130,7 +130,7 @@ const AlertWithCancelableTrue = () => {
130130

131131
return (
132132
<View>
133-
<TouchableHighlight
133+
<Pressable
134134
style={styles.wrapper}
135135
onPress={() =>
136136
Alert.alert(
@@ -149,7 +149,7 @@ const AlertWithCancelableTrue = () => {
149149
<View style={styles.button}>
150150
<Text>Tap to view alert</Text>
151151
</View>
152-
</TouchableHighlight>
152+
</Pressable>
153153
<Log message={message} />
154154
</View>
155155
);
@@ -162,7 +162,7 @@ const AlertWithStyles = () => {
162162

163163
return (
164164
<View>
165-
<TouchableHighlight
165+
<Pressable
166166
style={styles.wrapper}
167167
onPress={() =>
168168
Alert.alert('Styled Buttons!', alertMessage, [
@@ -186,7 +186,7 @@ const AlertWithStyles = () => {
186186
<View style={styles.button}>
187187
<Text>Tap to view alert</Text>
188188
</View>
189-
</TouchableHighlight>
189+
</Pressable>
190190
<Log message={message} />
191191
</View>
192192
);
@@ -200,7 +200,7 @@ const AlertWithStylesPreferred = () => {
200200

201201
return (
202202
<View>
203-
<TouchableHighlight
203+
<Pressable
204204
style={styles.wrapper}
205205
onPress={() =>
206206
Alert.alert('Foo Title', alertMessage, [
@@ -219,12 +219,132 @@ const AlertWithStylesPreferred = () => {
219219
<View style={styles.button}>
220220
<Text>Tap to view alert</Text>
221221
</View>
222-
</TouchableHighlight>
222+
</Pressable>
223223
<Log message={message} />
224224
</View>
225225
);
226226
};
227227

228+
const PromptOptions = () => {
229+
const [promptValue, setPromptValue] = React.useState<string>('');
230+
231+
const customButtons = [
232+
{
233+
text: 'Custom OK',
234+
onPress: setPromptValue,
235+
},
236+
{
237+
text: 'Custom Cancel',
238+
style: 'cancel',
239+
},
240+
];
241+
242+
return (
243+
<View>
244+
<Text style={styles.promptValue}>
245+
<Text style={styles.bold}>Prompt value:</Text> {promptValue}
246+
</Text>
247+
248+
<Pressable
249+
style={styles.wrapper}
250+
onPress={() => Alert.prompt('Type a value', null, setPromptValue)}>
251+
<View style={styles.button}>
252+
<Text>prompt with title & callback</Text>
253+
</View>
254+
</Pressable>
255+
256+
<Pressable
257+
style={styles.wrapper}
258+
onPress={() => Alert.prompt('Type a value', null, customButtons)}>
259+
<View style={styles.button}>
260+
<Text>prompt with title & custom buttons</Text>
261+
</View>
262+
</Pressable>
263+
264+
<Pressable
265+
style={styles.wrapper}
266+
onPress={() =>
267+
Alert.prompt(
268+
'Type a phone number',
269+
null,
270+
null,
271+
'plain-text',
272+
undefined,
273+
'phone-pad',
274+
)
275+
}>
276+
<View style={styles.button}>
277+
<Text>prompt with title & custom keyboard</Text>
278+
</View>
279+
</Pressable>
280+
281+
<Pressable
282+
style={styles.wrapper}
283+
onPress={() =>
284+
Alert.prompt(
285+
'Type a value',
286+
null,
287+
setPromptValue,
288+
undefined,
289+
'Default value',
290+
)
291+
}>
292+
<View style={styles.button}>
293+
<Text>prompt with title, callback & default value</Text>
294+
</View>
295+
</Pressable>
296+
297+
<Pressable
298+
style={styles.wrapper}
299+
onPress={() =>
300+
Alert.prompt(
301+
'Type a value',
302+
null,
303+
customButtons,
304+
'login-password',
305+
'[email protected]',
306+
)
307+
}>
308+
<View style={styles.button}>
309+
<Text>
310+
prompt with title, custom buttons, login/password & default value
311+
</Text>
312+
</View>
313+
</Pressable>
314+
</View>
315+
);
316+
};
317+
318+
const PromptTypes = () => {
319+
return (
320+
<View>
321+
<Pressable
322+
style={styles.wrapper}
323+
onPress={() => Alert.prompt('Plain Text Entry')}>
324+
<View style={styles.button}>
325+
<Text>plain-text</Text>
326+
</View>
327+
</Pressable>
328+
<Pressable
329+
style={styles.wrapper}
330+
onPress={() => Alert.prompt('Secure Text', null, null, 'secure-text')}>
331+
<View style={styles.button}>
332+
<Text>secure-text</Text>
333+
</View>
334+
</Pressable>
335+
<Pressable
336+
style={styles.wrapper}
337+
onPress={() =>
338+
Alert.prompt('Login & Password', null, null, 'login-password')
339+
}>
340+
<View style={styles.button}>
341+
<Text>login-password</Text>
342+
</View>
343+
</Pressable>
344+
</View>
345+
);
346+
};
347+
228348
const styles = StyleSheet.create({
229349
wrapper: {
230350
borderRadius: 5,
@@ -241,6 +361,9 @@ const styles = StyleSheet.create({
241361
bold: {
242362
fontWeight: 'bold',
243363
},
364+
promptValue: {
365+
marginBottom: 10,
366+
},
244367
});
245368

246369
export const examples = [
@@ -301,6 +424,20 @@ export const examples = [
301424
return <AlertWithStylesPreferred />;
302425
},
303426
},
427+
{
428+
title: 'Prompt Options',
429+
platform: 'ios',
430+
render(): React.Node {
431+
return <PromptOptions />;
432+
},
433+
},
434+
{
435+
title: 'Prompt Types',
436+
platform: 'ios',
437+
render(): React.Node {
438+
return <PromptTypes />;
439+
},
440+
},
304441
];
305442

306443
export default ({
@@ -310,6 +447,5 @@ export default ({
310447
documentationURL: 'https://reactnative.dev/docs/alert',
311448
description:
312449
'Alerts display a concise and informative message and prompt the user to make a decision.',
313-
showIndividualExamples: true,
314450
examples,
315451
}: RNTesterModule);

0 commit comments

Comments
 (0)