[v2] Possibility to show a stack of modals?

[Dexwell]

Is it possible to show a stack of modals with the current APIs? For example when handling a notification tap, I want to navigate the user two modals deep.

Calling the following in succession only opens the latter modal;

Navigation.showModal({
  component: {
    name: 'screen.List',
    options: {
      animated: false
    }
  }
});

Navigation.showModal({
  component: {
    name: 'screen.Detail',
    passProps: {
      itemID: 3
    },
    options: {
      animated: false
    }
  }
});

---

Environment

• React Native Navigation version: 2.0.2274
• React Native version: 0.55.2

[guyca]

I'm not sure this is such a good idea. Don't think we will support it. You can show a modal with a stack and initialise the stack with multiple children. https://wix.github.io/react-native-navigation/v2/#/docs/layout-types?id=stack I think this is what you're looking for

[Dexwell]

@guyca I don't think it is. Children are simply for back and forth (push/pop) navigation, right? Not supporting it would mean not supporting opening a screen in the app that is normally accessed through two modals (e.g. Root → List → Detail).

When tapping a notification I would now have to open the Detail screen, and when dismissing that modal the Root screen would be shown, skipping List. This is a confusing flow inconsistency for the user.

[guyca]

Hey @Dexwell I'm not sure I understand your use case. Could you please explain it again? It's possibly the api is not robust enough, in which case we'll obviously reopen the issue and support your need.

As an Android developer, I like to consider the Modal as an equivalent of an Activity. It feels extremely to start two Activities one after another. More ever, I'm really against showing multiple modals and pushing a stack initialised with multiple children as it pretty much breaks the back stack. When the user presses the back button, he expects to be redirected to the previous screen. But since you're displaying two modals, upon navigating back the user sees an unexpected screen which is really confusing as he has no notion this screen is there (He saw only one screen being animated onto the screen).

[Dexwell]

No problem, sure! iOS is my main platform, so maybe that’s where expectations diverge. Consider this social app:

Main Screen A list of friends. The nav bar contains a + button. Tapping that opens, in a modal, the:

Add Friends Screen This is a list of incoming friend requests, suggested friends, and a search bar to search for friends. Tapping a friend request opens, in a modal, a:

Friend Request Screen Here you can view a request, and decide whether to accept or reject it.

Now, when you tap a push notification of a new incoming friend request, the app opens and you expect to land at that particular Friend Request Screen (without animations). When you close this (modal) screen, you expect the Add Friends Screen to be behind it, since that is the only route to normally get to a Friend Request Screen.

Since I’m planning to use overlays instead of modals (so that I can create complex custom screen transitions) I think this is not a huge priority for me, but as you can see use cases might exist.

If I'm not mistaken, the Back button on Android should navigate the user to the previously visible screen, not close the top-most modal. This modal-stack feature would allow us to drop the user somewhere along a logical part of the navigation flow from something like a notification tap.

I assume tapping the Back button after tapping a notification would return the user to the previous app/screen. If a modal-stack is opened by this feature, that modal-stack would also be closed when tapping Back.

[guyca]

We partially support this use case by initialising a stack with multiple children. Before calling Navigation.setRoot, you can check if the app was opened from push notification and push relevant screens on top of your main screen.

I understand this is a bit limiting. I'll reopen and revisit this soon. 👍 cc @DanielZlotin @yogevbd

Relevant links for reference TaskStackBuilder getActivities

[guyca]

We'll improve setRoot and support setting root with Modals and Overlays

Navigation.setRoot({
  modals: [],
  overlays: [],
  root: {}
});

[Dexwell]

Cool, I think this is a great improvement to the API 👍🏼

[pie6k]

Is it already possible to have multiple overlays? @guyca ? Can I track progress of it somewhere?

[yogevbd]

@pie6k It is possible to show multiple overlays. Just call Navigation.showOverlay multiple times with different overlays

[ghost]

You can do it like this: Navigation.showModal({....})

Navigation.dismissAllModals()

Navigation.showModal({...})

[Natteke]

We'll improve setRoot and support setting root with Modals and Overlays

Navigation.setRoot({
  modals: [],
  overlays: [],
  root: {}
});

Is this thing work in 6.0.1?

In 6.0.1 Root types specified as any

I tried to pass an array of components / stack with children and looks like they were just ignored by navigation. Also i cant find proper example in dock for this feature.

[guyca]

@Natteke This is still not implemented

[chrise86]

@guyca is this still in the pipeline? I've just tried to use this as the types are suggesting it's there but again nothing happens.