chore: improve examples monorepo setup with reusable App

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+  presets: ["module:@react-native/babel-preset"],
   plugins: [
     ["@babel/plugin-proposal-class-properties", { loose: true }],
     ["@babel/plugin-transform-private-methods", { loose: true }],

package.json

@@ -57,7 +57,7 @@
     "@types/jest": "^29.5.12",
     "@types/mapbox__geo-viewport": "^0.4.1",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.79",
     "@types/react-native": "0.67.8",
     "debounce": "^2.0.0"
   },
@@ -67,7 +67,8 @@
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
     "@expo/config-plugins": "^7.2.5",
-    "@react-native/metro-config": "^0.72.7",
+    "@react-native/babel-preset": "^0.74.88",
+    "@react-native/metro-config": "^0.74.88",
     "@sinonjs/fake-timers": "^11.2.2",
     "@testing-library/react-native": "^12.4.3",
     "@tsconfig/node14": "^14.1.0",
@@ -84,13 +85,12 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "metro-react-native-babel-preset": "^0.76.7",
     "node-dir": "0.1.17",
     "pinst": "^3.0.0",
     "prettier": "3.3.3",
     "react": "18.2.0",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
-    "react-native": "0.74.6",
+    "react-native": "^0.74.6",
     "react-test-renderer": "18.2.0",
     "typescript": "^5.3.3"
   },

packages/examples/index.js

@@ -0,0 +1,3 @@
+import { App } from "./src/App";
+
+export default App;

packages/examples/package.json

@@ -2,18 +2,26 @@
   "name": "@maplibre-react-native/examples",
   "version": "1.0.0",
   "private": true,
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "react-native": "src/index.js",
-  "source": "src/index.js",
+  "main": "index.js",
+  "module": "index.js",
+  "react-native": "index.js",
+  "source": "index.js",
   "files": [
+    "index.js",
     "src",
     "!**/__tests__"
   ],
+  "peerDependencies": {
+    "@react-native-masked-view/masked-view": "^0.3.1",
+    "react": "18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-safe-area-context": "^4.11.1",
+    "react-native-screens": "^3.34.0"
+  },
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@maplibre/maplibre-react-native": "workspace:*",
-    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
     "@turf/along": "^6.5.0",
@@ -22,30 +30,17 @@
     "@turf/helpers": "^6.5.0",
     "@turf/length": "^6.5.0",
     "@turf/nearest-point-on-line": "^6.5.0",
-    "debounce": "^2.0.0",
-    "fbjs": "^3.0.5",
-    "moment": "^2.30.1",
-    "react": "18.2.0",
-    "react-native": "0.74.6",
-    "react-native-gesture-handler": "^2.20.0",
-    "react-native-safe-area-context": "^4.11.1",
-    "react-native-screens": "^3.34.0"
+    "moment": "^2.30.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/plugin-transform-private-methods": "^7.25.4",
-    "@babel/preset-typescript": "7.22.5",
-    "@babel/runtime": "^7.23.1",
-    "@react-native/metro-config": "^0.75.2",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@types/geojson": "7946.0.14",
     "@types/react": "^18.2.61",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "detox": "^20.17.0",
-    "glob-to-regexp": "^0.4.0",
-    "jest": "^29.7.0",
-    "jest-circus": "^29.7.0",
-    "jetifier": "^2.0.0",
-    "metro-react-native-babel-preset": "^0.77.0",
-    "typescript": "^5.3.3"
+    "react": "18.2.0",
+    "react-native": "^0.74.6",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-safe-area-context": "^4.11.1",
+    "react-native-screens": "^3.34.0",
+    "typescript": "^5.5.3"
   }
 }

packages/react-native-app/src/App.js → packages/examples/src/App.tsx

@@ -1,12 +1,14 @@
 import MapLibreGL from "@maplibre/maplibre-react-native";
-import { sheet, colors } from "@maplibre-react-native/examples";
-import { default as Home } from "@maplibre-react-native/examples/src/scenes/Examples";
-import { IS_ANDROID } from "@maplibre-react-native/examples/src/utils";
 import React, { useEffect, useState } from "react";
 import { StyleSheet, Text, View, LogBox } from "react-native";
 import { SafeAreaView, SafeAreaProvider } from "react-native-safe-area-context";
 import "react-native-gesture-handler";
 
