Use babel instead of metro to resolve lib from example app

.eslintrc.js

@@ -85,7 +85,11 @@ module.exports = {
       files: ['**/*.{ts,tsx}'],
 
       parserOptions: {
-        project: './tsconfig.json',
+        project: [
+          './tsconfig.json',
+          './example/tsconfig.json',
+          './plugin/src/__tests__/tsconfig.eslint.json',
+        ],
       },
       plugins: ['@typescript-eslint'],
       extends: [

.github/workflows/on-push.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Type check
+        run: yarn type:check
+
       - name: Test
         run: yarn unittest
 

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",

example/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@rnmapbox/maps": ["../"],
+      "react": ["./node_modules/@types/react"],
+    }
+  },
+  "include": ["index.js", "src/**/*", "../index.ts", "../javascript/**/*"]
+}

index.d.ts

@@ -22,6 +22,8 @@ import {
   FeatureCollection,
 } from '@turf/helpers';
 
+import type { requestAndroidLocationPermissions as _requestAndroidLocationPermissions } from './javascript/requestAndroidLocationPermissions';
+
 // prettier-ignore
 type ExpressionName =
   // Types
@@ -108,7 +110,8 @@ declare namespace MapboxGL {
   function getAccessToken(): Promise<string>;
   function setTelemetryEnabled(telemetryEnabled: boolean): void;
   function setConnected(connected: boolean): void;
-  function requestAndroidLocationPermissions(): Promise<boolean>;
+
+  const requestAndroidLocationPermissions = _requestAndroidLocationPermissions;
 
   const offlineManager: OfflineManager;
   const snapshotManager: SnapshotManager;