Question 33367 in React native Question posted in
The official React Native documentation can be found here.

How to Add Awesome Alert in Functional Component – React native

I’m using Awesome Alert for customize alert but I would like to apply it in functional component environment. This is my design

Alert Design

And this is my code

<AwesomeAlert
            show={true}
            showProgress={false}
            title="AwesomeAlert"
            message="I have a message for you!"
            closeOnTouchOutside={false}
            closeOnHardwareBackPress={false}
            showCancelButton={true}
            showConfirmButton={true}
            cancelText="Reject"
            confirmText="Approve"
            confirmButtonColor="#AEDEF4"
            cancelButtonColor="#DD6B55"
            onCancelPressed={() => {
              console.log("Reject")
            }}
            onConfirmPressed={() => {
              console.log("Approve")
            }}
          />

My question is, is Awesome Alert can only be applied in Class component? How am I able to implement it in Functional Component like the original Alert React Native?

Tags:

2

Answers


  1. 0

    You can use AwesomeAlert inside a functional component as you would inside a class component’s render() function; any React component that can be rendered from a class component can also be rendered from a functional component.

    Login or Signup to reply.
  2. 0

    Just put it inside your return part of your functional component and it will work

    For Example like this:

    return (
    <View>
        <AwesomeAlert
            show={true}
            showProgress={false}
            title="AwesomeAlert"
            message="I have a message for you!"
            closeOnTouchOutside={false}
            closeOnHardwareBackPress={false}
            showCancelButton={true}
            showConfirmButton={true}
            cancelText="Reject"
            confirmText="Approve"
            confirmButtonColor="#AEDEF4"
            cancelButtonColor="#DD6B55"
            onCancelPressed={() => {
              console.log("Reject")
            }}
            onConfirmPressed={() => {
              console.log("Approve")
            }}
          />
    </View>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search