[ReactNative] AlertIOS.alert and examples

Examples/UIExplorer/AlertIOSExample.js

@@ -0,0 +1,98 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  AlertIOS,
+} = React;
+
+exports.framework = 'React';
+exports.title = 'AlertIOS';
+exports.description = 'iOS alerts and action sheets';
+exports.examples = [{
+  title: 'Alerts',
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg'
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with message and default button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            null,
+            null,
+            [
+              {text: 'Button', onPress: () => console.log('Button Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with only one button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            null,
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with 3 buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            '..............'.split('').map((dot, index) => ({
+              text: 'Button ' + index,
+              onPress: () => console.log('Pressed ' + index)
+            }))
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with too many buttons</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});

Examples/UIExplorer/UIExplorerList.js

@@ -41,6 +41,7 @@ var EXAMPLES = [
   require('./CameraRollExample.ios'),
   require('./MapViewExample'),
   require('./AppStateIOSExample'),
+  require('./AlertIOSExample'),
   require('./AdSupportIOSExample'),
   require('./AppStateExample'),
   require('./ActionSheetIOSExample'),

Libraries/Utilities/AlertIOS.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule AlertIOS
+ * @flow
+ */
+'use strict';
+
+var NativeModules = require('NativeModulesDeprecated');
+
+var RCTAlertManager = NativeModules.RCTAlertManager;
+
+var DEFAULT_BUTTON_TEXT = 'OK';
+var DEFAULT_BUTTON = {
+  text: DEFAULT_BUTTON_TEXT,
+  onPress: null,
+};
+
+/**
+ * AlertIOS manages native iOS alerts, option sheets, and share dialogs
+ */
+
+class AlertIOS {
+
+  /**
+   * Launches an alert dialog with the specified title and message.
+   *
+   * Optionally provide a list of buttons. Tapping any button will fire the
+   * respective onPress callback and dismiss the alert. By default, the only
+   * button will be an 'OK' button
+   *
+   * The last button in the list will be considered the 'Primary' button and
+   * it will appear bold.
+   *
+   * ```
+   * AlertIOS.alert(
+   *   'Foo Title',
+   *   'My Alert Msg',
+   *   [
+   *     {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+   *     {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+   *   ]
+   * )}
+   * ```
+   */
+  static alert(
+    title: ?string,
+    message: ?string,
+    buttons: ?Array<{
+      text: ?string;
+      onPress: ?Function;
+    }>
+  ): void {
+    var callbacks = [];
+    var buttonsSpec = [];
+    title = title || '';
+    message = message || '';
+    buttons = buttons || [DEFAULT_BUTTON];
+    buttons.forEach((btn, index) => {
+      callbacks[index] = btn.onPress;
+      var btnDef = {};
+      btnDef[index] = btn.text || DEFAULT_BUTTON_TEXT;
+      buttonsSpec.push(btnDef);
+    });
+    RCTAlertManager.alertWithArgs({
+      title,
+      message,
+      buttons: buttonsSpec,
+    }, (id) => {
+      var cb = callbacks[id];
+      cb && cb();
+    });
+  }
+
+}
+
+module.exports = AlertIOS;

Libraries/react-native/react-native.js

@@ -9,6 +9,7 @@ var ReactNative = {
   ...require('React'),
   Animation: require('Animation'),
   ActivityIndicatorIOS: require('ActivityIndicatorIOS'),
+  AlertIOS: require('AlertIOS'),
   AppRegistry: require('AppRegistry'),
   AppState: require('AppState'),
   AppStateIOS: require('AppStateIOS'),