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

make-navigator-usage-example.tsx

// SomeStack.tsx
export const SomeStackConfiguration = makeNavigator({
  name: 'SomeStack',
  type: 'stack',
  screens: {
    [Screen.One]: { screen: ScreenOne },
    [Screen.Two]: { screen: ScreenTwo },
    [Screen.Three]: { screen: ScreenThree, options: { /* ... */ }  },
    // ...
  },
  linking: {
    path: 'some-stack',
    initialRouteName: Screen.One,
    screens: {
      [Screen.One]: 'screen-one',
      [Screen.Two]: 'screen-two',
      [Screen.Three]: 'screen-three/:someParameter',
      // ...
    },
  },
});

// SomeTab.tsx
const Tab = createBottomTabNavigator();

export const SomeTabConfiguration = makeNavigator({
  name: 'SomeTab',
  type: 'tab',
  screens: {
    [Screen.One]: { screen: ScreenOne },
    [Screen.Two]: { screen: ScreenTwo },
    [Screen.Three]: { screen: ScreenThree, options: { /* ... */ }  },
    // ...
  },
  linking: {
    path: 'some-tab',
    initialRouteName: Screen.One,
    screens: {
      [Screen.One]: 'screen-one',
      [Screen.Two]: 'screen-two',
      [Screen.Three]: 'screen-three/:someParameter',
      // ...
    },
  },
  render(config) {
    const { theme } = useSomeThemeProvider();		

    <Tab.Navigator screenOptions={config.options}>
      {/* Render your screens as you wish */}
    </Tab.Navigator>
  },
});

// RootStack.tsx
const RootStackConfiguration = makeNavigator({
  name: 'RootStack',
  type: 'stack',
  screens: {
    [SomeStackConfiguration.name]: { screen: SomeStackConfiguration.render },
    [SomeTabConfiguration.name]: { screen: SomeTabConfiguration.render }
  },
  linking: {
    screens: {
      [SomeStackConfiguration.name]: { screen: SomeStackConfiguration.linking },
      [SomeTabConfiguration.name]: { screen: SomeTabConfiguration.linking }
    }
  },
});