In this article, we will explore how to create an alert in React Native using the React Native Alert API. This API enables the display of a small pop-up window that prompts the user for a choice.
The Alert API utilizes the alert method to present the alert dialog box. This dialog box can include three types of buttons: positive, negative, and neutral, each designed for performing different actions. Let's watch a demo video of what we are going to develop.
Demo Video
Syntax
Alert.alert(
"Alert Title",
"Alert Msg",
[
{
text: "Cancel"
},
{
text: "OK"
}
]
);
Methods
Method | Description |
|---|
alert() | This method is used to create and display a message in a pop-up. |
|---|
prompt() | This method is used to create and display a prompt to enter some text in the form of an alert. |
|---|
Parameters for the alert method
Parameter | Description |
|---|
Title | It is a required parameter that displays as the title of the dialog box. |
|---|
Message | It is an optional parameter that displays a message in the dialog box. |
|---|
Buttons | It is also an optional parameter that shows buttons on the dialog box. |
|---|
Options | It is also an optional parameter and is only available in Android. |
|---|
Parameters for the prompt method
Parameter | Description |
|---|
Title | It is a required parameter that displays as the title of the dialog box. |
|---|
Message | It is an optional parameter that displays a message in the dialog box. |
|---|
callbackOrButtons | This parameter can be passed as a function or as a button if passed as a function it will be called with the prompt's value when the user agrees with the condition. And if it passed as a button then it will be configured based on the array content. |
|---|
type | This parameter configures the text input. |
|---|
defaultValue | This parameter is a string that defines the default text in text input. |
|---|
keyboardType | This parameter is a string that defines the keyboard type of the first text field if it exists. |
|---|
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-name
Project Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo start
Then, the application will display a QR code.
- 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.
- For iOS users, simply scan the QR code using the Camera app.
- 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.
JavaScript
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.
JavaScript
// 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.
JavaScript
<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.
JavaScript
// 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.
JavaScript
// 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:
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
},
});
Output: