This is a function to log (in form of a tree) the navigation based on `react-navigation` and redux state of this navigation.

logNavigationRoute.js

type NavigationRoute = {
  index?: ?number,
  routeName: string,
  routes?: ?Array<NavigationRoute>,
};

type FormattedState = {
  children: Array<FormattedState>,
  routeName: string,
  selected?: boolean,
};

const getFormattedState = (
  route: NavigationRoute,
  isSelected: boolean,
): FormattedState => {
  const state: FormattedState = {
    routeName: route.routeName,
    children: [],
  };
  if (Array.isArray(route.routes) && typeof route.index !== 'undefined') {
    route.routes.forEach((currentRoute: NavigationRoute, index: number) => {
      const childIsSelected = isSelected && index === route.index;
      state.children.push({
        routeName: currentRoute.routeName,
        selected: childIsSelected,
        children: getFormattedState(currentRoute, childIsSelected).children,
      });
    });
  }

  return state;
};

const logNavigationRoute = (state: NavigationRoute) => {
  if (!state) {
    // eslint-disable-next-line no-console
    console.log('No state');
    return;
  }

  const formattedState = getFormattedState(
    { ...state, routeName: 'AppNavigator' },
    true,
  );
  const logChildren = (routes: Array<NavigationState>, tab: string): void =>
    routes.forEach((route: NavigationState) => {
      // eslint-disable-next-line no-console
      console.log(`${tab}${route.routeName}${route.selected ? '*' : ''}`);
      if (route.children.length > 0) {
        logChildren(route.children, `${tab}\t`);
      }
    });

  logChildren([formattedState], '');
};