CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
obiwankenoobi
obiwankenoobi

Reputation: 1582

modal mode screen inside StackNavigation

I am trying to make one screen to act as modal inside regular StackNavigation object. Mean, I want all the screens act as cards (render from the side) but one screen to act as modal (render from the bottom) but it just dont work, all the screens render from the side.

CODE: 

export const Modal = StackNavigator({
    ReportPage: {
        screen: ReportContainer
    }
}, {
    headerMode: 'none',
    mode:'modal'
})

export const Main = StackNavigator({
    Feed: {
        screen: Feed
    }, 
    ModalScreen: {
        screen: Modal
    }
}, {
    headerMode: 'none'
})

Upvotes: 4

Views: 1215

Answers (1)

Deepak
Deepak

Reputation: 734

Use code below: 

export const HomeNavigator = StackNavigator({
        Feed: {
            screen: Feed
        },
        OtherScreen: {
           screen: OtherScreen
        }

    })
    const Main = StackNavigator(
      {
        Home: { screen: HomeNavigator }
        ModalScreen: { screen: ModalScreen }
      },
      {
        mode: 'modal',
        headerMode: 'none',
      },
    );

You need to create a Home StackNavigator containing all screens having Push Navigation and then create a main StackNavigator which will contain Home Stack and the modal screen you want to display.

Upvotes: 7

Related Questions