Alert - allow for hiding alert title on iOS

Summary:
Wanted a "message-only" alert on iOS that doesn't lead to the message being large & bolded via the title field (current state).

Before:

![screen shot 2017-08-28 at 9 22 04 pm](https://user-images.githubusercontent.com/1047502/29801514-fc3629d2-8c3d-11e7-86d5-f0a866301814.png)

After:

![screen shot 2017-08-28 at 9 26 56 pm](https://user-images.githubusercontent.com/1047502/29801521-071aa1ca-8c3e-11e7-9bd0-0a4682d81979.png)

It also aligns iOS with Android's current behaviour.

The above screenhots were generated from the `RNTester` example added herein.

Allowed for passing an empty string through to `UIAlertController.alertControllerWithTitle` so that the message could be rendered in its expected place on iOS (not as the title).

* Ran RNTester & compared example alerts before & after (below default with titles, for example)
* Ran end-to-end manual test suite (it's the only one I could get through without unrelated failures)

Before

![screen shot 2017-08-28 at 9 21 53 pm](https://user-images.githubusercontent.com/1047502/29801775-6e249ff0-8c3f-11e7-888b-2c4d5177a7d7.png)

After

![screen shot 2017-08-28 at 9 26 40 pm](https://user-images.githubusercontent.com/1047502/29801781-7270c4a8-8c3f-11e7-8b9b-59b2649646f2.png)
Closes https://github.com/facebook/react-native/pull/15685

Differential Revision: D5729420

Pulled By: hramos

fbshipit-source-id: 4866b0b24473ae35e9ebae09f2cee13a49d7717e
This commit is contained in:
Wes Johnson 2017-08-30 17:14:28 -07:00 committed by Facebook Github Bot
parent 9f38d4590c
commit a64674375e
2 changed files with 16 additions and 2 deletions

View File

@ -110,6 +110,8 @@ class AlertIOS {
* @static
* @method alert
* @param title The dialog's title.
*
* An empty string hides the title.
* @param message An optional message that appears below
* the dialog's title.
* @param callbackOrButtons This optional argument should
@ -209,7 +211,7 @@ class AlertIOS {
var callback = type;
var defaultValue = message;
RCTAlertManager.alertWithArgs({
title: title || undefined,
title: title,
type: 'plain-text',
defaultValue,
}, (id, value) => {
@ -242,7 +244,7 @@ class AlertIOS {
}
RCTAlertManager.alertWithArgs({
title: title || undefined,
title: title,
message: message || undefined,
buttons,
type: type || undefined,

View File

@ -110,6 +110,18 @@ class SimpleAlertExampleBlock extends React.Component {
<Text>Alert that cannot be dismissed</Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={styles.wrapper}
onPress={() => Alert.alert(
'',
alertMessage,
[
{text: 'OK', onPress: () => console.log('OK Pressed!')},
]
)}>
<View style={styles.button}>
<Text>Alert without title</Text>
</View>
</TouchableHighlight>
</View>
);
}