emeraldsanto

// SomeStack.tsx
export const SomeStackConfiguration = makeNavigator({
  name: 'SomeStack',
  type: 'stack',
  screens: {
    [Screen.One]: { screen: ScreenOne },
    [Screen.Two]: { screen: ScreenTwo },
    [Screen.Three]: { screen: ScreenThree, options: { /* ... */ }  },
    // ...
  },

emeraldsanto

const navigators = {
  stack: createStackNavigator,
  tab: createBottomTabNavigator,
} as const;

type NavigatorType = keyof typeof navigators;

type NavigatorProps<T extends NavigatorType> = ComponentProps<
  ReturnType<typeof navigators[T]>['Navigator']
>;

emeraldsanto

/**
 * Surprisingly, there is very little code here as all we really need to do
 * is provide a short hand for the default render function of the provided screens.
 *
 * If a custom `render` is provided, we execute it by passing the whole configuration
 * as props.
 *
 * Otherwise use the default behaviour defined in `renderScreens`.
 */
export function makeNavigator<

emeraldsanto

/**
 * This simply aggregates navigator constructors
 * and allows us to support more than one type of navigator.
 */
const navigators = {
  stack: createStackNavigator,
  tab: createBottomTabNavigator,
} as const;

/**

emeraldsanto

export enum Navigator {
  One = 'NavigatorOne',
  Two = 'NavigatorTwo',
  Three = 'NavigatorThree',
}

export enum Screen {
  One = 'ScreenOne',
  Two = 'ScreenTwo',
  Three = 'ScreenThree',

emeraldsanto

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: { /* ... */ }  },
    // ...

emeraldsanto

export const SomeStackConfiguration = makeNavigator({
  name: 'SomeStack',
  type: 'stack',
  screens: {
    [Screen.One]: { screen: ScreenOne },
    [Screen.Two]: { screen: ScreenTwo },
    [Screen.Three]: { screen: ScreenThree, options: { /* ... */ }  },
    // ...
  },
  linking: {

emeraldsanto

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: { /* ... */ }  },

emeraldsanto

import { NavigationContainer } from '@react-navigation/native';

const config = {
  screens: {
    Home: {
      initialRouteName: 'Feed',
      screens: {
        Profile: 'users/:id',
        Feed: 'feed',
      },

emeraldsanto

import { NavigationContainer } from '@react-navigation/native';

const linking = {
  prefixes: ['https://mychat.com', 'mychat://'],
  config: {
    screens: {
      Chat: 'feed/:sort',
      Profile: 'user',
    }
  },