react-native/docs/alertios.md

id, title

id	title
alertios	alertios

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.

Use this API for iOS-specific features, such as prompting the user to enter some information. In other cases, especially to show static alerts, use the cross-platform Alert API.

AlertIOS.alert( 'Enter password', null, [ {text: 'Submit', onPress: (text) => console.log('Password: ' + text)}, ], 'secure-text' )

Methods #

static alert(title: string, message?: string, buttons?: Array<{ text?: string; onPress?: ?Function; style?: AlertButtonStyle; }>, type?: AlertType) #

static prompt(title: string, value?: string, buttons?: Array<{ text?: string; onPress?: ?Function; style?: AlertButtonStyle; }>, callback?: Function) #

Prompt the user to enter some text.

Edit on GitHubRun this exampleExamples #

'use strict';

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

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: 'Alert Types', render() { return ( <View> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( 'Hello World', null, [ {text: 'OK', onPress: (text) => console.log('OK pressed'), type: 'default'} ] )}>

      &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>
          <span class="token punctuation">{</span><span class="token string">'default'</span><span class="token punctuation">}</span>
        &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">alert<span class="token punctuation">(</span></span>
        <span class="token string">'Plain Text Entry'</span><span class="token punctuation">,</span>
        <span class="token keyword">null</span><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">'Submit'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Text: '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span> type<span class="token punctuation">:</span> <span class="token string">'plain-text'</span><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">'Cancel'</span><span class="token punctuation">,</span> onPress<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> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Cancel'</span><span class="token punctuation">)</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 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>
          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">alert<span class="token punctuation">(</span></span>
        <span class="token string">'Secure Text Entry'</span><span class="token punctuation">,</span>
        <span class="token keyword">null</span><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">'Submit'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Password: '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span> type<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 punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<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> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Cancel'</span><span class="token punctuation">)</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 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">alert<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 punctuation">[</span>
          <span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Submit'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span>details<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Login: '</span> <span class="token operator">+</span> details<span class="token punctuation">.</span>login <span class="token operator">+</span> <span class="token string">'; Password: '</span> <span class="token operator">+</span> details<span class="token punctuation">.</span>password<span class="token punctuation">)</span><span class="token punctuation">,</span> type<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 punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<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> console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span><span class="token string">'Cancel'</span><span class="token punctuation">)</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 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>

} }, { title: 'Prompt', render(): React.Component { return <PromptExample /> } }];

class PromptExample extends React.Component { constructor(props) { super(props);

<span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>promptResponse<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</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>

<span class="token keyword">this</span><span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Type a value'</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue <span class="token operator">=</span> <span class="token string">'Default value'</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>buttons <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>promptResponse
<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>

}

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 keyword">this</span><span class="token punctuation">.</span>prompt<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<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 keyword">this</span><span class="token punctuation">.</span>promptResponse<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 keyword">this</span><span class="token punctuation">.</span>prompt<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<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>buttons<span class="token punctuation">,</span> <span class="token keyword">null</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 &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 keyword">this</span><span class="token punctuation">.</span>prompt<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue<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>promptResponse<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> default value &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 keyword">this</span><span class="token punctuation">.</span>prompt<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>defaultValue<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>buttons<span class="token punctuation">,</span> <span class="token keyword">null</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> default value &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;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

}

prompt() { // Flow's apply support is broken: #7035621 ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments); }

promptResponse(promptValue) { this.setState({ promptValue }); } }

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

Next →