modal mode screen inside StackNavigation

Question

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'
})

Answer 1

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.