How to work with Alerts Dialog box in ReactNative?

React NativeJavascriptMobile Development

The Alert component helps to show a dialog box i.e., a pop up to the user with a title, message, buttons to know the confirmation from the user based on the message displayed.

The basic component of Alert is as follows −

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

To work with Alert component you need to import it as follows −

import { Alert } from 'react-native';

To get the pop-up you just have to call the Alert.alert() function. There are four params the alert() takes and it is title, message, buttons and options. The title is mandatory param and rest 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 }
);

The title here is ‘Hi’, the message is ‘Do you want to continue’, the buttons i want to show in the dialog box are Later, Cancel and Ok. For each button onPress event is added, that displays a console message. The last is the option param., this can be used to control the behaviour of the pop-up. On Android by default the pop-up will get closed if clicked outside the pop-up boundary. To disable that you can make use of { cancelable: false } as option param. When you click outside the pop-up area it will not get closed because of the cancelable set to false.

In the case of iOS you can specify any number of buttons, but in Android you can make use of three buttons. The three buttons in Android has a concept of a neutral, negative and a positive button for example −

  • If one button is specified , it will be like 'positive' one for example 'OK'.

  • If two buttons it will be first 'negative', and second 'positive'.For example 'Cancel' and 'OK'.

  • If three buttons it will be 'neutral', 'negative', 'positive'.For example 'Later', 'Cancel', and 'OK'

Here is a working example showing the working of Alert component −

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: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

Output

Example 2: Using { cancelable: true } for Android

In the example below the { cancelable: true }is used along with the title, message and buttons. So the alert box will look like below −

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 full 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: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={testAlert}
         />
      </View>
   );
}
export default App;

When you click outside the pop-up area it will get closed.

Output

raja
Published on 01-Jul-2021 08:11:12
Advertisements