React Native Create Alert Dialog in Android iOS Application Tutorial

Alert is basic component available in react native.  Alert component is used to display a simple alert message on both android and iOS applications screen. But using Alert we can also build our own Alert Dialog in react native applications with OK, CANCEL and ASK ME LATER button. The alert dialog is completely user modified and app developer himself can set its Title, Message, Ask Me Later button text, OK button text and Cancel button text.

Contents in this project Create Alert Dialog in Android iOS Application Example :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import AppRegistry, StyleSheet, Text, View, Button and Alert component in your project.

3. Create a function named as ShowAlertDialog() in your class. In this function we would create a Alert dialog message using Alert component.

4. Create a Root parent View inside render’s return block.

5. Create Button component inside Parent View and call the ShowAlertDialog() message on button onPress event.

6. Create style css class for View.

7. Complete source code for index.android.js / index.ios.js file:

Screenshot in iOS Application :

Alert DialogScreenshot in Android mobile application :

6 Comments

  1. How to use state for string in Alert?
    example:
    this.state={Name: ‘Alex’}
    Alert.alert(this.state.Name)

    error:
    undefined is not an object (evaluating ‘this.state.Name’).

  2. Can’t we apply custom style to this alert?

  3. Very nice
    Works at the first time !!!

Leave a Reply

Your email address will not be published.