chore: create adapter for both navigation, adjust types

Author: lukewalczak

package.json

@@ -59,7 +59,7 @@
     "@callstack/eslint-config": "^13.0.2",
     "@commitlint/config-conventional": "^8.3.4",
     "@expo/vector-icons": "^14.0.2",
-    "@react-navigation/native": "^6.1.2",
+    "@react-navigation/native": "^7.1.6",
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/jest-native": "^5.4.1",
     "@testing-library/react-native": "11.5.0",
@@ -132,7 +132,7 @@
       "__fixtures__\\/[^/]+\\/(output|error)\\.js"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native(-.*)?)/)"
+      "node_modules/(?!(@react-navigation|@react-native|react-native(-.*)?)/)"
     ]
   },
   "greenkeeper": {

src/react-navigation/__tests__/adapter.v6.test.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { useLinkTools, useLinkBuilder } from '@react-navigation/native';
+import { renderHook } from '@testing-library/react-native';
+
+import { useNavigationLink } from '../adapter';
+
+jest.mock('@react-navigation/native', () => ({
+  useLinkBuilder: jest.fn().mockReturnValue(jest.fn()),
+}));
+
+describe('React Navigation adapter', () => {
+  describe('when v6 is used', () => {
+    it('should use useLinkBuilder() to create link', () => {
+      let builder;
+
+      renderHook(() => {
+        builder = useNavigationLink();
+        builder('routeKey');
+      });
+
+      expect(useLinkTools).toBeUndefined();
+      expect(useLinkBuilder).toHaveBeenCalled();
+      expect(builder).toHaveBeenCalledWith('routeKey');
+    });
+  });
+});

src/react-navigation/__tests__/adapter.v7.test.ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { useLinkTools, useLinkBuilder } from '@react-navigation/native';
+import { renderHook } from '@testing-library/react-native';
+
+import { useNavigationLink } from '../adapter';
+
+jest.mock('@react-navigation/native', () => ({
+  useLinkTools: jest.fn().mockReturnValue({ buildHref: jest.fn() }),
+}));
+
+describe('React Navigation adapter', () => {
+  describe('when v7 is used', () => {
+    it('should use useLinkTools() to create link', () => {
+      let builder;
+
+      renderHook(() => {
+        builder = useNavigationLink();
+        builder('routeKey');
+      });
+
+      expect(useLinkTools).toHaveBeenCalled();
+      expect(useLinkBuilder).toBeUndefined();
+      expect(builder).toHaveBeenCalledWith('routeKey');
+    });
+  });
+});

src/react-navigation/adapter.ts

@@ -0,0 +1,24 @@
+import {
+  // @ts-ignore: this hook is not available in React Navigation v7
+  useLinkBuilder,
+  // @ts-ignore: this hook is not available in React Navigation v6
+  useLinkTools,
+} from '@react-navigation/native';
+
+function useV7LinkBuilder() {
+  const tools = useLinkTools();
+  return tools.buildHref;
+}
+
+type NavigationLink = () => (
+  name: string,
+  params?: object
+) => string | undefined;
+
+/**
+ * In React Navigation 7 `useLinkBuilder` was superseded by `useLinkTools`
+ * https://reactnavigation.org/docs/7.x/upgrading-from-6.x/#the-uselinkto-and-uselinkbuilder-hooks-are-merged-into-uselinktools
+ **/
+
+export const useNavigationLink: NavigationLink =
+  typeof useLinkTools !== 'undefined' ? useV7LinkBuilder : useLinkBuilder;

src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx

@@ -3,11 +3,14 @@ import * as React from 'react';
 import {
   createNavigatorFactory,
   DefaultNavigatorOptions,
+  NavigatorTypeBagBase,
   ParamListBase,
+  StaticConfig,
   TabActionHelpers,
   TabNavigationState,
   TabRouter,
   TabRouterOptions,
+  TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/native';
 
@@ -18,11 +21,14 @@ import type {
 } from '../types';
 import MaterialBottomTabView from '../views/MaterialBottomTabView';
 
+// Based on: https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/src/types.tsx#L445-L454
 export type MaterialBottomTabNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
+  undefined,
   TabNavigationState<ParamListBase>,
   MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationEventMap
+  MaterialBottomTabNavigationEventMap,
+  typeof MaterialBottomTabView
 > &
   TabRouterOptions &
   MaterialBottomTabNavigationConfig;
@@ -64,9 +70,22 @@ function MaterialBottomTabNavigator({
   );
 }
 
-export default createNavigatorFactory<
-  TabNavigationState<ParamListBase>,
-  MaterialBottomTabNavigationOptions,
-  MaterialBottomTabNavigationEventMap,
-  typeof MaterialBottomTabNavigator
->(MaterialBottomTabNavigator);
+// Based on: https://github.com/react-navigation/react-navigation/blob/main/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx#L65-L86
+export default function <
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined,
+  const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: TabNavigationState<ParamList>;
+    ScreenOptions: MaterialBottomTabNavigationOptions;
+    EventMap: MaterialBottomTabNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: MaterialBottomTabNavigatorProps;
+    };
+    Navigator: typeof MaterialBottomTabNavigator;
+  },
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(MaterialBottomTabNavigator)(config);
+}

