@sherlockbui/rn-custom-map-native

Ready-to-use cross-platform map components for React Native and Expo.

• Android: Leaflet in react-native-webview, using OpenFreeMap vector tiles with an OpenStreetMap raster fallback.
• iOS: Apple Maps through react-native-maps.
• No Google Maps API key is required by the package.

Install

yarn add @sherlockbui/rn-custom-map-native

The package installs compatible versions of react-native-maps and react-native-webview. Rebuild the native app after installing it.

Usage

import MapView, {
  Callout,
  Marker,
  PROVIDER,
} from '@sherlockbui/rn-custom-map-native';

const mapRef = useRef(null);

<MapView
  ref={mapRef}
  provider={PROVIDER}
  showsUserLocation
  userLocation={{latitude: 10.8231, longitude: 106.6297}}
  initialRegion={{
    latitude: 10.8231,
    longitude: 106.6297,
    latitudeDelta: 0.02,
    longitudeDelta: 0.02,
  }}>
  <Marker
    coordinate={{latitude: 10.8231, longitude: 106.6297}}
    title="Location"
    description="Selected location">
    <Callout />
  </Marker>
</MapView>;

The ref exposes the familiar method:

mapRef.current?.animateToRegion(region, 500);

Exports

• Default export and MapView
• Marker
• Callout
• PROVIDER
• LeafletMapView, LeafletMarker, and LeafletCallout
• TypeScript prop, coordinate, region, and ref types

Notes

• Android requires an internet connection to load the Leaflet/MapLibre runtime and map tiles.
• The WebView runtime pins MapLibre GL JS 5.24.0 and MapLibre GL Leaflet 0.1.3 for CDN compatibility.
• Native projects or Expo development builds must be rebuilt after the first install.
• This package targets React 19 and React Native 0.83.