The React Native Alert API is used to display alert dialogs with a title, message, and buttons. It is commonly used to show important information or ask for user confirmation.
- It uses the Alert.alert() method to display alert dialogs.
- It supports multiple buttons like OK, Cancel, Yes, and No.
- It can handle user actions using button press callback functions.
import React from 'react';
import { View, Button, Alert } from 'react-native';
const App = () => {
const showAlert = () => {
Alert.alert(
"Alert Title",
"This is a simple alert message",
[
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
};
return (
<View style={{ marginTop: 50 }}>
<Button
title="Show Alert"
onPress={showAlert}
/>
</View>
);
};
export default App;
Syntax
Alert.alert(
"Alert Title",
"Alert Msg",
[
{
text: "Cancel"
},
{
text: "OK"
}
]
);Methods for Alert API
The React Native Alert API provides methods to display alert dialogs and handle user responses.
- Alert.alert() – Displays an alert dialog with title, message, and buttons. (Main method)
- Alert.prompt() – Displays an alert with input field to get user text input. (iOS only method)
- Alert.dismissAll() – Closes all currently visible alerts. (Utility method)
Parameters for the alert method
The Alert.alert() method accepts the following parameters to customize the alert dialog:
- title – The main heading of the alert dialog. (String)
- message – The descriptive text shown below the title. (String)
- buttons – An array of button objects to define button text and actions. (Array)
- options – Optional configuration like cancelable behavior. (Object, optional)
- type (promptType) – Defines input type for prompt alerts (mainly iOS). (String, optional)
Syntax
Alert.alert(
"Title", // title
"Message", // message
[{ text: "OK" }], // buttons
{ cancelable: true } // options
);Parameters for the prompt method
The Alert.prompt() method is used to display an alert dialog with a text input field (iOS only).
- title – The title of the prompt dialog. (String)
- message – The message shown below the title. (String, optional)
- callbackOrButtons – Function or array of buttons to handle user input. (Function or Array)
- type – Defines the input type (e.g., plain-text, secure-text, login-password). (String, optional)
- defaultValue – Sets the default text in the input field. (String, optional)
- keyboardType – Defines the keyboard type (e.g., default, numeric, email-address). (String, optional)
Syntax
Alert.prompt(
"Enter Name",
"Please enter your name",
(text) => console.log(text),
"plain-text",
""
);
Now let's start with the implementation.
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
1. For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
2. For iOS users, simply scan the QR code using the Camera app.
3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Start Coding
Now let's implement the alert functionality. Here we created a button, and when someone clicks on that button, an alert will pop up.
- Import libraries: Import required libraries at the top of the file.
import React from 'react'; // Import React library to use React components and hooks
import {
StyleSheet, // Import StyleSheet for styling the components
View, // Import View component to create a container
Button, // Import Button component to create a clickable button
Alert // Import Alert to display alert dialogs
} from 'react-native'; // Import components from react-native library
- StyleSheet: Create a StyleSheet to style components like a container.
// Define styles for the components
const styles = StyleSheet.create({
container: { // Style for the container view
flex: 1, // Take up the full height of the screen
backgroundColor: '#fff', // Set background color to white
alignItems: 'center', // Align items horizontally to the center
justifyContent: 'center', // Align items vertically to the center
},
});
- Button: This Button component is used to call an alert function when the user taps on it.
<Button title={"Click me"} onPress={alert} />
- alert function: This function is used to display an alert dialog box which contains a Title and message with two buttons.
// Function to display an alert dialog
const alert = () => {
Alert.alert( // Display an alert dialog
"GeeksforGeeks", // Title of the alert
"How are you!", // Message of the alert
[
{
text: "Cancel", // Button with "Cancel" text
},
{
text: "OK", // Button with "OK" text
}
]
);
}
- App Component: Wrap the Button with a View and return that inside the App function to render and place the alert functioninside the App function, also make sure to export the App.
// Define the main App component as the default export
export default function App() {
// Function to display an alert dialog
const alert = () => {
Alert.alert( // Display an alert dialog
"GeeksforGeeks", // Title of the alert
"How are you!", // Message of the alert
[
{
text: "Cancel", // Button with "Cancel" text
},
{
text: "OK", // Button with "OK" text
}
]
);
}
// Return the UI of the App component
return (
<View style={styles.container}> {/* Container view with styles applied */}
{/* Button with title "Click me" that triggers the alert function on press */}
<Button title={"Click me"} onPress={alert} />
</View>
);
}
Complete Source Code
App.js:
import React from 'react'; // Import React library to use React components and hooks
import {
StyleSheet, // Import StyleSheet for styling the components
View, // Import View component to create a container
Button, // Import Button component to create a clickable button
Alert // Import Alert to display alert dialogs
} from 'react-native'; // Import components from react-native library
// Define the main App component as the default export
export default function App() {
// Function to display an alert dialog
const alert = () => {
Alert.alert( // Display an alert dialog
"GeeksforGeeks", // Title of the alert
"How are you!", // Message of the alert
[
{
text: "Cancel", // Button with "Cancel" text
},
{
text: "OK", // Button with "OK" text
}
]
);
}
// Return the UI of the App component
return (
<View style={styles.container}> {/* Container view with styles applied */}
<Button title={"Click me"} onPress={alert} /> {/* Button with title "Click me" that triggers the alert function on press */}
</View>
);
}
// Define styles for the components
const styles = StyleSheet.create({
container: { // Style for the container view
flex: 1, // Take up the full height of the screen
backgroundColor: '#fff', // Set background color to white
alignItems: 'center', // Align items horizontally to the center
justifyContent: 'center', // Align items vertically to the center
},
});