[English] React Native Beginner — Alert Confirm Box

React Native — Alert

Want to read this tutorial in Indonesian?

As a Web Developer who tries to become a Mobile App Developer. Perhaps some things will need to adjust the syntax of the programming language being studied. React Native has a default component that has been provided to make Alert Confirmation.

This Alert Confirmation we often use to inquire according to the user application. Suppose a confirmation Alert appears “Are you sure you want to delete this data?” With the option YES or NO. If YES then it will run the delete data command and if NO then will cancel the command by closing Alert.

In addition to using option YES or NO. We can also give third button option, for example ASK ME LATER. If clicked, it will execute another command.

Example Usage of Alert

Here is an example of usage for the 2 options of the button options

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
} from 'react-native';
export default class App extends Component {
  button() {
    Alert.alert(
      'Alert Title',
      'Alert message here...',
      [
        {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
        {text: 'YES', onPress: () => console.warn('YES Pressed')},
      ]
    );
  }
render() {
    return (
        <TouchableOpacity onPress={() => this.button()}>
          <Text>Button</Text>
        </TouchableOpacity>
    );
  }
}

The position of the array index effects the sequence of the NO button and then the YES button, otherwise.

But if we want to add option with 3 button, then put in the first index

Alert.alert(
  'Alert Title',
  'Alert message here...',
  [
    {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
    {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
    {text: 'YES', onPress: () => console.warn('YES Pressed')},
  ]
);

Add cancelable: false property if we don’t want Alert closed when click on black drop background

Alert.alert(
  'Alert Title',
  'Alert message here...',
  [
    {text: 'Ask me later', onPress: () => console.warn('Ask me later pressed')},
    {text: 'NO', onPress: () => console.warn('NO Pressed'), style: 'cancel'},
    {text: 'OK', onPress: () => console.warn('OK Pressed')},
  ],
  { cancelable: false }
);

However if we want to display Alert without confirmation YES or NO. We can do like this

Alert.alert(
  'Alert Title',
  'Alert message here...',
);

Or another way, we can use JavaScript to display Alert

alert('Alert message here');

But the drawback if using Native JavaScript code, we can’t change the title of Alert.

Reference : https://facebook.github.io/react-native/docs/alert.html#docsNav

In addition to using the React Native Alert. We can also use other libraries to make Alert more customable.

• react-native-message-bar
• react-native-dropdownalert
• react-native-scl-alert
• react-native-simpledialog-android
• react-native-awesome-alert
• React Native: Native Styled Dialogs

That it all and thank you. Hope can be useful :)

Write the topic idea or request topic you are currently learning about React Native. Contribute your idea or request here http://bit.ly/RequestTopicReactNative