Create a reusable global alert in React Native
Every developer who has ever created an application has come across a scenario where they were required to display an alert that something did not go as planned or that some information was missing, or maybe just tell the user that his request was successful.
There are many possible solutions how to handle this. The simplest solution is the Alert dialogue that comes included with the React Native framework. But what, we want more control over how the alert looks and feels. At the end of the day, you want to have a common design language across your application.
There already is a very popular package and a standard component in React Native called “Modal”. That gives you an easy way to customise the alert to your liking, making it easy to position the modal on the screen and adopt its design. I like this component. But it comes with a fatal flaw. The way the component is designed (the same goes for the build-in component and the package) does not allow you to have two modals open simultaneously. I encountered this issue when I implemented a form inside a modal that extended from the bottom. When the user filled out the form and pressed the submit button, the form closed, and a standard modal alert should pop up notifying them that the request was successful or not. Now for some reason, this always froze my app. It took me quite a while before I figured out that react-native-modal had this limitation.
I asked myself, what should I do now? Should I refactor all my modals that contain a form to a normal screen, or should I rework the alert? Of course, there is only one feasible option: creating your own alert. From the code below, you can see it is relatively easy.
This CustomAlert looks like a regular component. And it is. What makes it look like an alert is the “absolute style”. Property position: ‘absolute’ lays the alert over others on the screen, and with properties top, left, bottom and right, we set where the alert should be displayed. In this case, we centre the View on the screen. The style modalElementsContainer is then the one that sets the size of the alert. Here, we want the alert to take 90% of the screen’s width and adapt its height according to the elements inside it.
But this does not make it a “Global” alert. We would still have to create the component in each screen we want to display it. Again this is easily solvable using Redux or any global state management tool.
But this does not make it a “Global” alert. We would still have to create the component in each screen we want to display it. Again this is easily solvable using Redux or any global state management tool.
Setup the component only once in your js entry point.
And then call it from anywhere you like by simply dispatching an action.
From the code, we can see how easy this is. With this component, we can now display a simple alert with a title and subtitle anywhere inside the app. The next step would be to expand this and allow more customisation. For example, we could add “children” or a button with a custom on-press function. But this is a problem for another day and out of scope for this article.
Further reading
(a) App Registry
