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.

constRootStack=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:

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