feat(web): make example start in web mode

Author: mfazekas

CONTRIBUTING.md

@@ -29,6 +29,12 @@ Some notes about example app:
   ```
   On android change `newArchEnabled=true` in `example/android/gralde.properties`
 
+### Running example app for Web
+
+```
+npx expo start -c --web
+```
+
 
 ## Best practices for PR's
 - If you plan to work on a bigger feature, please open a discussion, to discuss the best way to address it

example/app.json

@@ -1,4 +1,10 @@
 {
-  "name": "RNMapboxGLExample",
-  "displayName": "RNMapboxGLExample"
+  "expo": {
+    "name": "RNMapboxGLExample",
+    "displayName": "RNMapboxGLExample",
+    "web": {
+      "bundler": "metro",
+      "output": "single"
+    }
+  }
 }

example/babel.config.js

@@ -1,4 +1,23 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [['@babel/plugin-transform-private-methods', { loose: true }]],
+const path = require('path');
+
+const pak = require('../package.json');
+
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
+        },
+      ],
+    ],
+  };
 };

example/index.js

@@ -1,6 +1,10 @@
 import { AppRegistry } from 'react-native';
 
 import App from './src/App';
-import { name as appName } from './app.json';
+import appConfig from './app.json';
+
+const {
+  expo: { name: appName },
+} = appConfig;
 
 AppRegistry.registerComponent(appName, () => App);

example/package.json

@@ -1,10 +1,12 @@
 {
   "name": "RNMapboxGLExample",
+  "main": "expo/AppEntry.js",
   "version": "1.0.0",
   "private": true,
   "scripts": {
     "android": "yarn react-native run-android",
     "ios": "yarn react-native run-ios --simulator=\"iPhone SE (3rd generation)\"",
+    "web": "expo start -c --web",
     "pod:install": "cd ios && pod install",
     "start": "yarn react-native start",
     "postinstall": "node ./scripts/set_access_token.js",
@@ -35,37 +37,37 @@
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
-    "react-native": "0.74.0",
+    "react-native": "0.74.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-vector-icons": "9.2.0",
     "@rnmapbox/maps": "link:../"
   },
   "optionalDependencies": {
-    "@expo/webpack-config": "^0.17.2",
+    "@expo/metro-runtime": "3.2.1",
     "@types/responselike": "1.0.0",
-    "expo": "46.0.0",
-    "mapbox-gl": "^2.9.2",
-    "react-dom": "^18.2.0",
-    "react-native-web": "0.18.7"
+    "expo": "~51.0.1",
+    "mapbox-gl": "^3.3.0",
+    "react-dom": "18.2.0",
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "^0.74.2",
     "@react-native/eslint-config": "^0.74.1",
     "@react-native/metro-config": "^0.74.2",
     "@react-native/typescript-config": "^0.74.1",
-    "@types/react": "^18.2.6",
+    "@types/react": "^18.2.45",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "^2.8.8",
     "react-test-renderer": "18.2.0",
-    "typescript": "^5.0.4",
+    "typescript": "^5.3.3",
     "detox": "^20.12.1",
     "glob-to-regexp": "^0.4.0",
     "babel-plugin-module-resolver": "^5.0.0",

example/tsconfig.json

@@ -6,7 +6,6 @@
     "baseUrl": ".",
     "paths": {
       "@rnmapbox/maps": ["../src"],
-      "react": ["./node_modules/@types/react"],
     }
   },
   "include": ["global.d.ts", "index.js", "./__tests__/dumpExamplesJson.ts", "jest.config.ts", "jest.setup.ts"]

example/webpack.config.js

@@ -193,7 +193,7 @@ def $RNMapboxMaps.pre_install(installer)
 end
 
 ## RNMapboxMapsDownloadToken
-# expo does not supports `.netrc`, so we need to patch curl commend used by cocoapods to pass the credentials
+# expo does not support `.netrc`, so we need to patch curl command used by cocoapods to pass the credentials
 
 if $RNMapboxMapsDownloadToken
   module AddCredentialsToCurlWhenDownloadingMapbox