React Navigation browser screen listing all routes

NavigationBrowserScreen.js

import React from 'react';
import { map } from 'lodash';
import { View } from 'react-native';

import { utils } from '../theme';
import RootNavigator from '../RootNavigator';
import ScreenView from '../components/ScreenView';
import Text from '../components/Text';

const RouteDisplay = ({ router, routeName, route, urlParts }) => {
  // router && console.log(Object.keys(router.getComponentForRouteName(routeName)));

  return (
    <View style={utils.pl4}>
      <Text smallest>{routeName}</Text>
      {route && route.childRouters && <RouterDisplay router={route} urlParts={urlParts}/>}
    </View>
  );
};

const RouterDisplay = ({ router, urlParts = [] }) => {
  return (
    <View>
      {map(router.childRouters, (route, routeName) => (
        <RouteDisplay router={router} routeName={routeName} route={route} urlParts={[...urlParts, routeName]}/>
      ))}
    </View>
  );
};

const NavigationBrowserScreen = () => (
  <ScreenView padded>
    <RouterDisplay router={RootNavigator.router}/>
  </ScreenView>
);

export default NavigationBrowserScreen;