feat: compatibility layer

packages/compat/README.md

@@ -0,0 +1,28 @@
+# `@react-navigation/compat`
+
+Compatibility layer to write navigator definitions in static configuration format.
+
+## Installation
+
+Open a Terminal in your project's folder and run,
+
+```sh
+yarn add @react-navigation/core @react-navigation/compat
+```
+
+## Usage
+
+```js
+import { createCompatNavigatorFactory } from '@react-navigation/compat';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const RootStack = createCompatNavigatorFactory(createStackNavigator)(
+  {
+    Home: { screen: HomeScreen },
+    Profile: { screen: ProfileScreen },
+  },
+  {
+    initialRouteName: 'Profile',
+  }
+);
+```

packages/compat/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@react-navigation/compat",
+  "description": "Compatibility layer to write navigator definitions in static configuration format",
+  "version": "5.0.0-alpha.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/navigation-ex.git",
+    "directory": "packages/compat"
+  },
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/compat/src/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@react-navigation/routers": "^5.0.0-alpha.7"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.19",
+    "react": "^16.8.3",
+    "typescript": "^3.5.3"
+  },
+  "peerDependencies": {
+    "react": "^16.8.3",
+    "@react-navigation/core": "^5.0.0-alpha.0"
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

packages/compat/src/CompatScreen.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  NavigationProp,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/core';
+import ScreenPropsContext from './ScreenPropsContext';
+import createCompatNavigationProp from './createCompatNavigationProp';
+
+type Props = {
+  navigation: NavigationProp<ParamListBase>;
+  route: RouteProp<ParamListBase, string>;
+  component: React.ComponentType<any>;
+};
+
+function ScreenComponent(props: Props) {
+  const navigation = React.useMemo(
+    () => createCompatNavigationProp(props.navigation, props.route),
+    [props.navigation, props.route]
+  );
+
+  const screenProps = React.useContext(ScreenPropsContext);
+
+  return <props.component navigation={navigation} screenProps={screenProps} />;
+}
+
+export default React.memo(ScreenComponent);

packages/compat/src/DrawerActions.tsx

@@ -0,0 +1,13 @@
+import { DrawerActions, DrawerActionType } from '@react-navigation/routers';
+
+export function openDrawer(): DrawerActionType {
+  return DrawerActions.openDrawer();
+}
+
+export function closeDrawer(): DrawerActionType {
+  return DrawerActions.closeDrawer();
+}
+
+export function toggleDrawer(): DrawerActionType {
+  return DrawerActions.toggleDrawer();
+}

packages/compat/src/NavigationActions.tsx

@@ -0,0 +1,48 @@
+import { CommonActions } from '@react-navigation/core';
+
+export function navigate({
+  routeName,
+  params,
+  key,
+  action,
+}: {
+  routeName: string;
+  params?: object;
+  key?: string;
+  action?: never;
+}): CommonActions.Action {
+  if (action !== undefined) {
+    throw new Error(
+      'Sub-actions are not supported for `navigate`. Remove the `action` key from the options.'
+    );
+  }
+
+  return CommonActions.navigate({
+    name: routeName,
+    key: key,
+    params: params,
+  });
+}
+
+export function back(options?: { key: null | never }): CommonActions.Action {
+  if (options !== undefined && options.key != null) {
+    throw new Error(
+      "The legacy `back` action with a key is not supported. To go back from a specific route, you need to specify both route key and the navigator's state key in the action: `{ ...CommonActions.goBack(), source: route.key, target: state.key }`."
+    );
+  }
+
+  return CommonActions.goBack();
+}
+
+export function setParams({
+  params,
+  key,
+}: {
+  params: object;
+  key?: string;
+}): CommonActions.Action {
+  return {
+    ...CommonActions.setParams(params),
+    ...(key !== undefined ? { source: key } : null),
+  };
+}

packages/compat/src/ScreenPropsContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<unknown>(undefined);

packages/compat/src/StackActions.tsx

@@ -0,0 +1,68 @@
+import { CommonActions } from '@react-navigation/core';
+import { StackActions, StackActionType } from '@react-navigation/routers';
+
+export function reset(): CommonActions.Action {
+  throw new Error(
+    'The legacy `reset` action is not supported. Use the new reset API by accessing the original navigation object at `navigation.original`.'
+  );
+}
+
+export function replace({
+  routeName,
+  params,
+  key,
+  newKey,
+  action,
+}: {
+  routeName: string;
+  params?: object;
+  key?: string;
+  newKey?: string;
+  action?: never;
+}): CommonActions.Action {
+  if (action !== undefined) {
+    throw new Error(
+      'Sub-actions are not supported for `replace`. Remove the `action` key from the options.'
+    );
+  }
+
+  return {
+    type: 'REPLACE',
+    payload: {
+      name: routeName,
+      key: newKey,
+      params,
+    },
+    ...(key !== undefined ? { source: key } : null),
+  };
+}
+
+export function push({
+  routeName,
+  params,
+  action,
+}: {
+  routeName: string;
+  params?: object;
+  action?: never;
+}): StackActionType {
+  if (action !== undefined) {
+    throw new Error(
+      'Sub-actions are not supported for `push`. Remove the `action` key from the options.'
+    );
+  }
+
+  return StackActions.push(routeName, params);
+}
+
+export function pop({ n = 1 }: { n: number }): StackActionType {
+  return StackActions.pop(n);
+}
+
+export function popToTop(): StackActionType {
+  return StackActions.popToTop();
+}
+
+export function dismiss(): CommonActions.Action {
+  throw new Error('The legacy `dismiss` action is not supported.');
+}

packages/compat/src/SwitchActions.tsx

@@ -0,0 +1,18 @@
+import { TabActions, TabActionType } from '@react-navigation/routers';
+
+export function jumpTo({
+  routeName,
+  key,
+}: {
+  routeName: string;
+  key?: string;
+}): TabActionType {
+  if (key === undefined) {
+    return TabActions.jumpTo(routeName);
+  } else {
+    return {
+      ...TabActions.jumpTo(routeName),
+      target: key,
+    };
+  }
+}

packages/compat/src/createCompatNavigationProp.tsx

@@ -0,0 +1,184 @@
+import {
+  NavigationState,
+  PartialState,
+  ParamListBase,
+  NavigationProp,
+  RouteProp,
+} from '@react-navigation/core';
+import * as helpers from './helpers';
+
+type EventName = 'willFocus' | 'willBlur' | 'didFocus' | 'didBlur' | 'refocus';
+
+const focusSubscriptions = new WeakMap<() => void, () => void>();
+const blurSubscriptions = new WeakMap<() => void, () => void>();
+const refocusSubscriptions = new WeakMap<() => void, () => void>();
+
+export default function createCompatNavigationProp<
+  ParamList extends ParamListBase
+>(
+  navigation: NavigationProp<ParamList>,
+  state:
+    | (RouteProp<ParamList, keyof ParamList> & {
+        state?: NavigationState | PartialState<NavigationState>;
+      })
+    | NavigationState
+    | PartialState<NavigationState>
+) {
+  return {
+    ...navigation,
+    ...Object.entries(helpers).reduce<{ [key: string]: Function }>(
+      (acc, [name, method]) => {
+        if (name in navigation) {
+          acc[name] = method;
+        }
+
+        return acc;
+      },
+      {}
+    ),
+    original: navigation,
+    addListener(type: EventName, callback: () => void) {
+      let unsubscribe: () => void;
+
+      switch (type) {
+        case 'willFocus':
+          unsubscribe = navigation.addListener('focus', callback);
+          break;
+        case 'willBlur':
+          unsubscribe = navigation.addListener('blur', callback);
+          break;
+        case 'didFocus': {
+          const listener = () => {
+            if (navigation.isFocused()) {
+              callback();
+            }
+          };
+
+          // @ts-ignore
+          unsubscribe = navigation.addListener('transitionEnd', listener);
+          focusSubscriptions.set(callback, unsubscribe);
+          break;
+        }
+        case 'didBlur': {
+          const listener = () => {
+            if (!navigation.isFocused()) {
+              callback();
+            }
+          };
+
+          // @ts-ignore
+          unsubscribe = navigation.addListener('transitionEnd', listener);
+          blurSubscriptions.set(callback, unsubscribe);
+          break;
+        }
+        case 'refocus': {
+          const listener = () => {
+            if (navigation.isFocused()) {
+              callback();
+            }
+          };
+
+          // @ts-ignore
+          unsubscribe = navigation.addListener('tabPress', listener);
+          refocusSubscriptions.set(callback, unsubscribe);
+          break;
+        }
+        default:
+          // @ts-ignore
+          unsubscribe = navigation.addListener(type, callback);
+      }
+
+      const subscription = () => unsubscribe();
+
+      subscription.remove = unsubscribe;
+
+      return subscription;
+    },
+    removeListener(type: EventName, callback: () => void) {
+      switch (type) {
+        case 'willFocus':
+          navigation.removeListener('focus', callback);
+          break;
+        case 'willBlur':
+          navigation.removeListener('blur', callback);
+          break;
+        case 'didFocus': {
+          const unsubscribe = focusSubscriptions.get(callback);
+          unsubscribe && unsubscribe();
+          break;
+        }
+        case 'didBlur': {
+          const unsubscribe = blurSubscriptions.get(callback);
+          unsubscribe && unsubscribe();
+          break;
+        }
+        case 'refocus': {
+          const unsubscribe = refocusSubscriptions.get(callback);
+          unsubscribe && unsubscribe();
+          break;
+        }
+        default:
+          // @ts-ignore
+          navigation.removeListener(type, callback);
+      }
+    },
+    state: {
+      ...state,
+      // @ts-ignore
+      routeName: state.name,
+      get index() {
+        // @ts-ignore
+        if (state.index !== undefined) {
+          // @ts-ignore
+          return state.index;
+        }
+
+        console.warn(
+          "Accessing child navigation state for a route is not safe and won't work correctly."
+        );
+
+        // @ts-ignore
+        return state.state ? state.state.index : undefined;
+      },
+      get routes() {
+        // @ts-ignore
+        if (state.routes !== undefined) {
+          // @ts-ignore
+          return state.routes;
+        }
+
+        console.warn(
+          "Accessing child navigation state for a route is not safe and won't work correctly."
+        );
+
+        // @ts-ignore
+        return state.state ? state.state.routes : undefined;
+      },
+    },
+    getParam<T extends keyof ParamList>(
+      paramName: T,
+      defaultValue: ParamList[T]
+    ): ParamList[T] {
+      // @ts-ignore
+      const params = state.params;
+
+      if (params && paramName in params) {
+        return params[paramName];
+      }
+
+      return defaultValue;
+    },
+    dangerouslyGetParent() {
+      const parent = navigation.dangerouslyGetParent();
+
+      if (parent) {
+        return createCompatNavigationProp(
+          parent,
+          navigation.dangerouslyGetState()
+        );
+      }
+
+      return undefined;
+    },
+  };
+}

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import {
+  NavigationState,
+  PartialState,
+  ParamListBase,
+  TypedNavigator,
+  NavigationProp,
+  RouteProp,
+} from '@react-navigation/core';
+import CompatScreen from './CompatScreen';
+import ScreenPropsContext from './ScreenPropsContext';
+import createCompatNavigationProp from './createCompatNavigationProp';
+import { CompatScreenType, CompatRouteConfig } from './types';
+
+export default function createCompatNavigatorFactory<
+  CreateNavigator extends () => TypedNavigator<
+    ParamListBase,
+    {},
+    React.ComponentType<any>
+  >
+>(createNavigator: CreateNavigator) {
+  return <
+    NavigationPropType extends NavigationProp<any, any, any, any, any>,
+    ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
+      infer P
+    >
+      ? P
+      : ParamListBase,
+    ScreenOptions extends {} = NavigationPropType extends NavigationProp<
+      any,
+      any,
+      any,
+      infer O
+    >
+      ? O
+      : {},
+    NavigationConfig extends {} = React.ComponentProps<
+      ReturnType<CreateNavigator>['Navigator']
+    >
+  >(
+    routeConfig: CompatRouteConfig<NavigationPropType>,
+    navigationConfig: Partial<Omit<NavigationConfig, 'screenOptions'>> & {
+      order?: Array<Extract<keyof ParamList, string>>;
+      defaultNavigationOptions?: ScreenOptions;
+      navigationOptions?: { [key: string]: any };
+    } = {}
+  ) => {
+    const Pair = createNavigator();
+
+    const {
+      order,
+      defaultNavigationOptions,
+      navigationOptions: parentNavigationOptions,
+      ...restConfig
+    } = navigationConfig;
+
+    const routeNames = order !== undefined ? order : Object.keys(routeConfig);
+
+    function Navigator({ screenProps }: { screenProps?: unknown }) {
+      const screens = React.useMemo(
+        () =>
+          routeNames.map(name => {
+            let getScreenComponent: () => CompatScreenType<NavigationPropType>;
+
+            let initialParams;
+
+            const routeConfigItem = routeConfig[name];
+
+            if ('getScreen' in routeConfigItem) {
+              getScreenComponent = routeConfigItem.getScreen;
+              initialParams = routeConfigItem.params;
+            } else if ('screen' in routeConfigItem) {
+              getScreenComponent = () => routeConfigItem.screen;
+              initialParams = routeConfigItem.params;
+            } else {
+              getScreenComponent = () => routeConfigItem;
+            }
+
+            const screenOptions = ({
+              navigation,
+              route,
+            }: {
+              navigation: NavigationProp<ParamList>;
+              route: RouteProp<ParamList, keyof ParamList> & {
+                state?: NavigationState | PartialState<NavigationState>;
+              };
+            }) => {
+              // @ts-ignore
+              const routeNavigationOptions = routeConfigItem.navigationOptions;
+              const screenNavigationOptions = getScreenComponent()
+                .navigationOptions;
+
+              if (
+                routeNavigationOptions == null &&
+                screenNavigationOptions == null
+              ) {
+                return undefined;
+              }
+
+              const options =
+                typeof routeNavigationOptions === 'function' ||
+                typeof screenNavigationOptions === 'function'
+                  ? {
+                      navigation: createCompatNavigationProp<ParamList>(
+                        navigation,
+                        route
+                      ),
+                      navigationOptions: defaultNavigationOptions || {},
+                      screenProps,
+                    }
+                  : {};
+
+              return {
+                ...(typeof routeNavigationOptions === 'function'
+                  ? routeNavigationOptions(options)
+                  : routeNavigationOptions),
+                ...(typeof screenNavigationOptions === 'function'
+                  ? (screenNavigationOptions as (o: any) => ScreenOptions)(
+                      options
+                    )
+                  : screenNavigationOptions),
+              } as ScreenOptions;
+            };
+
+            return (
+              <Pair.Screen
+                key={name}
+                name={name}
+                initialParams={initialParams}
+                options={screenOptions}
+              >
+                {({ navigation, route }) => (
+                  <CompatScreen
+                    navigation={navigation}
+                    route={route}
+                    component={getScreenComponent()}
+                  />
+                )}
+              </Pair.Screen>
+            );
+          }),
+        [screenProps]
+      );
+
+      return (
+        <ScreenPropsContext.Provider value={screenProps}>
+          <Pair.Navigator
+            {...(restConfig as NavigationConfig)}
+            screenOptions={defaultNavigationOptions}
+          >
+            {screens}
+          </Pair.Navigator>
+        </ScreenPropsContext.Provider>
+      );
+    }
+
+    Navigator.navigationOtions = parentNavigationOptions;
+
+    return Navigator;
+  };
+}

packages/compat/src/helpers.tsx

@@ -0,0 +1,88 @@
+import * as NavigationActions from './NavigationActions';
+import * as StackActions from './StackActions';
+import * as SwitchActions from './SwitchActions';
+import * as DrawerActions from './DrawerActions';
+
+type NavigateActionPayload = Parameters<typeof NavigationActions.navigate>['0'];
+
+type NavigateActionType = ReturnType<typeof NavigationActions.navigate>;
+
+export function navigate(
+  routeName: string,
+  params?: object,
+  action?: never
+): NavigateActionType;
+export function navigate(options: NavigateActionPayload): NavigateActionType;
+export function navigate(
+  options: string | NavigateActionPayload,
+  params?: object,
+  action?: never
+): NavigateActionType {
+  if (typeof options === 'string') {
+    return NavigationActions.navigate({
+      routeName: options,
+      params,
+      action,
+    });
+  }
+
+  return NavigationActions.navigate(options);
+}
+
+export function goBack(fromKey?: null | never) {
+  return NavigationActions.back(
+    fromKey !== undefined ? { key: fromKey } : undefined
+  );
+}
+
+export function setParams(params: object) {
+  return NavigationActions.setParams({ params });
+}
+
+export function reset() {
+  return StackActions.reset();
+}
+
+export function replace(routeName: string, params?: object, action?: never) {
+  return StackActions.replace({
+    routeName,
+    params,
+    action,
+  });
+}
+
+export function push(routeName: string, params?: object, action?: never) {
+  return StackActions.push({
+    routeName,
+    params,
+    action,
+  });
+}
+
+export function pop(n: number) {
+  return StackActions.pop(typeof n === 'number' ? { n } : n);
+}
+
+export function popToTop() {
+  return StackActions.popToTop();
+}
+
+export function dismiss() {
+  return StackActions.dismiss();
+}
+
+export function jumpTo(routeName: string) {
+  return SwitchActions.jumpTo({ routeName });
+}
+
+export function openDrawer() {
+  return DrawerActions.openDrawer();
+}
+
+export function closeDrawer() {
+  return DrawerActions.closeDrawer();
+}
+
+export function toggleDrawer() {
+  return DrawerActions.toggleDrawer();
+}

packages/compat/src/index.tsx

@@ -0,0 +1,12 @@
+import * as NavigationActions from './NavigationActions';
+import * as StackActions from './StackActions';
+import * as DrawerActions from './DrawerActions';
+import * as SwitchActions from './SwitchActions';
+
+export { NavigationActions, StackActions, DrawerActions, SwitchActions };
+
+export {
+  default as createCompatNavigatorFactory,
+} from './createCompatNavigatorFactory';
+
+export * from './types';

packages/compat/src/types.tsx

@@ -0,0 +1,79 @@
+import { ParamListBase, NavigationProp, Route } from '@react-navigation/core';
+import * as helpers from './helpers';
+
+export type CompatNavigationProp<
+  NavigationPropType extends NavigationProp<ParamListBase>,
+  ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
+    infer P
+  >
+    ? P
+    : ParamListBase,
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    NavigationPropType extends NavigationProp<any, infer R> ? R : string,
+    string
+  >
+> = Omit<NavigationPropType, keyof typeof helpers> &
+  {
+    [method in Extract<keyof NavigationPropType, keyof typeof helpers>]: (
+      ...args: Parameters<typeof helpers[method]>
+    ) => void;
+  } & {
+    state: Route<RouteName> & {
+      routeName: RouteName;
+    };
+    getParam<T extends keyof ParamList[RouteName]>(
+      paramName: T,
+      defaultValue?: ParamList[RouteName][T]
+    ): ParamList[RouteName][T];
+    dangerouslyGetParent<
+      T = NavigationProp<ParamListBase> | undefined
+    >(): T extends NavigationProp<ParamListBase>
+      ? CompatNavigationProp<T>
+      : undefined;
+  };
+
+export type CompatNavigationOptions<
+  NavigationPropType extends NavigationProp<ParamListBase>,
+  ScreenOptions extends {} = NavigationPropType extends NavigationProp<
+    any,
+    any,
+    any,
+    infer O
+  >
+    ? O
+    : {}
+> =
+  | ((options: {
+      navigation: CompatNavigationProp<NavigationPropType>;
+      navigationOptions: Partial<ScreenOptions>;
+      screenProps: unknown;
+    }) => ScreenOptions)
+  | ScreenOptions;
+
+export type CompatScreenType<
+  NavigationPropType extends NavigationProp<ParamListBase>
+> = React.ComponentType<{
+  navigation: CompatNavigationProp<NavigationPropType>;
+  screenProps: unknown;
+}> & {
+  navigationOptions?: CompatNavigationOptions<NavigationPropType>;
+};
+
+export type CompatRouteConfig<
+  NavigationPropType extends NavigationProp<ParamListBase>,
+  ParamList extends ParamListBase = NavigationPropType extends NavigationProp<
+    infer P
+  >
+    ? P
+    : ParamListBase
+> = {
+  [RouteName in keyof ParamList]:
+    | React.ComponentType<any>
+    | ((
+        | { screen: React.ComponentType<any> }
+        | { getScreen(): React.ComponentType<any> }
+      ) & {
+        navigationOptions?: CompatNavigationOptions<NavigationPropType>;
+        params?: ParamList[RouteName];
+      });
+};

packages/compat/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}

