This is a searchable version of the documentation included in the open source project React Native.

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!')}, ] )

Methods #

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

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

Edit on GitHubRun this exampleExamples #

'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> ); } }, { title: 'Prompt', render(): React.Component { return <PromptExample /> } }]; class PromptExample extends React.Component { constructor(props) { super(props); this.promptResponse = this.promptResponse.bind(this); this.state = { promptValue: undefined, }; this.title = 'Type a value'; this.defaultValue = 'Default value'; this.buttons = [{ text: 'Custom cancel', }, { text: 'Custom OK', onPress: this.promptResponse }]; } render() { return ( <View> <Text style={{marginBottom: 10}}> <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue} </Text> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}> <View style={styles.button}> <Text> prompt with title & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}> <View style={styles.button}> <Text> prompt with title & custom buttons </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}> <View style={styles.button}> <Text> prompt with title, default value & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}> <View style={styles.button}> <Text> prompt with title, default value & custom buttons </Text> </View> </TouchableHighlight> </View> ); } 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, }, });