React Native - Alert

In this chapter, we will understand how to create custom Alert component.

Step 1: App.js

import React from  react 
import AlertExample from  ./alert_example.js 

const App = () => {
   return (
      <AlertExample />
   )
}
export default App

Step 2: alert_example.js

We will create a button for triggering the showAlert function.

import React from  react 
import { Alert, Text, TouchableOpacity, StyleSheet } from  react-native 

const AlertExample = () => {
   const showAlert = () =>{
      Alert.alert(
          You need to... 
      )
   }
   return (
      <TouchableOpacity onPress = {showAlert} style = {styles.button}>
         <Text>Alert</Text>
      </TouchableOpacity>
   )
}
export default AlertExample

const styles = StyleSheet.create ({
   button: {
      backgroundColor:  #4ba37b ,
      width: 100,
      borderRadius: 50,
      apgnItems:  center ,
      marginTop: 100
   }
})

Output

When you cpck the button, you will see the following −