+import { default as Home } from "./scenes/Examples";
+import colors from "./styles/colors";
+import sheet from "./styles/sheet";
+import { IS_ANDROID } from "./utils";
+
 LogBox.ignoreLogs([
   "Warning: isMounted(...) is deprecated",
   "Module RCTImageLoader",
@@ -21,7 +23,7 @@ const styles = StyleSheet.create({
 
 MapLibreGL.setAccessToken(null);
 
-export default function App() {
+export function App() {
   const [isFetchingAndroidPermission, setIsFetchingAndroidPermission] =
     useState(IS_ANDROID);
   const [isAndroidPermissionGranted, setIsAndroidPermissionGranted] =

packages/examples/src/components/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import {
   ScrollView,
   StyleSheet,

packages/expo-app/app.config.ts

@@ -0,0 +1,30 @@
+import { ExpoConfig, ConfigContext } from "expo/config";
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "Expo",
+  slug: "maplibre-react-native-expo-example",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: "./assets/icon.png",
+  splash: {
+    image: "./assets/splash.png",
+    resizeMode: "contain",
+    backgroundColor: "#ffffff",
+  },
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: "org.maplibre.expo.example",
+  },
+  android: {
+    adaptiveIcon: {
+      foregroundImage: "./assets/adaptive-icon.png",
+      backgroundColor: "#ffffff",
+    },
+    package: "org.maplibre.expo.example",
+  },
+  plugins: [
+    ["expo-dev-launcher", { launchMode: "most-recent" }],
+    "@maplibre/maplibre-react-native",
+  ],
+});

packages/expo-app/babel.config.js

@@ -1,13 +1,3 @@
-module.exports = function (api) {
-  api.cache(false);
-  return {
-    presets: [
-      [
-        "babel-preset-expo",
-        {
-          jsxRuntime: "automatic",
-        },
-      ],
-    ],
-  };
+module.exports = {
+  presets: ["babel-preset-expo"],
 };

packages/expo-app/index.js

@@ -0,0 +1,4 @@
+import App from "@maplibre-react-native/examples";
+import { registerRootComponent } from "expo";
+
+registerRootComponent(App);

packages/expo-app/metro.config.js

@@ -1,71 +1,29 @@
 /* eslint-env node */
-
-// Learn more https://docs.expo.io/guides/customizing-metro
-/** @type {import('expo/metro-config').MetroConfig} */
-
 const { getDefaultConfig } = require("expo/metro-config");
-const { FileStore } = require("metro-cache");
 const path = require("path");
 
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
-require("@expo/env").load(workspaceRoot, { force: true });
-
-const config = getDefaultConfig(__dirname);
-
-function withAssets(config) {
-  const { transformer, resolver } = config;
-  config.transformer = {
-    ...transformer,
-    //babelTransformerPath: require.resolve('react-native-svg-transformer'),
-  };
-  config.resolver = {
-    ...resolver,
-    // assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
-    // sourceExts: [...resolver.sourceExts, 'mjs', 'cjs', 'svg'],
-  };
-  // Remove console logs
-  config.transformer.minifierConfig.compress.drop_console = true;
-  return config;
-}
-
 /**
- * Add the monorepo paths to the Metro config.
- * This allows Metro to resolve modules from the monorepo.
- *
- * @see https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
- * @param {import('expo/metro-config').MetroConfig} config
+ * @param config {import('expo/metro-config').MetroConfig}
  * @returns {import('expo/metro-config').MetroConfig}
  */
 function withMonorepoPaths(config) {
-  // #1 - Watch all files in the monorepo
+  // Watch all files in the monorepo
   config.watchFolders = [workspaceRoot];
+
+  // Set `node_modules` to resolve
   config.resolver.nodeModulesPaths = [
     path.resolve(projectRoot, "node_modules"),
+    path.resolve(workspaceRoot, "packages/examples/node_modules"),
     path.resolve(workspaceRoot, "node_modules"),
   ];
 
-  // #3 - Force resolving nested modules to the folders below
+  // Resolve only (sub)dependencies from the `nodeModulesPaths`
   config.resolver.disableHierarchicalLookup = true;
 
   return config;
 }
 
-/**
- * Move the Metro cache to the `node_modules/.cache/metro` folder.
- * This repository configured Turborepo to use this cache location as well.
- * If you have any environment variables, you can configure Turborepo to invalidate it when needed.
- *
- * @see https://turbo.build/repo/docs/reference/configuration#env
- * @param {import('expo/metro-config').MetroConfig} config
- * @returns {import('expo/metro-config').MetroConfig}
- */ // eslint-disable-next-line no-unused-vars
-function withTurborepoManagedCache(config) {
-  config.cacheStores = [
-    new FileStore({ root: path.join(__dirname, "node_modules/.cache/metro") }),
-  ];
-  return config;
-}
-
-module.exports = withMonorepoPaths(withAssets(config));
+module.exports = withMonorepoPaths(getDefaultConfig(projectRoot));