Use babel config instead of metro to resolve lib in example app

example/babel.config.js

@@ -1,7 +1,44 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [
-    '@babel/plugin-transform-modules-commonjs',
-    ['module-resolver'],
-  ].filter(Boolean),
+module.exports = (api) => {
+  const isWeb = api.caller(isTargetWeb);
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      'module:metro-react-native-babel-preset',
+    ],
+    plugins: [
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-transform-modules-commonjs',
+      isWeb
+        ? [
+            'module-resolver',
+            {
+              alias: {
+                '@rnmapbox/maps': './maps/',
+              },
+            },
+          ]
+        : [
+            'module-resolver',
+            {
+              alias: {
+                '@rnmapbox/maps': '../javascript',
+                react: './node_modules/react',
+                'react-native': './node_modules/react-native',
+                '@babel': './node_modules/@babel',
+                '@turf': './node_modules/@turf',
+                '@mapbox': './node_modules/@mapbox',
+                debounce: './node_modules/debounce',
+                'prop-types': './node_modules/prop-types',
+                'deprecated-react-native-prop-types':
+                  './node_modules/deprecated-react-native-prop-types',
+              },
+            },
+          ],
+    ].filter(Boolean),
+  };
 };
+
+function isTargetWeb(caller) {
+  return caller && caller.name === 'babel-loader';
+}

example/metro.config.js

@@ -1,32 +1,36 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
 const path = require('path');
+const fs = require('fs');
 
-/*
-  See
-
-  https://medium.com/@dushyant_db/how-to-import-files-from-outside-of-root-directory-with-react-native-metro-bundler-18207a348427
-*/
-
-// exclusionList is a function that takes an array of regexes and combines
-// them with the default exclusions to return a single regex.
-const exclusionList = require('metro-config/src/defaults/exclusionList');
+const blacklist = require('metro-config/src/defaults/exclusionList');
 const glob = require('glob-to-regexp');
 
-const extraNodeModules = {
-  '@rnmapbox/maps': path.resolve(__dirname + '/../maps'),
-};
+const assetRegistryPath = fs
+  .realpathSync(require.resolve('react-native/Libraries/Image/AssetRegistry'))
+  .replace('.js', '');
+
+const inlineRequireBlockList = new Proxy(
+  {},
+  {
+    has: (target, name) => {
+      if (
+        name.endsWith('.js') &&
+        name.includes('/react-navigation-stack/lib/module/vendor/views/')
+      ) {
+        return true;
+      }
+      return false;
+    },
+  },
+);
 
 function getBlacklist() {
   const nodeModuleDirs = [
     glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
     glob(`${path.resolve(__dirname, '..')}/docs/*`),
     glob(`${path.resolve(__dirname, '..')}/e2e/*`),
-    glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
+    glob(
+      `${path.resolve(__dirname)}/node_modules/*/node_modules/lodash.isequal/*`,
+    ),
     glob(
       `${path.resolve(
         __dirname,
@@ -38,26 +42,20 @@ function getBlacklist() {
       )}/node_modules/react-native/node_modules/@babel/*`,
     ),
   ];
-  return exclusionList(nodeModuleDirs);
+  return blacklist(nodeModuleDirs);
 }
 
 module.exports = {
   resolver: {
     blacklistRE: getBlacklist(),
-    extraNodeModules: new Proxy(extraNodeModules, {
-      get: (target, name) => {
-        return name in target
-          ? target[name]
-          : path.join(process.cwd(), `node_modules/${name}`);
-      },
-    }),
   },
   watchFolders: [path.resolve(__dirname, '..')],
   transformer: {
+    assetRegistryPath: assetRegistryPath,
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
-        inlineRequires: true,
+        inlineRequires: { blockList: inlineRequireBlockList },
       },
     }),
   },

example/package.json

@@ -37,11 +37,12 @@
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
     "react-native-vector-icons": "9.0.0",
-    "react-navigation": "^4.3.7",
-    "react-navigation-stack": "^2.3.11"
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@babel/preset-typescript": "^7.12.17",
     "@babel/runtime": "^7.12.5",
     "babel-plugin-module-resolver": "^4.1.0",
     "detox": "^19.1.0 <19.5.2 || >19.5.2",

package.json

@@ -70,11 +70,11 @@
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "2.25.3",
     "expo-module-scripts": "^2.0.0",
-    "husky": "4.3.8",
+    "husky": "^7.0.4",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
     "lint-staged": "^12.1.2",
-    "metro-react-native-babel-preset": "0.69.0",
+    "metro-react-native-babel-preset": "0.71.1",
     "node-dir": "0.1.17",
     "prettier": "2.6.2",
     "react": "17.0.2",