Post
Ask Question

Create A Various Alert Control In React Native Using Visual Studio Code

Introduction

In this article, I have explained about alert control in react native with different types of alerts. We can provide an optional button in alert control and when user taps the button it will fire the respective onPress callback and dismiss the alert. By default, alert has the ok button.

Alert control API works both on Android and iOS and users can show the static alerts.

Android

On Android at most three buttons can be specified. It has a concept of a neutral, negative and positive button

  • If you specify one button, it will be the 'positive' one (such as 'OK')
  • Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
  • Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')

iOS​

On iOS you can specify any number of buttons. Each button can optionally specify a style, available options are represented by the AlertButtonStyle  enum.

Step 1

Create new react native expo project via terminal with help of the below comments

expo init Customelist
npm start

Step 2

Next step is to write the below code for assigning the alert control user interface view with button event’s inside default function.

const createTwoButtonAlert = () =>
    Alert.alert(
      "Information",
      "Hi There, This Manikandan and i would like to explain alert control in react native",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        {
            text: "OK", onPress: () => console.log("OK Pressed")
        }
      ]
    );
  const createThreeButtonAlert = () =>
    Alert.alert(
        "Information",
        "Hi There, This Manikandan and i would like to explain alert control in react native",
      [
        {
          text: "Ask me later",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        {
           text: "OK", onPress: () => console.log("OK Pressed")
        }
      ]
    );

Step 3  

Next step is to create the two different types of button with various alert control view and onPress calling event to get the alert view.

return (
    <View style={styles.container}>
      <Button title={"Alert with two button's"} onPress={createTwoButtonAlert} />
      <Button title={"Alert with three button's"} onPress={createThreeButtonAlert} />
    </View>
  );

Step 4

Finally, checkout the below full code with stylesheet design and execute the app in simulator or emulator.

import React from "react";
import { View, StyleSheet, Button, Alert } from "react-native";
const AlertApp = () => {
  const createTwoButtonAlert = () =>
    Alert.alert(
      "Information",
      "Hi There, This Manikandan and i would like to explain alert control in react native",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        {
            text: "OK", onPress: () => console.log("OK Pressed")
        }
      ]
    );
  const createThreeButtonAlert = () =>
    Alert.alert(
        "Information",
        "Hi There, This Manikandan and i would like to explain alert control in react native",
      [
        {
          text: "Ask me later",
          onPress: () => console.log("Ask me later pressed")
        },
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        {
           text: "OK", onPress: () => console.log("OK Pressed")
        }
      ]
    );
  return (
    <View style={styles.container}>
      <Button title={"Alert with two button's"} onPress={createTwoButtonAlert} />
      <Button title={"Alert with three button's"} onPress={createThreeButtonAlert} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
      marginTop:150,
  }
});
export default AlertApp;

Output

Conclusion

Hopefully, this article has given you sufficient information for you to create a react native various alert control view and run the app on both Android/iOS. Feel free to leave a comment if you would like me to further elaborate on anything within this article.


Similar Articles