How to use alert dialog in ReactNative?

The alert component helps to display a dialog box, that is, a pop-up window with a title, message, and buttons to the user to understand the user's confirmation based on the displayed message.

The basic component alert is as follows-

Alert.alert('yourtile', 'yourmessage', [yourbuttons], ‘options’)

To use the alert component you need to import it as follows-

import { Alert } from 'react-native';

To get the popup you just call Alert.alert () function. Alert() has four parameters, namely title, message, button and option. The title is a mandatory parameter, the rest of the parameters are optional.

Here is a simple example on how to use Alert.alert() -

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: false }
);

Here the title is "Hi" and the message is "Do you want to continue" and I want to add a message in the dialog box The buttons shown are Later, Cancel, and OK. For each button onPress event added, the event displays a console message. Finally, there is the options parameter, which can be used to control the behavior of the pop-up window. On Android, by default, a popup will close if clicked outside its boundaries. To disable it you can use { cancelable: false } as the options parameter. When you click outside the popup area, it won't close since Cancelable is set to false.

In iOS, you can specify any number of buttons, but in Android, you can use three buttons. Three buttons in Android have the concept of Neutral, Negative and Positive buttons -

• If you specify a button, it will be something like "Positive" 'eg "OK".

• If there are two buttons, the first one is "negative" and the second one is "positive". For example "Cancel" and "OK".

• If there are three buttons, they are "Neutral", "Negative" and "Positive". For example "Later", "Cancel" and "OK"

This is a working example showing how the alert component works -

Example 1: Display of alert box

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: false }
   );
   return (
      <View style={{flex :1, justifyContent: &#39;center&#39;, margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

Output

##Example 2: Using {cancelable: true} in Android

In the following example, {cancelable: true } Used with titles, messages and buttons. So the alert box will look like this -

Alert.alert(
   "Hi",
   "Do you want to continue?",
   [
      {
         text: "Later",
         onPress: () => console.log("User pressed Later")
      },
      {
         text: "Cancel",
         onPress: () => console.log("Cancel Pressed"),
         style: "cancel"
      },
      { text: "OK",
         onPress: () => console.log("OK Pressed")
      }
   ],
   { cancelable: true }
);

The complete working example is as follows -

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   const testAlert = () =>
   Alert.alert(
      "Hi",
      "Do you want to continue?",
      [
         {
            text: "Later",
            onPress: () => console.log("User pressed Later")
         },
         {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
         },
         { text: "OK",
            onPress: () => console.log("OK Pressed")
         }
      ],
      { cancelable: true }
   );
   return (
      <View style={{flex :1, justifyContent: &#39;center&#39;, margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

When you click outside the popup area it will close.

Output

The above is the detailed content of How to use alert dialog in ReactNative?. For more information, please follow other related articles on the PHP Chinese website!