RFC : Modal v2

[ancyrweb]

Introduction

As a maintainer of this package, it has become obvious the code is difficult to maintain.

• The surface area is wide, it covers animations, presentationStyle, backdrop management, covering screen, swipe management and scrolling management
• The interface is huge and looks like a 5 legged sheep that tries to be the jack of all cards and master of none
• The tests don't cover all the cases, they have been added later
• The component is a stateful component (a class), which makes it difficult to modulate
• Parts of the code cover obscure edge cases that are difficult to identify, maintainers are afraid to touch it and break things
• There's a single file of 700+ LOC, the separation of concern isn't clean and it's difficult to identify the part of code that should be touched in order to fix a bug
• It has a dependency on an external library (rn-animatable) although the user might not need it

Goal

The goal of this RFC is to discuss a complete rewrite of the modal package.

• What are the boundaries of the modal, and how shall we support the edge cases (animation, gesture, scrolls)
• How are we going to maintain backward compatibility and announce it to users

Here are the requirements, I believe, should be kept in our mind while moving forward.

• The whole surface of the modal should be testable and tested against a sound suite of tests
• The typing support (via TypeScript) should be complete
• External dependencies must be optional
• The raw modal should only support the default behavior : display a modal.

Going forward, we might even consider embed native code and manage the modal responsibility altogether (as part of the Lean Core effort)

Ideas

Here are the main ideas I've thought of :

• Rewriting the Modal as a simple component providing only the default behaviour
  • Styling
  • Backdrop
  • BackButton handling
• Create a plugin system that can hooks into the internal and extend the default behaviour of the modal
• Create plugins for
  • Animation (that require RN-Animatable) and a set of default animations
  • Gesture
• Educate on how to use it correctly and promote good patterns, eventually by setting up a real doc using github hosted pages.
• Enhance DX
  • Provide a complete set of tests (Unit and E2E)
  • Use linting

Proposal

This part is still being studied.

Here's an example of what this ideal world would look like.

import {Text} from 'react-native';
import Modal, {useModalVisibility} from 'react-native-modal/v2';
import AnimationPlugin from 'react-native-modal/v2/animation';
import SwipePlugin from 'react-native-modal/v2/swipe';

const App = () => {
  const [visible, show, hide] = useModalVisibility();

  return (
    <Modal isVisible={visible} onRequestClose={hide}>
      <Modal.Backdrop
        color={'#a0a0a0'}
        opacity={0.7}
        transitionInTiming={300}
        transitionOutTiming={300}
        useNativeDriver={true}
      />
      <Modal.Content>
        <Text>This is some text</Text>
      </Modal.Content>
      <Modal.Plugins>
        <AnimationPlugin
          in={'slideInUp'}
          inTiming={300}
          out={'slideOutDown'}
          outTiming={300}
        />
        <SwipePlugin
          threshold={300}
          direction={['up', 'down']}
          useNativeDriver={true}
        />
      </Modal.Plugins>
    </Modal>
  );
};

In this draft, we're using children as a way to add behaviour to the modal.

• The user manually adds what he needs. If he wants to ditch the backdrop, he just has to remove the Modal.Backdrop children. We can also provide a way to render a custom backdrop and pass it the props, so the user can customize it.
• Plugins are added declaratively and the changes propagates automatically. Each one is optional.
• The content of the modal is wrapped inside the Modal.Content to differentiate from other components (and allow for specific customization/hooking from plugins). I believe the Modal.Contentcomponent (aka the Content Renderer) will be primordial for plugin interaction.

[mmazzarolo]

Amazing work, thanks @ancyrweb 👏

I'm also pinging a few people that have been interested in discussing this topic in the past: @nandorojo @RichardLindhout @ChristianTucker @theohdv @Titozzz

First of all, here's some historical context on how we got to this point — so that hopefully we won't make the same mistakes again 🥲

Regarding the discussion, here's my feedback.

---

I 100% agree with the introuduction/pain-points you mentioned.

One thing I want to highlight, though, is that I think we should also solve the main issue RNM users are directly experiencing: bugs and edge cases caused by React-Native's built-in Modal component (as discussed in #597)
Do we still wanna use React-Native's built-in Modal component? Do we use a portal-like solution? Do we support both cases? And if we do, how are we planning to deal with edge cases and bugs?

What are the boundaries of the modal, and how shall we support the edge cases (animation, gesture, scrolls)

I'll think about it. Supporting everything we do support now would be great, but doing so while providing a nice, modular API could take quite a while. I'm mostly curious about how we'll end up "hooking" the plugins into the modal lifecycle/ui/behaviour.

How are we going to maintain backward compatibility and announce it to users

Hot take: we shouldn't strive for backward compatibility because, at the current state, the modal component hasn't been updated in months/years. I think slowing down the development of "v2" because of backward compatibility would have made sense only if "v1" was still actively being supported and maintained (which is not the case).

Here are the requirements, I believe, should be kept in our mind while moving forward.
The whole surface of the modal should be testable and tested against a sound suite of tests
The typing support (via TypeScript) should be complete
External dependencies must be optional
The raw modal should only support the default behavior : display a modal.

Easy yes from me here 👍

Rewriting the Modal as a simple component providing only the default behaviour

Sounds good. Something to keep in mind here though: the modal code won't ever be "simple" even for default cases if we plan to expose hooks into its behaviour/lifecycle/ui accessible thorugh plugins.

Create a plugin system that can hooks into the internal and extend the default behaviour of the modal

Yes 👍

Animation (that require RN-Animatable) and a set of default animations

I think we should build the animation plugin in-house and using the Animated API. We can expose a subset of very common animation preset, and also allow consumers to provide their own custom presets. Here's a PoC of this I worked on last year.

Here's an example of what this ideal world would look like.

Looks similar to what we're doing in React-Native-Dialog (but I guess it's a common pattern nowadays?)
For more behaviour-specific stuff, I'd assume react hooks might be helpful here to "hook" into the modal's low-level APIs.

[ancyrweb]

Do we still wanna use React-Native's built-in Modal component ?

This is a valid concern, seeing how many problems we need to route back to the native Modal, that would clean up a lot of issues.

Hot take: we shouldn't strive for backward compatibility

Sounds good to me, but i'm afraid people might migrate from one major to another without double-checking. Hopefully, they can roll-back.

the modal code won't ever be "simple"

Indeed, we'll probably do a lot of stuff. I think it should all be centered around a set of concerns agreed upon beforehand, so that the cognitive load of working on the core is reduced.

I think we should build the animation plugin in-house

I'm totally on it, we should host the most necessary plugins (animation, gestures...) and provide a full-featured package.

Looks similar to what we're doing in React-Native-Dialog

In essence, yes it is ! I got inspired by what folks are doing in Gutenberg (WordPress). I think it's a neat pattern.

[Titozzz]

Fyi, I've been using reanimated + portals to create my own modals and I'm not looking back. The OG modal from react native is way too buggy and doesn't even support multiple.

I do believe, nowadays that it's quite easy to implement your own modal with reanimated. If interested I can ask if I can share some code with you guys.

[ancyrweb]

Had too many problems with the default modal as well. Also, i'm not sure it is a portable solution.
Investigating a Portal solution has been investigated a lot by @mmazzarolo and i'd love to give it a try !

[mmazzarolo]

I'm good with it 👍

[ancyrweb]

@mmazzarolo drafted something here https://github.com/ancyrweb/react-native-modal-v2/
So far looks like it's working pretty fine. What do you think ?

[mmazzarolo]

I'll try to run it this weekend 👍