đ„ Stacks on stacks in React Native
I had the opportunity to talk about this during a lightning talk at react-europe 2019 so if youâre more of a video type of person: here you go!
Being a React Native developer has been a great experience lately. More and more bugs I was facing are getting fixed and React Native itself is about to get to the next level.
But I always had some really specific things I couldnât be satisfied with the way they were. It went from rendering Markdown, to navigating from screens to screens, to fetching data declaratively, etc.
Today weâll be talking about a new problem Iâve been dealing with lately: modals.
The Context đ§
Modals are the most common UI elements we use as developers. As soon as we want to display an error, loading, success state, any important message or a specific part of your app: theyâre more often than not the answer to our question.
When I talk about modals, in this particular context, you could also consider alert, dialog, popup, etc as valid synonyms.
In the case of mobile applications, itâs fair to say that modals are even more important/used than on the web. Alerts, errors, date pickers, time pickers, etc all of them could be labeled as modals.
As of today, Iâve mainly tried 2 tools that help you display modals: React Nativeâs Modal component and React Native Communityâs react-native-modal
. These two are great solutions! Modal uses nativeRCTModalHostView
component and react-native-modal
uses Modal under the hood and itâs fair to say that: they get the job done.
However, they didnât quite match our needs, as weâre about to see in the following section.
The Problems đ€
One day, Irem Lopsum, coworker and good friend of mine came to me with a problem:
âI canât find a React Native modal library that just get the job done properly.â
Weâre working together at colorfy (a design studio based in Berlin and specialized in IoT hardware & software) and Iâve seen him working one very specific app that exacerbated this need. That app has extensive use of modals and dealing with several <Modal />
components, updating local states to toggle their visibility, changing their content, etc: it was just too cumbersome. Thatâs why his main requirement was:
1. âWrite once, call from anywhere with minimal effort.â
Next issue (and maybe the most complex one) one was the impossibility of displaying several modals and stacking (đ) them. This sentence may not make a lot of sense, âwhy would you display multiple modals at once ?!â, but bear with me for this one: we needed it! Unfortunately, both React Nativeâs Modal
and react-native-modal
canât do that (mainly because of how RCTModalHostView
they both use works). But this was actually the second requirement:
2. âAbility to render multiple modals and stack them.â
Last one: animations. We really loved the fact that react-native-modal
allows you to define your own custom animations (through react-native-animatable
). However, besides the amazing work done by the community with React Native Animatable, we felt that that approach was still a bit too complicated for what we were starting to have in mind.
As you may have understood, by that time, we already had a pretty solid idea of what we wanted to have and we actually found a perfect example of the API weâd like to have: React Navigationâs! Iâm going to explain why in the next section of this article, but getting inspiration from React Navigationâs API would tick a lot of boxes. It would also help us match another requirement that we couldnât with the 2 abovementioned existing solutions:
3. âEasy control over transitions and animation relationship between modals within the stack.â
All of this so that we could have âoverall flexibility to not be limited with what one can doâ as Irem Lopsum told me. You control whatâs rendered, how, when, from start to finish and even after that (stacking!). And after a few days of hacking, failing, bouncing ideas back and forth, we finally came up with something that totally satisfied both of us.
The Solution đĄ
React Native Modalfy!
This is our answer to all the problems Irem Lopsum was facing. The API we came up with is something that we hope youâll see as:
Simple, fast to implement yet totally flexible.
Using react-native-modalfy
could be summed up in 3 steps:
1. You add <ModalProvider />
Itâs a normal Provider
thatâs going to give you access to your modal across your whole app thanks to Reactâs Context API.
2. You set up your stack with createModalStack()
This is where all the magic happens. Youâll have to set up all your modals so that the library can access them before render time. From there youâll feed ModalProvider
the output ofcreateModalStack()
through itâs only variable: stack
. If youâre familiar with React Navigation, this API might actually ring a bell and thatâs why we took inspiration from it: looked really straightforward to us!
3. You use your modals with openModal()
/ closeModal()
From there you can open as many modal as you want from wherever you want in your app. React Native Modalfy lets you use this function (and other things) from the modal
prop. You can access this prop from your modal component props, or if youâre anywhere else in your app, just use withModal
HOC or useModal
hook to get the job done!
And thatâs it! While still being really simple to set up, React Native Modalfy gives you so much flexibility on where to display your modals, what to display and even how, as we gonna see in a minute!
Examples đŹ
As I mentioned above, the most interesting part of the library is what createModalStack()
allows you to do. I gave you a little glimpse of what it could do earlier but here it is in full bloom:
And I want to bring your attention over transitionOptions
because you can have a lot of fun with this one. It basically sets transitions based on the animated value React Native Modalfy uses under the hood to animate your stack. Based on that animated value, youâll be able to setup custom interpolations that will be applied to your modal
component.
So let me illustrate with a few examples what you can achieve with that and how easy it would be:
or you could do something like:
maybe a little bit of:
and how about:
As you can see: your imagination is the only limit! All this only took Irem Lopsum between 35 and 40 lines of code. As soon as you know how to use React Native styles and interpolation: thatâs it, youâre good to go! đ
And thatâs it, folks! Weâre totally opened to any feedback, idea, critic, PR you may have. Just chime in on the repo or ping us @Charles_Mangwa/@iremlopsum. Until then, simply run yarn add react-native-modalfy
and have fun!
Oh btw! If youâre interested: colorfy is actively hiring in Berlin! Weâre looking for people into React Native, but also back-end, marketing, product design, hardware, project management, and even more. Just check out our careers section and maybe see you there soon (tell them Charles sent you đ)!