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,
      alignitems: 'center',
      margintop: 100
   }
})

output

when you click the button, you will see the following −