src/react-navigation/views/MaterialBottomTabView.tsx

@@ -7,11 +7,11 @@ import {
   ParamListBase,
   Route,
   TabNavigationState,
-  useLinkBuilder,
 } from '@react-navigation/native';
 
 import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
 import MaterialCommunityIcon from '../../components/MaterialCommunityIcon';
+import { useNavigationLink } from '../adapter';
 import type {
   MaterialBottomTabDescriptorMap,
   MaterialBottomTabNavigationConfig,
@@ -29,7 +29,7 @@ export default function MaterialBottomTabView({
   descriptors,
   ...rest
 }: Props) {
-  const buildLink = useLinkBuilder();
+  const buildLink = useNavigationLink();
 
   return (
     <BottomNavigation

yarn.lock

@@ -3741,43 +3741,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/core@npm:^6.4.9":
-  version: 6.4.9
-  resolution: "@react-navigation/core@npm:6.4.9"
+"@react-navigation/core@npm:^7.8.5":
+  version: 7.8.5
+  resolution: "@react-navigation/core@npm:7.8.5"
   dependencies:
-    "@react-navigation/routers": "npm:^6.1.9"
+    "@react-navigation/routers": "npm:^7.3.5"
     escape-string-regexp: "npm:^4.0.0"
-    nanoid: "npm:^3.1.23"
+    nanoid: "npm:3.3.8"
     query-string: "npm:^7.1.3"
-    react-is: "npm:^16.13.0"
-    use-latest-callback: "npm:^0.1.5"
+    react-is: "npm:^18.2.0"
+    use-latest-callback: "npm:^0.2.1"
+    use-sync-external-store: "npm:^1.2.2"
   peerDependencies:
-    react: "*"
-  checksum: 10c0/31b77d026a6064712ef275e66c891c6eaf82c6494b96391ba839dad99c40dd2635921ebab8af0a4df71042f889d7165695124f751804ce16012182573139c255
+    react: ">= 18.2.0"
+  checksum: 10c0/3c26d39cd1186a8a78805b6a19e9fcea9747b6c0fdeb470b5aced0dc56cd209040880a874df71731cb4b426b31aa6e4efb0e9d3ced0b52009afc5676352f7bb7
   languageName: node
   linkType: hard
 
-"@react-navigation/native@npm:^6.1.2":
-  version: 6.1.7
-  resolution: "@react-navigation/native@npm:6.1.7"
+"@react-navigation/native@npm:^7.1.6":
+  version: 7.1.6
+  resolution: "@react-navigation/native@npm:7.1.6"
   dependencies:
-    "@react-navigation/core": "npm:^6.4.9"
+    "@react-navigation/core": "npm:^7.8.5"
     escape-string-regexp: "npm:^4.0.0"
     fast-deep-equal: "npm:^3.1.3"
-    nanoid: "npm:^3.1.23"
+    nanoid: "npm:3.3.8"
+    use-latest-callback: "npm:^0.2.1"
   peerDependencies:
-    react: "*"
+    react: ">= 18.2.0"
     react-native: "*"
-  checksum: 10c0/d1f6bc00782c8c40bc8a471fde7240cab41e627f7e4bba060aff118abc0496df006f2354a6d3a896cfc8048bbacb71eb682677ff9a3b5649e22efbe4b04e6bfe
+  checksum: 10c0/f0f78885662bb20d48e31a9f7ffae24c90de43b1b902aee87ffe2e9e510e69d0417202e20f97077d41ab42170665eb4c2815a271758134701175ffe39374e166
   languageName: node
   linkType: hard
 
-"@react-navigation/routers@npm:^6.1.9":
-  version: 6.1.9
-  resolution: "@react-navigation/routers@npm:6.1.9"
+"@react-navigation/routers@npm:^7.3.5":
+  version: 7.3.5
+  resolution: "@react-navigation/routers@npm:7.3.5"
   dependencies:
-    nanoid: "npm:^3.1.23"
-  checksum: 10c0/5b58014cf29bb71c7dc01201e271d55f0ecfe6d38d064179eeff0fc0b5cb739d4d9906eb133f100d25fc674c72c24aa65d5f6bfc3d036d79f7c5d1936391c605
+    nanoid: "npm:3.3.8"
+  checksum: 10c0/f94f70391b5429707932a5c49014371815da20d715f15911c556bf606a8519d0f43382e0983c6c96cf2a40ddd8c2f8ecf38e33dcb9a65eb8cb02bdf377fccdd9
   languageName: node
   linkType: hard
 
@@ -11685,12 +11687,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.23":
-  version: 3.3.6
-  resolution: "nanoid@npm:3.3.6"
+"nanoid@npm:3.3.8":
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 10c0/606b355960d0fcbe3d27924c4c52ef7d47d3b57208808ece73279420d91469b01ec1dce10fae512b6d4a8c5a5432b352b228336a8b2202a6ea68e67fa348e2ee
+  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
   languageName: node
   linkType: hard
 
@@ -12880,14 +12882,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.3.1":
+"react-is@npm:^18.2.0, react-is@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
   checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
@@ -12938,7 +12940,7 @@ __metadata:
     "@callstack/react-theme-provider": "npm:^3.0.9"
     "@commitlint/config-conventional": "npm:^8.3.4"
     "@expo/vector-icons": "npm:^14.0.2"
-    "@react-navigation/native": "npm:^6.1.2"
+    "@react-navigation/native": "npm:^7.1.6"
     "@release-it/conventional-changelog": "npm:^1.1.0"
     "@testing-library/jest-native": "npm:^5.4.1"
     "@testing-library/react-native": "npm:11.5.0"
@@ -15295,21 +15297,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-latest-callback@npm:^0.1.5":
-  version: 0.1.6
-  resolution: "use-latest-callback@npm:0.1.6"
+"use-latest-callback@npm:^0.2.1, use-latest-callback@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "use-latest-callback@npm:0.2.3"
   peerDependencies:
     react: ">=16.8"
-  checksum: 10c0/514604ad33cb2f040ad3ece8ee787cc549ec92135ee12ebc6857bb309eeacf5d66426b3b94089842e8215a252d5ca6f04b059387f681688fb70ac37b238209f9
+  checksum: 10c0/dc87503f6279ce2980f78e1019231ba20d7509e9d17adac05285babe4d6ba6f68c52f4ef7b5ad777cbc2af9fbaaa09d7adb664ca556da0aebab9f020022880be
   languageName: node
   linkType: hard
 
-"use-latest-callback@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "use-latest-callback@npm:0.2.3"
+"use-sync-external-store@npm:^1.2.2":
+  version: 1.5.0
+  resolution: "use-sync-external-store@npm:1.5.0"
   peerDependencies:
-    react: ">=16.8"
-  checksum: 10c0/dc87503f6279ce2980f78e1019231ba20d7509e9d17adac05285babe4d6ba6f68c52f4ef7b5ad777cbc2af9fbaaa09d7adb664ca556da0aebab9f020022880be
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/1b8663515c0be34fa653feb724fdcce3984037c78dd4a18f68b2c8be55cc1a1084c578d5b75f158d41b5ddffc2bf5600766d1af3c19c8e329bb20af2ec6f52f4
   languageName: node
   linkType: hard