Add link component utility

Author: ericvicenti

package.json

@@ -67,6 +67,7 @@
   },
   "peerDependencies": {
     "react": "*",
+    "react-dom": "*",
     "@react-navigation/core": "^3.0.0-alpha.8"
   },
   "jest": {

src/Link.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import { withNavigation, NavigationActions } from '@react-navigation/core';
+
+const queryString = require('query-string');
+
+const getTopNavigation = navigation => {
+  const parent = navigation.dangerouslyGetParent();
+  if (parent) {
+    return getTopNavigation(parent);
+  }
+  return navigation;
+};
+
+class LinkWithNavigation extends Component {
+  render() {
+    const {
+      children,
+      params,
+      routeName,
+      routeKey,
+      navigation,
+      action,
+    } = this.props;
+    const topNavigation = getTopNavigation(navigation);
+    const topRouter = topNavigation.router;
+    const navAction =
+      action ||
+      NavigationActions.navigate({
+        routeName,
+        key: routeKey,
+        params,
+      });
+    if (!action && !routeName && !routeKey) {
+      throw new Error(
+        'Must provide a routeName, routeKey, or a navigation action prop to <Link>'
+      );
+    }
+    if (action && routeKey) {
+      throw new Error(
+        'Cannot specify a conflicting "routeKey" and a navigation "action" prop. Either use routeName with routeKey to specify a navigate action, or provide the specific navigation "action" prop.'
+      );
+    }
+    if (action && routeName) {
+      throw new Error(
+        'Cannot specify a conflicting "routeName" and a navigation "action" prop. Either use routeName with routeKey to specify a navigate action, or provide the specific navigation "action" prop.'
+      );
+    }
+    const navActionResponse = topRouter.getStateForAction(
+      navAction,
+      topNavigation.state
+    );
+    const nextState =
+      navActionResponse === null ? topNavigation.state : navActionResponse;
+    const pathAndParams = topRouter.getPathAndParamsForState(nextState);
+    const href = Object.keys(pathAndParams.params).length
+      ? `/${pathAndParams.path}?${queryString.stringify(pathAndParams.params)}`
+      : `/${pathAndParams.path}`;
+    return (
+      <a
+        href={href}
+        onClick={e => {
+          navigation.dispatch(navAction);
+          e.preventDefault();
+        }}
+      >
+        {children}
+      </a>
+    );
+  }
+}
+const Link = withNavigation(LinkWithNavigation);
+
+export default Link;

src/index.js

@@ -5,4 +5,7 @@ module.exports = {
   get handleServerRequest() {
     return require('./handleServerRequest').default;
   },
+  get Link() {
+    return require('./Link').default;
+  },
 };