Setting modal mode to specific screen

Question

I'm using stack navigator in my react-native app, i have set the mode to modal so the screen gets pushed from the bottom, it's working fine but is there a way to specify this mode for specific screens only?

const App = createStackNavigator({
  Home: { screen: Home },
},
{
  mode: 'modal',
 }
);

Answer 1

Solution

Use multiple StackNavigator.

For example, if you want show Modal screen using modal effect only

// Call `this.props.naviation.navigate('Modal') from `Basic` screen, and use 'goBack()' in `Modal` screen.
const ModalStack = createStackNavigator({
  Basic: { screen: Basic },
  Modal: {screen: ModalScreen },
},
{
  mode: 'modal',
 }
);

const Modal = createStackNavigator({
  Home: { screen: Home },
  Detail: { screen: ModalStack },
},
);