CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
ccd
ccd

Reputation: 6908

How to navigate without a nest navigation

I use react-navigation stackNavigator for my native router. The simply path is LoginRouter -> DashboardRouter -> AddressRouter, map tree here.

// LoginRouter.js
const LoginRouter = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Dashboard: DashboardRouter
  },
  {
    initialRouteName: "Login"
  }
);

// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
  {
    MessageRouter: MessageRouter,
    AddressRouter: AddressRouter,
  },
  {
    ...
  }
);

// AddressRouter.js
const AddressRouter = createStackNavigator(
  {
    // these all navigator will become a nested navigation
    Address: Address,
    UserAdd: UserAdd,
    UserGroup: UserGroup
  },
  {
    initialRouteName: "Address"
  }
);

enter image description here

If I want to let the AddressRouter navigate without a nest navigation, how do I change this code?

PS

The navigate work fine when I extract the AddressRouter to the LoginRouter.

// LoginRouter.js
const LoginRouter = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Dashboard: DashboardRouter,
    Address: Address,
    UserAdd: UserAdd,
    UserGroup: UserGroup
  },
  {
    initialRouteName: "Login"
  }
);

// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
  {
    MessageRouter: MessageRouter,
    AddressRouter: AddressRouter,
  },
  {
    ...
  }
);

Upvotes: 0

Views: 63

Answers (1)

Roshan Gautam
Roshan Gautam

Reputation: 510

If I got your question right, what you can do is create another navigator as a root navigator (another StackNavigator or SwitchNavigator) and include your LoginRouter, AddressRouter there.

Something like this, maybe?

const rootNavigator = createSwitchNavigator(
    {
      LoginRouter: {
        screen: LoginRouter,

      },
      AddressRouter: {
        screen: AddressRouter,

      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: "LoginRouter"
    }
  );

This is just a example to give you an idea on how you could also implement your router.

Upvotes: 1

Related Questions