react-native-platform-maps 0.1.0

package/README.md

@@ -0,0 +1,99 @@
+# react-native-platform-maps
+
+Cross-platform React Native maps wrapper:
+
+- Android: Leaflet inside `react-native-webview`
+- iOS: `react-native-maps`
+
+## Install
+
+Install the package and its peer dependencies in the consumer app:
+
+```bash
+npm install react-native-platform-maps
+npx expo install react-native-maps react-native-webview
+```
+
+Or with Yarn:
+
+```bash
+yarn add react-native-platform-maps
+npx expo install react-native-maps react-native-webview
+```
+
+## Local development in this repo
+
+The current app can consume this package directly from `package.json` with:
+
+```json
+{
+  "dependencies": {
+    "react-native-platform-maps": "file:./packages/gs-rn-maps"
+  }
+}
+```
+
+Then run:
+
+```bash
+yarn install
+```
+
+## Usage
+
+```jsx
+import { MapView, Marker, Callout, PROVIDER_GOOGLE } from 'react-native-platform-maps';
+
+<MapView
+  style={{ flex: 1 }}
+  initialRegion={{
+    latitude: 10.8231,
+    longitude: 106.6297,
+    latitudeDelta: 0.01,
+    longitudeDelta: 0.01,
+  }}
+  provider={PROVIDER_GOOGLE}
+>
+  <Marker
+    coordinate={{
+      latitude: 10.8231,
+      longitude: 106.6297,
+    }}
+    title="Ho Chi Minh City"
+    description="Example marker"
+  />
+</MapView>
+```
+
+## API
+
+Exports:
+
+- `MapView`
+- `Marker`
+- `Callout`
+- `PROVIDER`
+- `PROVIDER_DEFAULT`
+- `PROVIDER_GOOGLE`
+- `LeafletMapView`
+
+## Android behavior
+
+The Android implementation focuses on a compatible subset of the `react-native-maps` API:
+
+- `initialRegion`
+- `region`
+- `animateToRegion(...)`
+- `Marker` with `coordinate`, `title`, `description`, `onPress`
+
+Rich React marker trees and fully custom callout JSX are not rendered inside the Leaflet WebView.
+
+## Publish
+
+Before publishing, make sure the package name is available on npm and update metadata if needed.
+
+```bash
+cd packages/gs-rn-maps
+npm pack --dry-run
+npm publish --access public
+```

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-native-platform-maps",
+  "version": "0.1.0",
+  "description": "Cross-platform React Native maps wrapper using Leaflet on Android and react-native-maps on iOS.",
+  "main": "src/index.js",
+  "react-native": "src/index.js",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react-native",
+    "expo",
+    "maps",
+    "leaflet",
+    "webview"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.81",
+    "react-native-maps": ">=1.20.1",
+    "react-native-webview": ">=13.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "UNLICENSED"
+}

package/src/LeafletMapView.js

