React NativeAlertIOS
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(
+button will be an 'OK' button
AlertIOS.alert(
'Foo Title',
'My Alert Msg',
[
- {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
- {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+ {text: 'OK', onPress: () => console.log('OK Pressed!')},
+ {text: 'Cancel', onPress: () => console.log('Cancel Pressed!'), style: 'cancel'},
]
)
Methods #
static alert(title: string, message?: string, buttons?: Array<{ - text: ?string; + text?: string; onPress?: ?Function; - }>, type?: string) #
static prompt(title: string, value?: string, buttons?: Array<{ - text: ?string; + style?: AlertButtonStyle; + }>, type?: AlertType) #
static prompt(title: string, value?: string, buttons?: Array<{ + text?: string; onPress?: ?Function; + style?: AlertButtonStyle; }>, callback?: Function) #
Edit on GitHubRun this exampleExamples #
'use strict';
var React = require('react-native');
@@ -44,7 +45,7 @@ exports.examples /TouchableHighlight>
<TouchableHighlight style={styles.wrapper}
onPress={() => AlertIOS.alert(
- null,
+ 'Foo Title',
null,
[
{text: 'Button', onPress: () => console.log('Button Pressed!')},
@@ -98,6 +99,87 @@ exports.examples );
}
},
+{
+ title: 'Alert Types',
+ render() {
+ return (
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => AlertIOS.alert(
+ 'Hello World',
+ null,
+ [
+ {text: 'OK', onPress: (text) => console.log('OK pressed')},
+ ],
+ 'default'
+ )}>
+
+ <View style={styles.button}>
+ <Text>
+ {'default'}
+ </Text>
+ </View>
+
+ </TouchableHighlight>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => AlertIOS.alert(
+ 'Plain Text Entry',
+ null,
+ [
+ {text: 'Submit', onPress: (text) => console.log('Text: ' + text)},
+ ],
+ 'plain-text'
+ )}>
+
+ <View style={styles.button}>
+ <Text>
+ plain-text
+ </Text>
+ </View>
+
+ </TouchableHighlight>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => AlertIOS.alert(
+ 'Secure Text Entry',
+ null,
+ [
+ {text: 'Submit', onPress: (text) => console.log('Password: ' + text)},
+ ],
+ 'secure-text'
+ )}>
+
+ <View style={styles.button}>
+ <Text>
+ secure-text
+ </Text>
+ </View>
+
+ </TouchableHighlight>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => AlertIOS.alert(
+ 'Login & Password',
+ null,
+ [
+ {text: 'Submit', onPress: (details) => console.log('Login: ' + details.login + '; Password: ' + details.password)},
+ ],
+ 'login-password'
+ )}>
+
+ <View style={styles.button}>
+ <Text>
+ login-password
+ </Text>
+ </View>
+
+ </TouchableHighlight>
+ </View>
+ );
+ }
+},
{
title: 'Prompt',
render(): React.Component {
@@ -117,10 +199,11 @@ class PromptExample extends this.title = 'Type a value';
this.defaultValue = 'Default value';
this.buttons = [{
- text: 'Custom cancel',
- }, {
text: 'Custom OK',
onPress: this.promptResponse
+ }, {
+ text: 'Custom Cancel',
+ style: 'cancel',
}];
}