Alert in React Native

Example on Alert

In this part, we will create an app using react-native. In this app, first, we will create a normal screen in the App.js file with the button "GENERATE ALERT". After clicking the button, you will get an alert dialog having the title "Learn", message as "Want to Learn more about Alerts in React Native" and three buttons:

1. Later: “Ask me later pressed” is printed on the console.
2. Cancel: “Not interested” is printed on the console.
3. OK: You be directed to this article’s link on your virtual or physical device.

App.js file

Code:

import React, { Component } from 'react';  
import { Text, Alert, AppRegistry, Button, StyleSheet, View, Linking } from 'react-native';  
  
export default class AlertDemo extends Component {  
    showAlert() {  
        Alert.alert(  
            'Learn',  
            'Want to learn more about Alerts in React Native.',  
            [  
                {text: 'Later', onPress: () => console.log('Ask me later pressed')},  
                {  
                    text: 'Cancel',  
                    onPress: () => console.log('Not interested'),  
                    style: 'cancel',  
                },  
                {text: 'OK', onPress: () => Linking.openURL('https://www.codingninjas.com/studio/library/set-in-dart')},  
            ],  
            {cancelable: false}  
        ) 
    }  
    render() {  
        return (  
            <View style={styles.container}> 
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}>
                  <Text style={styles.titleText}>Alert Demo</Text>
                </View>
                <View style={styles.buttonContainer}>  
                    <Button  
                        onPress={this.showAlert}  
                        title="Generate Alert" 
                        color="orange"
                    />  
                </View>
                <View style={styles.bottomText}>
                  <Text>
                  <Text style={styles.bottomText1}>code</Text>
                  <Text style={styles.bottomText2}>studio</Text>
                  </Text>
                  <Text>Powered By</Text>
                  <Text style={styles.bottomText3}>By Coding Ninjas</Text>
                </View>  
            </View>  
        );  
    }  
}  
  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',
        backgroundColor: 'teal'
    },  
    buttonContainer: {
        flex: 1,  
        margin: 30  
    },
    titleText: {
      fontSize: 50,
      color: 'black',
      fontWeight: "bold"
  },
  bottomText: {
      marginBottom:30,
      textAlign: 'center',
      alignItems: "center",
    },
    bottomText1: {
      fontSize: 25,
      fontWeight: 'bold',    
    },
    bottomText2: {
      fontSize: 25,
    },
    bottomText3: {
      fontWeight: 'bold',
      color: 'orange'
    }   
})  

Output:

Explanation: In the code written above alert () function is liable for showing the alert, it provides all the data and functionalities to the alert. We are calling this alert from the onPress property of the button, which is present inside the render() function.

Also see,  React Native Reanimated

Frequently Asked Questions

What is the work of StyleSheet in react-native?

React Native StyleSheet is a technique for customizing an application with JavaScript code. Its primary use is to style and structure components in an application.

What is the use of the render() function in react-native?

The render function in React is used to render HTML to a web page (). The objective of the method is to display the provided HTML code within the specified HTML element. We can read props and states in the render() method and deliver our JSX code to the app's root component.

How is Linking used in react-native?

Linking allows you to engage with both incoming and outgoing app links from a single interface. In the example illustrated above, we have used the linking for outgoing app links.

Conclusion

In this article, we've extensively discussed the Alert in React Native. We've discussed its properties, methods and definition, along with an example.

We hope this blog has helped you enhance your knowledge regarding the Alert in React Native. Do check out the awesome content on the Coding Ninjas Website, Android Development, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow. 

Happy Coding!