Yatmo React Native SDK

A TypeScript package: a YatmoMapView component built on @maplibre/maplibre-react-native, a typed client for the REST API, and an optional WebView component. Works with the bare React Native CLI and with Expo development builds.

Requirements

• React Native 0.76 or later (new architecture), TypeScript optional (types are bundled).
• @maplibre/maplibre-react-native 11.x as a peer dependency (native module, so a rebuild of the app is needed).
• react-native-webview only if you use YatmoWebView.
• Your frontend key with the iOS bundle id and the Android application id registered as app ids.

Install

npm install @yatmo/react-native @maplibre/maplibre-react-native
# optional, for the WebView component
npm install react-native-webview
cd ios && pod install

Published on npm under the @yatmo scope; source and releases on github.com/yatmo/yatmo-sdk-react-native.

Configure

JavaScript cannot read the bundle id by itself, so pass the id of the running platform. react-native-device-info gives it with getBundleId(); a hard-coded Platform.select works too:

import { Platform } from 'react-native';
import { createYatmoClient } from '@yatmo/react-native';

export const yatmo = createYatmoClient({
  licenseKey: 'YOUR_FRONTEND_KEY',
  country: 'BE',
  language: 'FR',
  appId: Platform.select({ ios: 'com.myagency.homes', android: 'com.myagency.homes.android' })!,
});

The map

import { YatmoMapView } from '@yatmo/react-native';

export function ListingMap() {
  return (
    <YatmoMapView
      client={yatmo}
      property={{ latitude: 50.8520525, longitude: 4.3442926 }}
      zoom={15}
      mapStyle="liberty"
      isochrones="walking"
      onPoiSelected={(poi) => console.log(poi.name, poi.type)}
      style={{ height: 320, borderRadius: 12, overflow: 'hidden' }}
    />
  );
}

The component renders a MapLibre MapView with the Yatmo style, the property pin, POI markers that follow the camera (debounced, only from zoom 13) and the isochrone polygons. Children are passed through to the MapLibre Map, so you can add your own GeoJSONSource, Layer or Marker.

Props

Data: the client

const summary = await yatmo.summary({ latitude: 50.8520525, longitude: 4.3442926 });
const text = await yatmo.summaryText({ latitude: 50.8520525, longitude: 4.3442926 });
const scores = await yatmo.scores({ latitude: 50.8520525, longitude: 4.3442926 });
const enrichment = await yatmo.enrichment({ latitude: 50.8520525, longitude: 4.3442926 });
const places = await yatmo.geocode({ query: 'Rue Neuve', latitude: 50.85, longitude: 4.35 });
const pois = await yatmo.points({ southWest: [50.848, 4.338], northEast: [50.856, 4.350] });
const isochrones = await yatmo.isochrones({ mode: 'walking', latitude: 50.8520525, longitude: 4.3442926 });
const groups = await yatmo.simplifiedCategories();

Every method returns a typed promise and throws a YatmoError carrying status and message. Shapes: Summary, Enrichment, Points, Isochrone, Geolocation.

WebView component

import { YatmoWebView } from '@yatmo/react-native/webview';

<YatmoWebView client={yatmo} latitude={50.8520525} longitude={4.3442926} mode="overlay" zoom={15} style={{ height: 560 }} />

Renders the iframe plugin through react-native-webview. Same mode values as the iframe: overlay, overlay-scores, map-top, map, summary, summary-tabs.

Expo

MapLibre is a native module: use a development build (npx expo prebuild or EAS Build), not Expo Go. Register ios.bundleIdentifier and android.package from app.json as your app ids. The WebView component works in Expo Go.

Related: iOS SDK · Android SDK · Overview.