Modal Window In React Native With React-navigation

I am using react-navigation in React Native and I want, on startup, to determine if the user is logged in, and if he/she is already logged in, I want to open a modal window (full s

Solution 1:

Look, you needs to change the mode from Navigation.

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

You can run this code here

Screenshots:

References:

• Opening a full-screen modal
• NavigatorConfig` props

Solution 2:

React has a Modal component that you can use to display a full-screen Modal. See the docs here: https://facebook.github.io/react-native/docs/modal.html

To display it conditionally if the user is logged in you can use the 'visible' property. E.g. drop this on the screen that your app loads to:

<Modal
      animationType={"slide"}
      transparent={false}
      visible={this.state.userIsLoggedIn}
      >

Solution 3:

you can do like this:

const ModalNavigator = StackNavigator(
  {
    ModalScreen: { screen: ModalScreen },
  },
  {
    mode: "modal",
    headerMode: "none",
  },
)