@@ -0,0 +1,449 @@
+import React, {
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+const DEFAULT_REGION = {
+  latitude: 10.8231,
+  longitude: 106.6297,
+  latitudeDelta: 0.01,
+  longitudeDelta: 0.01,
+};
+
+const hasValidCoordinate = coordinate =>
+  Number.isFinite(coordinate?.latitude) && Number.isFinite(coordinate?.longitude);
+
+const getZoomFromDelta = latitudeDelta => {
+  if (!latitudeDelta) return 15;
+  return Math.round(Math.log2(360 / latitudeDelta));
+};
+
+const LeafletMapView = forwardRef((props, ref) => {
+  const {
+    style,
+    initialRegion,
+    region,
+    children,
+    onRegionChange,
+    onRegionChangeComplete,
+    userLocation,
+  } = props;
+
+  const webViewRef = useRef(null);
+  const markersRef = useRef([]);
+  const userLocationRef = useRef(null);
+  const isMapReadyRef = useRef(false);
+  const initialHtmlRegionRef = useRef(region || initialRegion || DEFAULT_REGION);
+
+  const postMessageToWebView = useCallback(message => {
+    if (!webViewRef.current) return;
+    webViewRef.current.postMessage(JSON.stringify(message));
+  }, []);
+
+  const updateMarkers = useCallback(() => {
+    postMessageToWebView({
+      type: 'updateMarkers',
+      payload: markersRef.current
+        .filter(marker => hasValidCoordinate(marker.coordinate))
+        .map(marker => ({
+          id: marker.id,
+          latitude: marker.coordinate.latitude,
+          longitude: marker.coordinate.longitude,
+          title: marker.title,
+          description: marker.description,
+        })),
+    });
+  }, [postMessageToWebView]);
+
+  const updateUserLocation = useCallback(coords => {
+    if (!hasValidCoordinate(coords) || !isMapReadyRef.current) return;
+    userLocationRef.current = coords;
+    postMessageToWebView({
+      type: 'updateUserLocation',
+      payload: coords,
+    });
+  }, [postMessageToWebView]);
+
+  const setRegion = useCallback((nextRegion, duration = 0) => {
+    if (!hasValidCoordinate(nextRegion) || !isMapReadyRef.current) return;
+    postMessageToWebView({
+      type: duration > 0 ? 'animateToRegion' : 'setRegion',
+      payload: {
+        latitude: nextRegion.latitude,
+        longitude: nextRegion.longitude,
+        zoom: getZoomFromDelta(nextRegion.latitudeDelta),
+        duration,
+      },
+    });
+  }, [postMessageToWebView]);
+
+  useEffect(() => {
+    const markers = [];
+
+    React.Children.forEach(children, child => {
+      if (child && child.type && child.type.displayName === 'LeafletMarker') {
+        markers.push({
+          id: child.key ?? String(markers.length),
+          coordinate: child.props.coordinate,
+          title: child.props.title || '',
+          description: child.props.description || '',
+          onPress: child.props.onPress,
+          children: child.props.children,
+        });
+      }
+    });
+
+    markersRef.current = markers;
+
+    if (isMapReadyRef.current) {
+      updateMarkers();
+    }
+  }, [children, updateMarkers]);
+
+  useImperativeHandle(ref, () => ({
+    animateToRegion: (nextRegion, duration = 500) => {
+      setRegion(nextRegion, duration);
+    },
+  }));
+
+  const handleMessage = event => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+
+      switch (data.type) {
+        case 'markerPress': {
+          const marker = markersRef.current.find(item => item.id === data.markerId);
+          if (marker?.onPress) {
+            marker.onPress();
+          }
+          break;
+        }
+        case 'regionChange':
+          onRegionChange?.(data.region);
+          break;
+        case 'regionChangeComplete':
+          onRegionChangeComplete?.(data.region);
+          break;
+        case 'mapReady':
+          isMapReadyRef.current = true;
+          updateMarkers();
+          if (userLocationRef.current) {
+            updateUserLocation(userLocationRef.current);
+          } else if (hasValidCoordinate(userLocation)) {
+            updateUserLocation(userLocation);
+          }
+          if (region) {
+            setRegion(region);
+          }
+          break;
+        default:
+          break;
+      }
+    } catch (error) {
+      console.warn('LeafletMapView: Error parsing message', error);
+    }
+  };
+
+  const htmlContent = useMemo(() => {
+    const htmlRegion = initialHtmlRegionRef.current;
+    const lat = htmlRegion?.latitude ?? DEFAULT_REGION.latitude;
+    const lng = htmlRegion?.longitude ?? DEFAULT_REGION.longitude;
+    const zoom = getZoomFromDelta(htmlRegion?.latitudeDelta ?? DEFAULT_REGION.latitudeDelta);
+
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
+  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
+  <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet/leaflet-maplibre-gl.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #map { width: 100%; height: 100%; }
+    .user-location-marker {
+      width: 20px;
+      height: 20px;
+      background: #4285F4;
+      border: 3px solid white;
+      border-radius: 50%;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+    }
+    .user-location-pulse {
+      width: 40px;
+      height: 40px;
+      background: rgba(66, 133, 244, 0.2);
+      border-radius: 50%;
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(0.5); opacity: 1; }
+      100% { transform: scale(1.5); opacity: 0; }
+    }
+    .custom-marker {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: 2px solid white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+    .custom-marker svg {
+      width: 18px;
+      height: 18px;
+      fill: white;
+    }
+    .marker-pin {
+      width: 3px;
+      height: 8px;
+      background: #667eea;
+      margin-top: -2px;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+    }
+    .leaflet-popup-content-wrapper {
+      border-radius: 12px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+    }
+    .popup-content {
+      padding: 4px 0;
+    }
+    .popup-title {
+      font-weight: bold;
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 4px;
+    }
+    .popup-desc {
+      font-size: 12px;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+  <div id="map"></div>
+  <script>
+    var map = L.map('map', {
+      zoomControl: false,
+      attributionControl: true
+    }).setView([${lat}, ${lng}], ${zoom});
+
+    try {
+      if (L.maplibreGL) {
+        L.maplibreGL({
+          style: 'https://tiles.openfreemap.org/styles/liberty',
+        }).addTo(map);
+      } else {
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          maxZoom: 19,
+          attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+      }
+    } catch (error) {
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; OpenStreetMap contributors'
+      }).addTo(map);
+    }
+
+    var markers = {};
+    var userMarker = null;
+
+    var shopIcon = L.divIcon({
+      className: 'marker-wrapper',
+      html: '<div class="custom-marker"><svg viewBox="0 0 24 24"><path d="M18.36 9L18.96 12H5.04L5.64 9H18.36ZM20 4H4V6H20V4ZM20 7H4L3 12V14H4V20H14V14H18V20H20V14H21V12L20 7ZM6 18V14H12V18H6Z"/></svg></div><div class="marker-pin"></div>',
+      iconSize: [32, 42],
+      iconAnchor: [16, 42],
+      popupAnchor: [0, -42]
+    });
+
+    var userIcon = L.divIcon({
+      className: 'user-location-wrapper',
+      html: '<div class="user-location-pulse"></div><div class="user-location-marker"></div>',
+      iconSize: [20, 20],
+      iconAnchor: [10, 10]
+    });
+
+    function updateMarkers(markerData) {
+      Object.keys(markers).forEach(function(id) {
+        map.removeLayer(markers[id]);
+      });
+      markers = {};
+
+      markerData.forEach(function(markerDataItem) {
+        if (Number.isFinite(markerDataItem.latitude) && Number.isFinite(markerDataItem.longitude)) {
+          var marker = L.marker([markerDataItem.latitude, markerDataItem.longitude], { icon: shopIcon });
+
+          if (markerDataItem.title || markerDataItem.description) {
+            var popupContent = '<div class="popup-content">';
+            if (markerDataItem.title) popupContent += '<div class="popup-title">' + markerDataItem.title + '</div>';
+            if (markerDataItem.description) popupContent += '<div class="popup-desc">' + markerDataItem.description + '</div>';
+            popupContent += '</div>';
+            marker.bindPopup(popupContent);
+          }
+
+          marker.on('click', function() {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+              type: 'markerPress',
+              markerId: markerDataItem.id
+            }));
+          });
+
+          marker.addTo(map);
+          markers[markerDataItem.id] = marker;
+        }
+      });
+    }
+
+    function updateUserLocation(coords) {
+      if (!coords || !Number.isFinite(coords.latitude) || !Number.isFinite(coords.longitude)) return;
+
+      var latlng = [coords.latitude, coords.longitude];
+
+      if (userMarker) {
+        userMarker.setLatLng(latlng);
+      } else {
+        userMarker = L.marker(latlng, { icon: userIcon }).addTo(map);
+      }
+    }
+
+    function setRegion(lat, lng, zoom) {
+      map.setView([lat, lng], zoom, { animate: false });
+    }
+
+    function animateToRegion(lat, lng, zoom, duration) {
+      map.flyTo([lat, lng], zoom, { duration: duration / 1000 });
+    }
+
+    document.addEventListener('message', function(e) {
+      handleMessage(e.data);
+    });
+    window.addEventListener('message', function(e) {
+      handleMessage(e.data);
+    });
+
+    function handleMessage(data) {
+      try {
+        var msg = JSON.parse(data);
+        switch(msg.type) {
+          case 'updateMarkers':
+            updateMarkers(msg.payload);
+            break;
+          case 'updateUserLocation':
+            updateUserLocation(msg.payload);
+            break;
+          case 'setRegion':
+            setRegion(
+              msg.payload.latitude,
+              msg.payload.longitude,
+              msg.payload.zoom
+            );
+            break;
+          case 'animateToRegion':
+            animateToRegion(
+              msg.payload.latitude,
+              msg.payload.longitude,
+              msg.payload.zoom,
+              msg.payload.duration
+            );
+            break;
+          default:
+            break;
+        }
+      } catch (e) {}
+    }
+
+    map.whenReady(function() {
+      window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'mapReady' }));
+    });
+
+    map.on('moveend', function() {
+      var center = map.getCenter();
+      var bounds = map.getBounds();
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'regionChangeComplete',
+        region: {
+          latitude: center.lat,
+          longitude: center.lng,
+          latitudeDelta: bounds.getNorth() - bounds.getSouth(),
+          longitudeDelta: bounds.getEast() - bounds.getWest()
+        }
+      }));
+    });
+  </script>
+</body>
+</html>
+    `;
+  }, []);
+
+  useEffect(() => {
+    if (hasValidCoordinate(userLocation)) {
+      userLocationRef.current = userLocation;
+      updateUserLocation(userLocation);
+    }
+  }, [updateUserLocation, userLocation]);
+
+  useEffect(() => {
+    if (region && isMapReadyRef.current) {
+      setRegion(region);
+    }
+  }, [region, setRegion]);
+
+  return (
+    <View style={[styles.container, style]}>
+      <WebView
+        ref={webViewRef}
+        source={{ html: htmlContent }}
+        style={styles.webview}
+        onMessage={handleMessage}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        originWhitelist={['*']}
+        scrollEnabled={false}
+        bounces={false}
+        overScrollMode="never"
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        cacheEnabled={true}
+        cacheMode="LOAD_CACHE_ELSE_NETWORK"
+      />
+    </View>
+  );
+});
+
+LeafletMapView.displayName = 'LeafletMapView';
+
+const LeafletMarker = () => null;
+LeafletMarker.displayName = 'LeafletMarker';
+
+const LeafletCallout = () => null;
+LeafletCallout.displayName = 'LeafletCallout';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+});
+
+export default LeafletMapView;
+export { LeafletMarker as Marker, LeafletCallout as Callout };

package/src/PlatformMapView.js

@@ -0,0 +1,37 @@
+/**
+ * PlatformMapView - platform-specific map component
+ * Android: uses Leaflet/OpenStreetMap via WebView
+ * iOS: uses react-native-maps
+ */
+import { Platform } from 'react-native';
+
+let MapView;
+let Marker;
+let Callout;
+let PROVIDER = null;
+let PROVIDER_DEFAULT = null;
+let PROVIDER_GOOGLE = null;
+
+if (Platform.OS === 'android') {
+  const Leaflet = require('./LeafletMapView');
+  MapView = Leaflet.default;
+  Marker = Leaflet.Marker;
+  Callout = Leaflet.Callout;
+} else {
+  const RNMaps = require('react-native-maps');
+  MapView = RNMaps.default;
+  Marker = RNMaps.Marker;
+  Callout = RNMaps.Callout;
+  PROVIDER = RNMaps.PROVIDER_DEFAULT;
+  PROVIDER_DEFAULT = RNMaps.PROVIDER_DEFAULT;
+  PROVIDER_GOOGLE = RNMaps.PROVIDER_GOOGLE;
+}
+
+export {
+  MapView as default,
+  Marker,
+  Callout,
+  PROVIDER,
+  PROVIDER_DEFAULT,
+  PROVIDER_GOOGLE,
+};

package/src/index.js

@@ -0,0 +1,10 @@
+export { default } from './PlatformMapView';
+export {
+  default as MapView,
+  Marker,
+  Callout,
+  PROVIDER,
+  PROVIDER_DEFAULT,
+  PROVIDER_GOOGLE,
+} from './PlatformMapView';
+export { default as LeafletMapView } from './LeafletMapView';