Achieving type safe deep linking in React Native with react-navigation #3

react-navigation-old-navigator-example.tsx

import { createStackNavigator } from '@react-navigation/stack';
import { Screen } from 'some-path/Screen';
import { ScreenOne } from 'some-path/ScreenOne';
import { ScreenTwo } from 'some-path/ScreenTwo';
import { ScreenThree } from 'some-path/ScreenThree';

const routeConfigMap = {
  [Screen.One]: { screen: ScreenOne },
  [Screen.Two]: { screen: ScreenTwo },
  [Screen.Three]: { screen: ScreenThree, options: { /* ... */ }  },
  // ...
};

const Stack = createStackNavigator();

export const SomeStack = () => {
  return (
    <Stack.Navigator screenOptions={{ /* ... */ }}>
      {Object.keys(routeConfigMap).map((key) =>  (
        <Stack.Screen
	  key={key}
	  name={key}
	  options={routeConfigMap[key as keyof typeof routeConfigMap].options}
          component={routeConfigMap[key as keyof typeof routeConfigMap].screen}
        />
      ))}
    </Stack.Navigator>
  );
};