Support for Presenting Modals on iOS and Android

Background

Occasionally in our app while building out flows, we have the need for “modals” so that the user can go do a one-off task.

Historically, we’ve solved this by using Modal from react-native and react-native-modal on iOS and Android, respectively. Presenting one of those modals wih an embedded navigation stack and screen worked well. However, we’re now looking at introducing more of them, and we are looking for a way to improve the experience.

On iOS, we want to achieve a fully native modal presentation, as documented here in the HIG.

On Android, we’re not quite sure yet - there’s no one-to-one analog between the two platforms that I see as being readily available like it is on iOS.

Prior Art

In our initial investigation, we found that react-native-screens and the native stack they provide there for react-navigation provides this, as documented here: https://github.com/software-mansion/react-native-screens/blob/3.3.0/native-stack/README.md#stackpresentation

The way this appears to work is by declaring the screen like any other screen in the stack, but specifying a specific option to present modally. Then, you “navigate” to the modal same as you would any other screen. On iOS this works as we would expect, and on Android it appears they just push a screen to the stack as normal but force a “slide in from the bottom” animation.

navigation

After an initial investiation, I have the following questions:

• Is this in scope of this project, since modals live outside of a standard “push/pop” navigation flow? I wouldn’t expect this library to handle web modals, for instance. Maybe this is functionality that best lives in another associated project.
  • A counterpoint to this would be that this repo does handle tab based navigation, which is a bit more mobile-specific, so maybe there is room for mobile-specific modals?
• Would the pattern of declaring modals as standard screens with special attributes would work here? They would require some special care. Would we want the presentation of a modal to impact the URL state, for instance?
• And finally, is this something that you’ve thought about before? Do you have an idea of the level of effort we may be looking at to build this, if we decide that it is a good candidate for this project?

[grahammendick]

Let’s take Twitter as an example. Say we want to deep link to a tweet and open a modal so the user can reply to that tweet. We build a link that navigates to Home → Tweet and pass a reply indicator in navigation data.

const link = stateNavigator.fluent()
  .navigate('home')
  .navigate('tweet', {id: 12, reply: true}).url;
stateNavigator.navigateLink(link);

Then on the Tweet screen we initialise the modal visibility from the reply indicator in navigation data

const Tweet = () => {
  const {data} = useContext(NavigationContext);
  const {reply} = data;
  const {open, setOpen} = useState(!!reply);
  return (
    <Modal visible={open}>
    </Modal>
  )
}

[vbylen]

@grahammendick onRequestClose is not firing on iOS.

I’m looking for other solutions!

edit: @mrousavy has been kind enought to provide us with a patch.

edit2: I recommend this patch by @jacobp100 over the other one as onDismiss was not working.