matchrouter.js

// Master Nav Setup


const Main = StackNavigator(
  {
    Landing: {
      screen: LandingScreen,
    },
    SignIn: {
      screen: SignInScreen,
    },
    UserSelect: {
      screen: UserSelectScreen,
    },
    UserAdd: {
      screen: UserAddScreen,
    },
    Home: {
      screen: HomeScreen,
    },
    Topic: {
      screen: TopicScreen,
    },
    About: {
      screen: AboutScreen,
    },
    Notifications: {
      screen: NotificationScreen,
    },
    Player: {
      screen: PlayerScreen,
    },
    Related: {
      screen: RelatedScreen,
    },
    Search: {
      screen: SearchScreen,
    },
    Settings: {
      screen: SettingScreen,
    },
  },
  {
    headerMode: "none",
    navigationOptions: () => {
      return {
        headerTitle: <Image source={Logo} style={styles.logo} resizeMode="contain" />,
        headerTintColor: "#FFF",
        headerStyle: styles.header,
      };
    },
  },
);

const ModalNav = StackNavigator(
  {
    Main: {
      screen: Main,
    },
    Help: {
      screen: HelpScreen,
    },
  },
  {
    mode: "modal",
  },
);

const NavDrawer = DrawerNavigator(
  {
    Primary: {
      screen: ModalNav,
    },
  },
  {
    contentComponent: Drawer,
  },
);

// Depth Route Matching in Drawer


const routes = [
  {
    key: "home",
    route: "Home",
    label: "Home",
  },
  {
    key: "originals",
    route: "Topic",
    label: "Netflix Originals",
  },
  {
    key: "tv_shows",
    route: "Topic",
    label: "TV Shows",
  },
];

const getDepthRoute = state => {
  const { index, routes } = state;
  const route = routes[index];

  if (route && route.routes) return getDepthRoute(route);
  return route;
};


const isRouteMatched = (route, currentRoute) => {
  return (
    route.route === currentRoute.routeName &&
    route.key === (currentRoute.params || {}).key
  );
}

// in drawer nav render
const depthRoute = getDepthRoute(navigation.state);