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:

npm install react-native-platform-maps
npx expo install react-native-maps react-native-webview

Or with Yarn:

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:

{
  "dependencies": {
    "react-native-platform-maps": "file:./packages/gs-rn-maps"
  }
}

Then run:

yarn install

Usage

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.

cd packages/gs-rn-maps
npm pack --dry-run
npm publish --access public