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

id, title, original_id

id	title	original_id
version-0.38-alertios	alertios	alertios

AlertIOS #

AlertIOS provides functionality to create an iOS alert dialog with a message or create a prompt for user input.

Creating an iOS alert:

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

Creating an iOS prompt:

AlertIOS.prompt( 'Enter a value', null, text => console.log("You entered "+text) );

We recommend using the Alert.alert method for cross-platform support if you don't need to create iOS-only prompts.

Methods #

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

Create and display a popup alert.

Parameters:

Name and Type	Description
title string	The dialog's title.
[message] string	An optional message that appears below the dialog's title.
[callbackOrButtons] ?(() => void) | ButtonsArray	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] AlertType	Deprecated, do not use.

Example with custom buttons:

AlertIOS.alert( 'Update available', 'Keep your app up to date to enjoy the latest features', [ {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'Install', onPress: () => console.log('Install Pressed')}, ], );

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

Create and display a prompt to enter some text.

Parameters:

Name and Type	Description
title string	The dialog's title.
[message] string	An optional message that appears above the text input.
[callbackOrButtons] ?((text: string) => void) | ButtonsArray	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] AlertType	This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.
[defaultValue] string	The default text in text input.

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' );

Type Definitions #

AlertType #

An Alert button type

Type:
$Enum

Constants:

Value	Description
default	Default alert with no inputs
plain-text	Plain text input alert
secure-text	Secure text input alert
login-password	Login and password alert

AlertButtonStyle #

An Alert button style

Type:
$Enum

Constants:

Value	Description
default	Default button style
cancel	Cancel button style
destructive	Destructive button style

ButtonsArray #

Array or buttons

Type:
Array

Properties:

Name and Type	Description
[text] string	Button label
[onPress] function	Callback function when button pressed
[style] AlertButtonStyle	Button style

You can edit the content above on GitHub and send us a pull request!

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(): React.Element<any> { 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, }, });

Run this example

×

Powered by appetize.io

← PrevNext →