react native-tutorial

React Native Alert

An alert dialogue with a specific title and message can be displayed using the React Native Alert API. To open an alert dialogue, it use the alert() method. Three distinct lists of actionable buttons (combinations of neutral, negative, and positive) are offered in this alert dialogue. Any of these buttons must be pressed to invoke the onPress callback method and turn off the alert. Alert only comes with the OK button by default.

AlertIOS is used to produce the alert that asks the user to enter certain information. Only iOS is capable of using it.

Example

In the centre of the screen of the example app we’re building is a button. The user will see an alert dialogue with a few alternatives when they click this button. Within a Text component on the screen, the chosen option will be visible (the alert dialogue will disappear right after the decision is made).

The Code

Create a new React Native project with React Native CLI or Expo, then replace the default code in App.js with the following:

import { useState } from "react";
import { StyleSheet, View, Alert, Button, Text } from "react-native";

const App = () => {
  // this function will be called when the button is pressed
  const showAlert = () => {
    return Alert.alert(
      // the title of the alert dialog
      "My Title",

      // the message you want to show up
      "Today is a beautiful day",

      // buttons
      // On iOS there is no limit of how many buttons you can use, but on Android three is the maximum
      // If you're developing an app for both platforms, don't use more than three buttons
      [
        // the first button
        {
          text: "Agree",
          onPress: () => setChoice("Agree"),
        },

        // the second button
        {
          text: "Disagree",
          onPress: () => setChoice("Disagree"),
        },

        // the third button
        {
          text: "I Dunno",
          onPress: () => setChoice("I do not know"),
        },
      ]
    );
  };

  const [choice, setChoice] = useState("");

  return (
    <View style={styles.screen}>
      <Button title="Show Alert Dialog" onPress={showAlert} />
      <Text style={styles.text}>{choice}</Text>
    </View>
  );
};

// just some styles for our app
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    marginTop: 30,
    fontSize: 24,
  },
});

export default App;

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *