A guide on how to master React Native modal complex flows. Do you find using modals in React Native to be a bit of a pain? You’re not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows. Once you get past two modals, your main component is a mess, and the state is all over the place.  I’ve experienced this first-hand in many big companies, like (by AB-InBev), , and now at . Zé Delivery Alfred Delivery X-Team But don’t despair! Most people think that’s the only way. Still, in this article, I will explain how problems start and how to deal with them elegantly while improving your development experience. It will even help you use modals inside and outside React components (in Sagas, for example!) . This article's teachings have been encapsulated in this library: https://github.com/GSTJ/react-native-magic-modal The Challenges Of A “Simple Flow” Imagine this. You work on Facebook, and the Product Team asks for a ‘simple flow’: As a company, I would like to show a modal asking the user to rate the app between 0–5 stars after the user likes a post for the first time. a. I show another modal asking for feedback on how to improve. f the user rates it with less than four stars, b. , show a happy modal asking the user to rate us on the app store. Otherwise , show a ‘thanks’ modal, thanking the user for their support. Finally It isn’t so far-fetched, right? Four modals deep, it brings up a lot of questions from the developer's side. Where should this logic be placed? How should we process the output from the last modal? How do we keep this clean? Can you spot what the code will be like? Do you see yourself writing complex logic to handle the order of the modals, making sure every modal has already transitioned to not visible and having tons of useStates in place? The growth of the problem Imagine you finally did it, you finished the flow, and the Product Team loves the outcome! They now want to expand this flow to show up only once whenever the user likes **anything** for the first time, whether it’s a post, a comment, or a product. How would you approach it? You will have to copy-paste all those four modals on every screen where liking is possible. Maybe you even go ahead and turn all of those into a single component. Even then, adding this wrapper component to every screen is still needed. A few months pass by, and the Development Team now sees the complexity of handling likes differently on every screen and wants to pass this responsibility to a that can be called from anywhere. How do you show the modal only when the [Saga’s Action](https://(https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) is fired? Sagas run outside React components. Redux Saga I can confidently say that I’ve experienced those scenarios happening. Working in the food delivery industry, we consistently asked the user to rate the app, the delivery, and their purchase. How to avoid it? Let’s start by tackling the state. Managing it is one of the most important things while working with modals. Expose Internal Properties With “useImperativeHandle” In short, allows you to expose internal properties via Ref. If you have a modal component, you could use to expose their `show` and `hide` functions. Meaning it can take care of its own state without delegating to its parent component with , for example.  This can be helpful when you want to make your code clearer and avoid passing down many props. Let’s give it a try: useImperativeHandle useImperativeHandle props import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const ExampleModal = React.forwardRef((ref) => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(ref, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}); That's the transition to a better place. While this is a step in the right direction, it doesn't solve all of our problems. Namely: To use it, we need to pass a prop from a hook, which means we can't call outside React components. ref useRef show We still need to instantiate the component on every screen. There’s no way to use it on multiple screens without having repeated. ExampleModal Externally exposing the component’s Ref Most people don't know this, but React has a createRef method that can be used outside React components. In fact, it's even in the React-Navigation documentation for edge cases. In practice, the flexibility it brings can be seen here: import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const imperativeModalRef = React.createRef();

export const SmartExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(imperativeModalRef, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}; Now can be imported and used anywhere, as long as is on the root. We can use show and hide from every component, function, or . imperativeModalRef SmartExample Saga That solves most of our issues, but there's still one: It is hard to manage a project with many modal refs and modals on the root. That's where you can get creative with abstractions to make the render any modal you want! One way to do this is to make the function receive a component and render it. SmartExample show Going the extra mile Instead of making you guys reinvent the wheel, I've created an open-source library that encapsulates all these concepts and more, with full TypeScript support based on . react-native-modal Here's a basic idea of how to use it: "Talk is cheap. Show me the code." ― Linus Torvalds. import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const ResponseModal = ({ text }) => (
  <View>
    <Text>{text}</Text>
    <TouchableOpacity onPress={() => magicModal.hide()}>
      <Text>Close</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  // We call it with or without props, depending on the requirements of the modal.
  const result = await magicModal.show(ConfirmationModal);

  if (result.success) {
    return magicModal.show(() => <ResponseModal text="Success!" />);
  }

  return magicModal.show(() => <ResponseModal text="Failure :(" />);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
      <MagicModalPortal />
    </View>
  );
}; Example using react-native-magic-modal As you can see, it gives you loads of flexibility, unimaginable before, by simply abstracting the concepts we’ve gone through. Now, the confirmation flow can be called from anywhere. Inside or outside React components. Also, it automatically deals with common issues regarding modals. Did you know that, in React Native, you can’t show two modals simultaneously? Even if you try to show a modal right after another, it would probably fail as the last modal is still animating its ‘close’ state. Fortunately, the issue is already dealt with on our side. https://github.com/react-native-modal/react-native-modal/issues/30 This same logic has already been battle-tested on big companies I’ve worked on, like (by AB-InBev), , and . Zé Delivery Alfred Delivery X-Team The documentation is easy to understand and will give you a headstart. You can learn more about it here: React Native Magic Modal https://github.com/GSTJ/react-native-magic-modal Contributions accepted! Thanks for the read. If you liked the article, follow me on and . Linkedin Github Also Published here

Flow

Facebook

What Everyone Is Getting Wrong About React Native Modals

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

3 Basic Principles You MUST Know Before Using Redux

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

124 Stories To Learn About Frontend Development

3 Basic Principles You MUST Know Before Using Redux

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps