CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
MARS
MARS

Reputation: 587

How to set up different navigation modes for different screens?

I am very new to react-native, but I will try to phrase this the best I can. I have a react-native app that has a navigation bar on the bottom. If the user taps one of the options, they are navigated to the corresponding screen.

The mode for each screen is the default 'card'. This makes it so the screen slides in from the right like a deck of cards.

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'card',
    headerMode: 'none',
  }
);

The thing is, I have a 'More' screen that I want to behave differently. It needs to slide up from the bottom of the screen. As I understand, the 'modal' mode will do this.

mode:'modal',

So my question is, can I set all the screens to be mode:'card' and just one screen mode:'modal'? Does anyone know if and how I can do this?

Upvotes: 4

Views: 1915

Answers (1)

Tyler
Tyler

Reputation: 1891

To directly answer your question, React-Navigation docs say that mode can only be set at the navigator level, not for individual screens: The mode configuration for stack navigator can be either card (default) or modal.

However, they do provide direction for achieving a modal:

React-Navigation docs say to create a root navigator with mode: 'modal', and nest your existing navigator within it. When you navigate in the app you should be able to just specify the screen id and it will determine the proper navigator automatically.

Read more: https://reactnavigation.org/docs/en/modal.html

Upvotes: 2

Related Questions