React Native Answers

How to add a custom alert dialog in React Native?

Spread the love

To add a custom alert dialog in React Native, we use the react-native-modalbox library.

To install it, we run

npm install react-native-modalbox@latest --save

Then we use it by writing

import Modal from "react-native-modalbox";


  style={[styles.modal, styles.modal1]}
  <Text style={styles.text}>Basic modal</Text>
    title={`Disable swipeToClose(${swipeToClose ? "true" : "false"})`}
    onPress={() => setSwipeToClose(!swipeToClose)}

to import Modal from react-native-modalbox.

And then we add the Modal component into our view component.

We set the onClosingState, onClosed and onOpen handlers to component functions.

And we add the Text and Button components as content of the Modal.

We style the Modal by setting the style prop of the components.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *