@gasbuddy/react-navigation-codegen

react-navigation-codegen

A simple code generator to turn somewhat abstract specifications into TypeScript code with information about your full navigation stack in a React Navigation based app. This avoids lots of magic strings in your code, gives you a sense of the actual navigation structure, and avoids repeating yourself in code as much as usual.

Input can be YAML, JS, JSON, or Typescript. Consider a typical navigation setup:

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Feed: { sort: 'latest' | 'top' } | undefined;
};

const RootStack = createStackNavigator<RootStackParamList>();

<RootStack.Navigator initialRouteName="Home">
  <RootStack.Screen name="Home" component={Home} />
  <RootStack.Screen
    name="Profile"
    component={Profile}
    initialParams={{ userId: user.id }}
  />
  <RootStack.Screen name="Feed" component={Feed} />
</RootStack.Navigator>

With this module, you would specify as follows:

export default {
  screens: {
    Root: {
      parameterListType: 'RootStackParamList',
      screens: {
        Home: {},
        Profile: {
          parameterType: '{ userId: string }',
        },
        Feed: {
          parameterType: '{ sort: 'latest' | 'top' } | undefined',
        }
      }
    }
  }
}

And now your code becomes:

const RootStack = createStackNavigator<RootStackParamList>();

<RootStack.Navigator initialRouteName="Home">
  <RootStack.Screen name={Nav.Root.Home} component={Home} />
  <RootStack.Screen
    name={Nav.Root.Profile}
    component={Profile}
    initialParams={{ userId: user.id }}
  />
  <RootStack.Screen name={Nav.Root.Feed} component={Feed} />
</RootStack.Navigator>

Perhaps not a massive improvement in the simple example, but as you scale, it gets harder to manage all the types, related types and constants for every navigator, AND you lose a notion of the structure of the navigation tree.