packages/core/src/BaseRouter.tsx

@@ -20,14 +20,16 @@ const BaseRouter = {
           return null;
         }
 
+        const { name, key, params } = action.payload;
+
         return {
           ...state,
           routes: state.routes.map((route, i) =>
             i === index
               ? {
-                  key: `${action.payload.name}-${shortid()}`,
-                  name: action.payload.name,
-                  params: action.payload.params,
+                  key: key !== undefined ? key : `${name}-${shortid()}`,
+                  name,
+                  params,
                 }
               : route
           ),

packages/core/src/CommonActions.tsx

@@ -9,15 +9,14 @@ export type Action =
   | {
       type: 'NAVIGATE';
       payload:
-        | { name: string; key?: undefined; params?: object }
         | { key: string; name?: undefined; params?: object }
-        | { key: string; name: string; params?: object };
+        | { name: string; key?: string; params?: object };
       source?: string;
       target?: string;
     }
   | {
       type: 'REPLACE';
-      payload: { name: string; params?: object };
+      payload: { name: string; key?: string; params?: object };
       source?: string;
       target?: string;
     }
@@ -41,8 +40,7 @@ export function goBack(): Action {
 export function navigate(
   route:
     | { key: string; params?: object }
-    | { name: string; params?: object }
-    | { name: string; key: string; params?: object }
+    | { name: string; key?: string; params?: object }
 ): Action;
 export function navigate(name: string, params?: object): Action;
 export function navigate(...args: any): Action {

packages/core/src/types.tsx

@@ -387,14 +387,13 @@ export type NavigationProp<
    * It can be useful to decide whether to display a back button in a stack.
    */
   isFirstRouteInParent(): boolean;
+
   /**
    * Returns the parent navigator, if any. Reason why the function is called
    * dangerouslyGetParent is to warn developers against overusing it to eg. get parent
    * of parent and other hard-to-follow patterns.
    */
-  dangerouslyGetParent():
-    | NavigationProp<ParamListBase, string, any, any>
-    | undefined;
+  dangerouslyGetParent<T = NavigationProp<ParamListBase> | undefined>(): T;
 
   /**
    * Returns the navigator's state. Reason why the function is called

packages/core/src/useNavigationCache.tsx

@@ -91,7 +91,7 @@ export default function useNavigationCache<
           ...rest,
           ...helpers,
           ...emitter.create(route.key),
-          dangerouslyGetParent: () => parentNavigation,
+          dangerouslyGetParent: () => parentNavigation as any,
           dangerouslyGetState: getState as () => State,
           dispatch,
           setOptions: (options: object) =>

packages/example/src/Screens/CompatAPI.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+import {
+  createCompatNavigatorFactory,
+  CompatScreenType,
+} from '@react-navigation/compat';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+} from '@react-navigation/stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+
+type CompatStackParams = {
+  Article: { author: string };
+  Album: undefined;
+};
+
+const ArticleScreen: CompatScreenType<
+  StackNavigationProp<CompatStackParams, 'Article'>
+> = ({ navigation }) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('Album')}
+        style={styles.button}
+      >
+        Push album
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Article author={{ name: navigation.getParam('author') }} />
+  </React.Fragment>
+);
+
+ArticleScreen.navigationOptions = ({ navigation }) => ({
+  title: `Article by ${navigation.getParam('author')}`,
+});
+
+const AlbumsScreen: CompatScreenType<
+  StackNavigationProp<CompatStackParams>
+> = ({ navigation }) => (
+  <React.Fragment>
+    <View style={styles.buttons}>
+      <Button
+        mode="contained"
+        onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+        style={styles.button}
+      >
+        Push article
+      </Button>
+      <Button
+        mode="outlined"
+        onPress={() => navigation.goBack()}
+        style={styles.button}
+      >
+        Go back
+      </Button>
+    </View>
+    <Albums />
+  </React.Fragment>
+);
+
+const CompatStack = createCompatNavigatorFactory(createStackNavigator)<
+  StackNavigationProp<CompatStackParams>
+>(
+  {
+    Article: {
+      screen: ArticleScreen,
+      params: {
+        author: 'Gandalf',
+      },
+    },
+    Album: AlbumsScreen,
+  },
+  {
+    mode: 'modal',
+  }
+);
+
+export default function CompatStackScreen({
+  navigation,
+}: {
+  navigation: StackNavigationProp<{}>;
+}) {
+  navigation.setOptions({
+    header: null,
+  });
+
+  return <CompatStack />;
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

packages/example/src/index.tsx

@@ -27,6 +27,7 @@ import BottomTabsScreen from './Screens/BottomTabs';
 import MaterialTopTabsScreen from './Screens/MaterialTopTabs';
 import MaterialBottomTabs from './Screens/MaterialBottomTabs';
 import AuthFlow from './Screens/AuthFlow';
+import CompatAPI from './Screens/CompatAPI';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
@@ -55,6 +56,10 @@ const SCREENS = {
     title: 'Auth Flow',
     component: AuthFlow,
   },
+  'compat-api': {
+    title: 'Compat Layer',
+    component: CompatAPI,
+  },
 };
 
 const Drawer = createDrawerNavigator<RootDrawerParamList>();