Modals

[gorhom]

Overview

With the scale of the ShowTime application the usage of modals had increased to more screens and views, which currently utilise Modal, ModalSheet and React Navigation Screen + Modal.

However, the current solution has issues:

• required extra addition of props to get it working as expected from our design system.
• keyboard handling is a not working as expected.
• Screens has to create a component just to wrap the modal with the screen content.

these issues make it difficult to scale or maintain the current screen and the addition of new screens and views.

Requirements

• Engineers should be able to launch a modal screen or view that renders as centre modal view on Web and as bottom sheet view on Android & iOS without the need to any modification or extra handling for any platform.
• Engineers should be able to customise their modal screen or view headers, body, backdrop and container overriding the default styling.
• Engineers should handle the keyboard adjustments.
• Engineers should provides all default actions - like dismiss -.
• Engineers should be able to listen to modal screen / view callback events.

// TBD

Suggested Solution

The goal of this initiative is to simplify the usage of modal views and screens in Showtime, abstracting all default implementation away from engineers and let them focus on the modal's content.

Modal View

Modal view is defined here in Figma. Where it has two look state for web and mobile platforms.

• Web: it will render as an alert modal with a backdrop to dismiss it.
• Mobile: it will render as a bottom sheet with a backdrop to dismiss it.

Modal view has 3 main components that should be usable in all platforms:

• Header
  • Close Button
  • Title TextView
• Body
  • View
• Backdrop
  • Touchable View
• Container
  • [web] View
  • [android] BottomSheet
  • [iOS] BottomSheet when used as modal view and empty when used with modal screen

+-- modal
|  +-- modal.header.tsx
|  +-- modal.body.tsx
|  +-- modal.backdrop.tsx
|  +-- modal.container.tsx
|  +-- modal.container.web.tsx
|  +-- modal.container.android.tsx
|  +-- modal.tsx

Requirements

• Engineer should be able to customise the main components style (tw) by props.
• Engineer should be able to listen to the modal events like (onClose, onDismiss).
• Engineer should be able to use the modal without any platform customisation.
• // TBD

Specifications

• Modal View should be responsible of drawing the modal view as defined in the design system.
• Modal View should not be responsible of handling the keyboard appearance.
• Modal View should be documented via props, in-code docs and readme file.
• // TBD

Modal Screen

Modal screen is defined here in Figma, where it renders differently for each platform.

• Web: it will render as an alert modal with a backdrop to dismiss it.
• iOS: it will render as React Navigation Modal ( a native iOS presentation modal ).
• Android: it will render as a modal view defined above.

Modal screen uses most of Modal view components but will differ in action handling, this component should be abstracted than screen root component.

+-- modal-screen
|  +-- with-modal-screen.tsx

Requirements

• ... Modal View Requirements
• Engineer should be able to use this component with HOC.
• // TBD

Specifications

• Modal Screen should handle navigation actions.
• // TBD

Tasks

• // TBD

[intergalacticspacehighway]

Looks good to me! This will clean some stuff like Platform.OS === "android" ? ModalSheet : Modal from screen 😄. So it will go in the HOC?

[axeldelafosse]

I know it's a tricky one but maybe in the requirements we could add "The modal should play nicely with WebViews"? I detected some issues with Magic and the Android modal. But it's probably related to the keyboard handling

[axeldelafosse]

TODO: share a screencast of the specific issue in the Sign In modal

[axeldelafosse]

Update: looks like this issue is related to Magic. They are looking into it.

[axeldelafosse]

In the Modal View, what are you referring to when you say "use alert component"?

[axeldelafosse]

"Alert" here refers to a "modal in center" on tablets or desktop

[intergalacticspacehighway]

I think we'll need react navigation modal for screens where we use navigator to open the modal.

[axeldelafosse]

We don't use React Navigation on web anymore 🎉

[axeldelafosse]

@gorhom now that we have the next-react-native app up and running again, I think that we can work on this ✨