In mobile app development, providing immediate feedback to users is essential for creating interactive experiences.
Alerts are a key tool for notifying users of important information, confirming actions, or requesting input.
In this blog, we’ll explore the basics of using React Native’s built-in Alert component, focusing on how to implement alerts effectively to enhance usability and user experience.
We’ll also cover customization options, such as adding buttons and making alerts cancelable, ensuring you can tailor them to fit your app’s needs.
By the end of this post, you’ll be ready to use alerts to improve the interactivity of your React Native app. Let’s get started!
Understanding the React Native Alert and Button Example–
1. Importing React and Required Components
|
1 2 |
import React, { Component } from 'react'; import { Alert, AppRegistry, Button, StyleSheet, View, Text } from 'react-native'; |
These are the basic components of react native.
React: The core library used to build components in React Native.
Component: The base class from which React components are extended.
AppRegistry: Registers the app’s entry point (often required for app startup, though not used in this specific code)
Button: A built-in React Native component that renders a clickable button.
StyleSheet: Used to define and manage styles for the components.
View: A container component used for layout and structuring UI elements.
Text: A component used for displaying text on the screen.
2. Creating the ButtonBasics Component
|
1 |
export default class ButtonBasics extends Component { |
We define a class component called ButtonBasics which is a subclass of Component. It will render the UI elements and handle actions like button clicks.
3. Defining the showAlert Method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
showAlert() { Alert.alert( 'Alert Title', 'My Alert Msg', [ { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel', }, { text: 'OK', onPress: () => console.log('OK Pressed') }, ] ); } |
showAlert: This is the function triggered when the button is pressed.Alert.alert: Displays a modal alert with a title (“Alert Title”) and a message (“My Alert Msg”).
- The alert has two buttons:
- Cancel: When clicked, logs
"Cancel Pressed"to the console. - OK: When clicked, logs
"OK Pressed"to the console.
- Cancel: When clicked, logs
style: 'cancel'is applied to the Cancel button to indicate it’s a cancel action.
4. Rendering the UI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { return ( <View style={styles.container}> {/* App Bar */} <View style={styles.appBar}> <Text style={styles.appBarText}>Alerts in React Native</Text> </View> {/* Centered buttons */} <View style={styles.buttonWrapper}> <View style={styles.buttonContainer}> <Button onPress={this.showAlert1} title="Alert Button" /> </View> </View> </View> ); } |
The render() method defines the UI elements that will be displayed.View is used to create the overall structure of the app and the layout of the components. Inside the View, we have:
- App Bar (
appBar): Displays the title of the app at the top of the screen. - Button: When pressed, triggers the
showAlertmethod to display an alert.
5. Styling the App (StyleSheet)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 60, // Add padding to avoid overlap with the app bar justifyContent: 'center', // Centers the buttons vertically alignItems: 'center', // Centers the buttons horizontally }, appBar: { height: 60, backgroundColor: '#000000', // Dark background color for the app bar justifyContent: 'center', alignItems: 'center', position: 'absolute', // Sticks the app bar to the top of the screen top: 0, left: 0, right: 0, zIndex: 1, // Ensures app bar is above other elements }, appBarText: { fontSize: 20, color: '#fff', // White text color fontWeight: 'bold', }, buttonWrapper: { flex: 1, // Takes up remaining space justifyContent: 'center', // Vertically centers the buttons alignItems: 'center', // Horizontally centers the buttons }, buttonContainer: { margin: 10, // Spacing between buttons width: 250, // Width of the button container }, }); |
For Stylesheet-
The container serves as the main wrapper, using flex: 1 to fill available space and paddingTop: 60 to avoid overlapping with the app bar.
It centers the button both vertically and horizontally with justifyContent: ‘center’ and alignItems: ‘center’.
The appBar stays fixed at the top with position: ‘absolute’, top: 0, left: 0, right: 0 stretching it across the screen.
backgroundColor: ‘#000000’ and zIndex: 1 ensure it’s visually distinct and remains above other elements.
For the appBarText, fontSize: 20, color: ‘#fff’, and fontWeight: ‘bold’ make the text clear and bold.
The buttonWrapper centers the button, while margin: 10 and width: 250 manage spacing and size to prevent stretching.
Full Code –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React, { Component } from 'react'; import { Alert, AppRegistry, Button, StyleSheet, View, Text } from 'react-native'; export default class ButtonBasics extends Component { showAlert() { Alert.alert( 'Alert Title', 'My Alert Msg', [ { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel', }, {text: 'OK', onPress: () => console.log('OK Pressed')}, ] ); } render() { return ( <View style={styles.container}> {/* App Bar */} <View style={styles.appBar}> <Text style={styles.appBarText}>Alerts in React Native</Text> </View> {/* Centered buttons */} <View style={styles.buttonWrapper}> <View style={styles.buttonContainer}> <Button onPress={this.showAlert} title="Alert Button" /> </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 60, // Add padding to avoid overlap with the app bar justifyContent: 'center', // Centers the buttons vertically alignItems: 'center', // Centers the buttons horizontally }, appBar: { height: 60, backgroundColor: '#000000', justifyContent: 'center', alignItems: 'center', position: 'absolute', // Sticks the app bar to the top of the screen top: 0, left: 0, right: 0, zIndex: 1, // Ensures app bar is above other elements }, appBarText: { fontSize: 20, color: '#fff', fontWeight: 'bold', }, buttonWrapper: { flex: 1, // Takes up remaining space justifyContent: 'center', // Vertically centers the buttons alignItems: 'center', // Horizontally centers the buttons }, buttonContainer: { margin: 10, // Spacing between buttons width:250, }, }); |
Output –
Alerts in React Native
Learn how to use the Alert component to display notifications and improve user interactions in your mobile app.
Conclusion
In this blog, we learned about Alerts in React Native and explored how to display alert dialogues in response to user actions using the built-in Alert component.
Alerts enhance the user experience by providing timely feedback, confirming actions, and ensuring smooth interactions within the app.
React Native’s Alert component helps display messages and buttons easily.
In addition to these elements, we also covered essential tips for customizing alerts and fine-tuning the app’s UI to suit your needs.
You can also check other blogs from here.
Thank you for reading! ❤️