How to add a custom alert dialog in React Native?

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";

//...

<Modal
  style={[styles.modal, styles.modal1]}
  ref={"modal1"}
  swipeToClose={swipeToClose}
  onClosed={onClose}
  onOpened={onOpen}
  onClosingState={onClosingState}
>
  <Text style={styles.text}>Basic modal</Text>
  <Button
    title={`Disable swipeToClose(${swipeToClose ? "true" : "false"})`}
    onPress={() => setSwipeToClose(!swipeToClose)}
    style={styles.btn}
  />
</Modal>

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.