🥞 Stacks on stacks in React Native

Let’s talk about stacks! — Credits NIKLDN

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.

Currency modal — Credits Johny Vino

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.”

React Native Animatable in action!

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!

Customer satisfaction: 💯

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!

React Native Modalfy • Documentation

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 😁)!

colorfy • Jobs