feat: compatibility layer

Author: satya164

.eslintrc.json

@@ -6,6 +6,7 @@
       "@react-navigation/core",
       "@react-navigation/native",
       "@react-navigation/routers",
+      "@react-navigation/compat",
       "@react-navigation/stack",
       "@react-navigation/drawer",
       "@react-navigation/bottom-tabs",

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,
+    };
+  }
+}