Use metro & babel config to run example without library packing

example/android/app/build.gradle

@@ -180,6 +180,8 @@ android {
 
 dependencies {
     implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation project(':rctmgl')
+
     implementation "com.facebook.react:react-native:+"  // From node_modules
     if (enableHermes) {
         def hermesPath = "../../node_modules/hermes-engine/android/";

example/android/app/src/main/java/com/rnmapboxglexample/MainApplication.java

@@ -9,6 +9,7 @@
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
+import com.mapbox.rctmgl.RCTMGLPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -25,6 +26,7 @@ protected List<ReactPackage> getPackages() {
           List<ReactPackage> packages = new PackageList(this).getPackages();
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
+          packages.add(new RCTMGLPackage());
           return packages;
         }
 

example/android/settings.gradle

@@ -1,3 +1,7 @@
 rootProject.name = 'RNMapboxGLExample'
+
+include ':rctmgl'
+project(':rctmgl').projectDir = new File(rootProject.projectDir, '../../android/rctmgl')
+
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'

example/babel.config.js

@@ -1,3 +1,30 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    '@babel/plugin-transform-modules-commonjs',
+    [
+        'module-resolver',
+        {
+          alias: {
+            '@react-native-mapbox-gl/maps': '../javascript/index',
+            // from maps/package.json
+            react: './node_modules/react',
+            'react-native': './node_modules/react-native',
+            '@turf/helpers': './node_modules/@turf/helpers',
+            '@turf/distance': './node_modules/@turf/distance',
+            '@turf/nearest-point-on-line': './node_modules/@turf/nearest-point-on-line',
+            '@turf/length': './node_modules/@turf/length',
+            '@turf/along': './node_modules/@turf/along',
+            '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport',
+            'underscore': './node_modules/underscore',
+
+            '@babel': './node_modules/@babel',
+            fbjs: './node_modules/fbjs',
+            'hoist-non-react-statics': './node_modules/hoist-non-react-statics',
+            invariant: './node_modules/invariant',
+            'prop-types': './node_modules/prop-types',
+          },
+        }
+    ]
+  ].filter(Boolean),
 };

example/ios/Podfile

@@ -32,14 +32,14 @@ target 'RNMapboxGLExample' do
   pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-  pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox-gl/maps'
+  pod 'react-native-mapbox-gl', :path => '../../'
 
   target 'RNMapboxGLExampleTests' do
     inherit! :search_paths
     # Pods for testing
   end
 
-  pod 'NoUseFrameworks-MapboxMobileEvents',  :podspec => '../node_modules/@react-native-mapbox-gl/maps/ios/NoUseFrameworks-MapboxMobileEvents/NoUseFrameworks-MapboxMobileEvents.podspec.json'
+  pod 'NoUseFrameworks-MapboxMobileEvents',  :podspec => '../../ios/NoUseFrameworks-MapboxMobileEvents/NoUseFrameworks-MapboxMobileEvents.podspec.json'
   # use_frameworks!
 
   use_native_modules!

example/metro.config.js

@@ -4,8 +4,36 @@
  *
  * @format
  */
+const blacklist = require('metro-config/src/defaults/blacklist');
+const path = require('path');
+
+const glob = require('glob-to-regexp');
+
+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/hoist-non-react-statics/*`
+    ),
+    glob(
+      `${path.resolve(
+        __dirname
+      )}/node_modules/react-native/node_modules/@babel/*`
+    ),
+  ];
+  return blacklist(nodeModuleDirs);
+}
 
 module.exports = {
+  resolver: {
+    blacklistRE: getBlacklist(),
+  },
+  watchFolders: [path.resolve(__dirname, '..')],
   transformer: {
     getTransformOptions: async () => ({
       transform: {

example/package.json

@@ -8,22 +8,16 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint .",
-    "copy:changes": "node ./scripts/watch_rngl.js",
-    "pack:gl": "./scripts/npm_pack_rngl.sh",
-    "clean:node:modules": "./scripts/clean_node_modules.sh",
-    "preinstall": "npm run pack:gl",
-    "postinstall": "node ./scripts/set_access_token.js && jetifier",
-    "reset:from:gl": "npm run clean:node:modules && npm install"
+    "postinstall": "node ./scripts/set_access_token.js && jetifier"
   },
   "dependencies": {
     "@mapbox/geo-viewport": "^0.4.0",
     "@mapbox/mapbox-sdk": "^0.6.0",
-    "@react-native-mapbox-gl/maps": "file:../react-native-mapbox-gl-maps.tgz",
     "@turf/along": "^5.1.5",
     "@turf/bbox-polygon": "^6.0.1",
     "@turf/bearing": "^5.1.5",
     "@turf/distance": "^5.1.5",
-    "@turf/helpers": "^4.7.3",
+    "@turf/helpers": "^6.1.4",
     "@turf/length": "^6.0.2",
     "@turf/line-distance": "^4.7.3",
     "@turf/nearest": "^4.7.3",
@@ -38,14 +32,19 @@
     "react-native-safe-area-view": "^0.13.1",
     "react-native-vector-icons": "^6.6.0",
     "react-navigation": "^2.18.3",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+
+    "underscore": "^1.8.3",
+    "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^0.0.5",
     "babel-jest": "^24.9.0",
     "eslint": "^6.8.0",
+    "glob-to-regexp": "^0.4.0",
+    "babel-plugin-module-resolver": "^3.2.0",
     "jest": "^24.9.0",
     "jetifier": "^1.6.4",
     "metro-react-native-babel-preset": "^0.56.0",

javascript/components/MapView.js

@@ -21,6 +21,11 @@ import {getFilter} from '../utils/filterUtils';
 import NativeBridgeComponent from './NativeBridgeComponent';
 
 const MapboxGL = NativeModules.MGLModule;
+if (MapboxGL == null) {
+  console.error(
+    'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
+  );
+}
 
 export const NATIVE_MODULE_NAME = 'RCTMGLMapView';