Skip to content

Commit

Permalink
Alert - allow for hiding alert title on iOS
Browse files Browse the repository at this point in the history
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 #15685

Differential Revision: D5729420

Pulled By: hramos

fbshipit-source-id: 4866b0b24473ae35e9ebae09f2cee13a49d7717e
  • Loading branch information
sterlingwes authored and facebook-github-bot committed Aug 31, 2017
1 parent 9f38d45 commit a646743
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
6 changes: 4 additions & 2 deletions Libraries/Alert/AlertIOS.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -242,7 +244,7 @@ class AlertIOS {
}

RCTAlertManager.alertWithArgs({
title: title || undefined,
title: title,
message: message || undefined,
buttons,
type: type || undefined,
Expand Down
12 changes: 12 additions & 0 deletions RNTester/js/AlertExample.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down

0 comments on commit a646743

Please sign in to comment.