react-native/website/versioned_docs/0.27/alertios.md

id, title, original_id

id	title	original_id
version-0.27-alertios	alertios	alertios

AlertIOS #

Edit on GitHub

The AlertsIOS utility provides two functions: alert and prompt. All functionality available through AlertIOS.alert is also available in the cross-platform Alert.alert, which we recommend you use if you don't need iOS-specific functionality.

AlertIOS.prompt allows you to prompt the user for input inside of an alert popup.

Methods #

static alert(title, message?, callbackOrButtons?, type?) #

Creates a popup to alert the user. See Alert.

• title: string -- The dialog's title.
• message: string -- An optional message that appears above the text input.

• callbackOrButtons -- This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'.

  If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys. style should be one of 'default', 'cancel' or 'destructive'.

• type -- deprecated, do not use

Example:

AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' );

static prompt(title, message?, callbackOrButtons?, type?, defaultValue?) #

Prompt the user to enter some text.

• title: string -- The dialog's title.
• message: string -- An optional message that appears above the text input.

• callbackOrButtons -- This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'.

  If passed an array of button configurations, each button should include a text key, as well as optional onPress and style keys (see example). style should be one of 'default', 'cancel' or 'destructive'.

• type: string -- This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.
• defaultValue: string -- the default value for the text field.

Example with custom buttons:

AlertIOS.prompt( 'Enter password', 'Enter your password to claim your $1.5B in lottery winnings', [ {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, ], 'secure-text' );

Example with the default button and a custom callback:

AlertIOS.prompt( 'Update username', null, text => console.log("Your username is "+text), null, 'default' )

Examples #

Edit on GitHub

'use strict';

var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, View, Text, TouchableHighlight, AlertIOS, } = ReactNative;

var { SimpleAlertExampleBlock } = require('./AlertExample');

exports.framework = 'React'; exports.title = 'AlertIOS'; exports.description = 'iOS alerts and action sheets'; exports.examples = [{ title: 'Alerts', render() { return <SimpleAlertExampleBlock />; } }, { title: 'Prompt Options', render(): ReactElement { return <PromptOptions />; } }, { title: 'Prompt Types', render() { return ( <View> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Plain Text Entry')}>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          plain<span class="token operator">-</span>text
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>

    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
    &lt;TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Secure Text'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'secure-text'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          secure<span class="token operator">-</span>text
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>

    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
    &lt;TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Login &amp; Password'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'login-password'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          login<span class="token operator">-</span>password
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>

    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

} }];

class PromptOptions extends React.Component { state: any; customButtons: Array<Object>;

constructor(props) { super(props);

// $FlowFixMe this seems to be a Flow bug, saveResponse is defined below this.saveResponse = this.saveResponse.bind(this);

<span class="token keyword">this</span><span class="token punctuation">.</span>customButtons <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  text<span class="token punctuation">:</span> <span class="token string">'Custom OK'</span><span class="token punctuation">,</span>
  onPress<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>saveResponse
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  text<span class="token punctuation">:</span> <span class="token string">'Custom Cancel'</span><span class="token punctuation">,</span>
  style<span class="token punctuation">:</span> <span class="token string">'cancel'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
  promptValue<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

}

render() { return ( <View> <Text style={{marginBottom: 10}}> <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue} </Text>

    <TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Type a value'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>saveResponse<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          prompt <span class="token keyword">with</span> title &amp; callback
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>

    &lt;TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Type a value'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>customButtons<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          prompt <span class="token keyword">with</span> title &amp; custom buttons
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>

    &lt;TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Type a value'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>saveResponse<span class="token punctuation">,</span> undefined<span class="token punctuation">,</span> <span class="token string">'Default value'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          prompt <span class="token keyword">with</span> title<span class="token punctuation">,</span> callback &amp; default value
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>

    &lt;TouchableHighlight
      style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>wrapper<span class="token punctuation">}</span>
      onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> AlertIOS<span class="token punctuation">.</span><span class="token function">prompt<span class="token punctuation">(</span></span><span class="token string">'Type a value'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>customButtons<span class="token punctuation">,</span> <span class="token string">'login-password'</span><span class="token punctuation">,</span> <span class="token string">'admin@site.com'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>

      &lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span>
          prompt <span class="token keyword">with</span> title<span class="token punctuation">,</span> custom buttons<span class="token punctuation">,</span> login<span class="token operator">/</span>password &amp; default value
        &lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

}

saveResponse(promptValue) { this.setState({ promptValue: JSON.stringify(promptValue) }); } }

var styles = StyleSheet.create({ wrapper: { borderRadius: 5, marginBottom: 5, }, button: { backgroundColor: '#eeeeee', padding: 10, }, });

Next →