Creating an easily reusable React Native alert modal

Photo by Łukasz Rawa on Unsplash

In this article, I will show you how to creating an easily reusable React Native alert modal using react-native-use-modal.

Examples of various alert modal

Mobile apps often present information to users via pop-ups. In React Native, we usually use Modal to display these pop-ups.

Let’s create a case of displaying alert modal with the same design but different title and content in two children. We will see how this is done in general, and how it can be changed when using react-native-use-modal.

In general,

a custom Modal component that implements a specific design is created and reused.

The alert modal we will create (without react-native-use-modal)

First, create a Modal component that displays the title and content. It also allows us to receive an OK button click event listener and visible state props.

In the first child component, we will always display an alert modal with a given title and content when clicked. Include the modal component as a result of the render, and create an ok button click event listener and visible state. The title and content to be displayed in the modal are defined directly in props.

In the second child component, when clicked, we will display an alert modal with different titles and contents depending on whether the current timestamp is even or odd.

How can it be changed?

This time, let’s see how to change it using react-native-use-modal.

The alert modal we will create (with react-native-use-modal)

First, install react-native-use-modal.

yarn add react-native-use-modal
# or
npm i react-native-use-modal

And let the ModalProvider component wrap the entire App component.

Now it’s time to create the AlertModal. This time, create a Modal hook using a function called createUseModal.

Here, the createUseModal function receives two generic arguments and one functional component.

The first generic argument means the type of the return value of modal, which is not used now, so leave it as void.

The second generic argument indicates the type of parameter to be passed when displaying modal. Here we define the title and content data types to be displayed in the alert modal.

The confirm function and param are passed as props to the functional component passed as a function argument.
The param value is passed as the type we specified as the second generic argument. You can use this value to display the title and content. And call the confirm function when the modal needs to end.

Let’s create the first child component that behaves the same as before. This time we use the useAlertModal hook we just defined. This hook returns an object, and when the modal is to be displayed, call the show method of this object to display the modal.

Can you see the difference? We no longer return modal components as return values of render, and we do not manage the display state of modal.

Next, we’ll create a second child component.

It’s likewise more concise. This is because the caller no longer manages the state of the modal.

Calling inside another hook

You can even call it from within another hook. Let’s say we have a custom hook that returns a function that performs a login operation. When the password does not match during login operation, maybe we want to notify the user through an alert modal.

Just call the modal hook and call the show method of the returned object. Pretty intuitive, isn’t it?

We have seen how to create a modal that is easy to reuse. You can also create a reusable collection of modal hooks using react-native-use-modal. There are other functions such as receiving the result from modal as a promise, so I recommend that you try it:

GitHub - Soomgo-Mobile/react-native-use-modal: Easy way to turn modal into hook

The examples used in this article are publicly available in a fully executable state:

zeallat/creating-reusable-react-native-alert-modal-examples