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: string, message?: string, callbackOrButtons?: ?(() => void) | ButtonsArray, type?: AlertType) #
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: string, message?: string, callbackOrButtons?: ?((text: string) => void) | ButtonsArray, type?: AlertType, defaultValue?: string) #
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'
)
'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: 'Prompt Options',
render(): ReactElement {
return <PromptOptions />;
}
},
{
title: 'Prompt Types',
render() {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>
plain-text
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
<View style={styles.button}>
<Text>
secure-text
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
<View style={styles.button}>
<Text>
login-password
</Text>
</View>
</TouchableHighlight>
</View>
);
}
}];
class PromptOptions extends React.Component {
state: any;
customButtons: Array<Object>;
constructor(props) {
super(props);
this.saveResponse = this.saveResponse.bind(this);
this.customButtons = [{
text: 'Custom OK',
onPress: this.saveResponse
}, {
text: 'Custom Cancel',
style: 'cancel',
}];
this.state = {
promptValue: undefined,
};
}
render() {
return (
<View>
<Text style={{marginBottom: 10}}>
<Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue}
</Text>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}>
<View style={styles.button}>
<Text>
prompt with title & callback
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}>
<View style={styles.button}>
<Text>
prompt with title & custom buttons
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
<View style={styles.button}>
<Text>
prompt with title, callback & default value
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>
<View style={styles.button}>
<Text>
prompt with title, custom buttons, login/password & default value
</Text>
</View>
</TouchableHighlight>
</View>
);
}
saveResponse(promptValue) {
this.setState({ promptValue: JSON.stringify(promptValue) });
}
}
var styles = StyleSheet.create({
wrapper: {
borderRadius: 5,
marginBottom: 5,
},
button: {
backgroundColor: '#eeeeee',
padding: 10,
},
});