react-navigation/react-navigation

Modal StackView nested inside other StackNavigator is not presented modally

aimak opened this issue · 6 comments

aimak commented

Hello everyone,

I'm struggling with a complicated nesting of navigators here and it seems something does not work as I would have expected.

I have this code :

const MyApp = TabNavigator({
FirstTab: {
    screen: StackNavigator({
      ListScreen: {
        screen: ListScreen,
      },
      DetailScreen: {
        screen: DetailScreen,
      },
      ModalScreen: {
        screen: StackNavigator({
          Home: {
            screen: ModalScreen,
          },
        },{
          mode: 'modal',
        }),
      },
    }),
}

So I have ListScreen as first tab of my TabNavigator. I want the user to be able to push another component (DetailScreen) and then tap on a button that will display a ModalScreen. Sadly, when I call
this.props.navigation.navigate('ModalScreen') the screen is pushed rather than being presented modally.

The interesting part is if I add a mode: 'modal' on the FirstTab StackNavigator, then every screen of the stack is presented modally.

It also seems that if the FirstTab stack is a modal, then the nested ModalScreen is modal no mater the mode I set.

Am I doing anything wrong or is it a bug ?

I'm using "react-navigation": "^1.0.0-beta.5",

Exilz commented

Same problem here with the latest commit in master.

j-mendez commented

having this issue as well.

gislitg commented

+1

ericvicenti commented

This can be fixed by putting your mode: 'modal', navigator on the outside

  • 👎2
gregblass commented

#707 (comment) - This is how I was able to accomplish loading screens as modals within a card stack navigator - basically nest a card stacknavigator within a modal stacknavigator.