Navigation Conflicts with React Native Modal Component

If I render a <Modal /> component from react-native within a native stack and navigate while dismissing the modal, it either freezes with the modal open, freezes with the modal shut, or closes the modal, reopens the modal, then freezes. Generally, it freezes.

We mostly use react-navigation, but I also think there are good uses for the modal component. We have a case where we have a modal that asks the user if they want push notifications when they’ve met some criteria. They can press no, and then meet the criteria again at a later date. Doing this with the Modal component is much more ergonomic here because of the visible prop. We don’t have to do imperative navigation to handle this.

It’s not entirely clear whether this is a bug here - maybe it’s up to react-navigation to render a modal within a stack, and then have a mechanism for conditionally displaying that. Or maybe is is a bug here, and we need better handling with modals that are not our own. I know I have apps that show iOS modals for stuff like the file picker. What are your thoughts here?

I’ve made a reproduction over here https://github.com/jacobp100/react-native-screens/tree/react-native-modal-example (diff)

[tedi]

I’m also experiencing the same issue. I ended up creating a new flow for my use case, but I also experienced the same thing when calling React Native Modal on load from a Modal screen.

[WoLewicki]

Closing this in order to keep the discussion in one place (#525).