CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Atul Tiwari
Atul Tiwari

Reputation: 604

How can I manage two navigation on single page one createstack navigator and second is drawer navigator?

Consider:

export default class App extends React.Component {
  render() {

    return(
      <MyApp />
      );
    return(

      <Navigation />
    );
  }

  const Navigation = createStackNavigator({
    Welcome: {
      screen: Splash,
      navigationOptions: {
        header: null
    }
  },
  Login: {
    screen: Requesterlogin,
    navigationOptions: {
      title: "Login",
      headerTitleStyle: {
        alignSelf: "center",
        textAlign: "center",
        width: "77%"
      },
      headerStyle: {
        backgroundColor: "#095473"
      },
      headerTintColor: "white"
    }
  },

  Forgot: {
    screen: Forgot,
    navigationOptions: {
    title: "Forgot Password",
      headerTitleStyle: {
        alignSelf: "center",
        textAlign: "center",
        width: "77%"
      },
      headerStyle: {
        backgroundColor: "#095473"
      },
      headerTintColor: "white"
    }
  }
});

const MyApp = DrawerNavigator(
{
  Home: {
    screen: Reqlogin,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon
        name="home"
        size={25}
        color="black"
        //style={styles.useraccounticon}

      />
      ),
    }
  },
  Profile: {
    screen: Profile_Requester,
    navigationOptions: {
      drawerLabel: 'Profile',
      drawerIcon: () => (
        <Icon
        name="user-circle"
        size={25}
        color="black"
        //style={styles.useraccounticon}

      />
      ),
    }
  },
}
);

In the above code I use two navigation CreateStack navigations used for Navigation.

The Drawer navigator is used for Myapp. But in my case only Myapp is working. How can I return the proper way so both will be working?

Upvotes: 0

Views: 765

Answers (1)

Uzair A.
Uzair A.

Reputation: 1638

It looks like you are trying to implement an authentication flow. You should do that using createSwitchNavigator and nesting your other navigators within that. SwitchNavigator can help you with authentication flows because it handles stuff like making sure you cannot jump to your main app from the Login screen using the Back button.

The idea is, you will have a SwitchNavigator as the parent navigator with two flows: whether the user is signed in or not. The child navigators would be something like Auth and Main. If the user is not signed in, the active navigator would be Auth, which will be a StackNavigator itself. If the user is signed in, the active navigator would be a DrawerNavigator with a stacked StackNavigator.

import { createSwitchNavigator, createStackNavigator, createDrawerNavigator } from 'react-navigation';

const App = createDrawerNavigator({ AppStack: AppStack });
const AppStack = createStackNavigator({
  Home: { screen: Reqlogin },
  Profile: { screen: Profile_Requester }
});
const Auth = createStackNavigator({
  Welcome: { screen: Splash },
  Login: { screen: Requesterlogin },
  Forgot: { screen: Forgot }
});

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,  // You'll check whether user is logged in or not here
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

For more help, visit this documentation and this article.

Upvotes: 1

Related Questions