Mobile Maps SDK

Migrating from the legacy SDK

Contents

This guide covers migrating from the legacy Trimble Maps React Native wrapper (TrimbleMapsMapViewModule, TrimbleMapsModule, maps-reactnative-sdk:0.3.0) to the modular @trimblemaps/* packages.

The legacy SDK used a single monolithic native bridge with imperative NativeModules calls. The new SDK splits functionality across focused npm packages with a declarative, component-based API.

Package mapping

Legacy module New package
TrimbleMapsMapViewModule @trimblemaps/maps-react-native (<Map>, <Camera>, layers)
TrimbleMapsModule / account init @trimblemaps/maps-react-native or @trimblemaps/account-react-native (AccountManager)
TrimbleMapsGeocoding @trimblemaps/services-react-native (geocode, reverseGeocode)
TrimbleMapsRouteModule @trimblemaps/plugins-react-native (createRoutePlugin)

What changed

Old API New API
NativeModules.TrimbleMapsMapViewModule <Map> component props and refs
TrimbleMapsMapViewModule.setZoom(zoom) <Camera initialViewState={{ zoom }} /> or cameraRef.flyTo({ zoom, ... })
TrimbleMapsMapViewModule.setTarget(lat, lon) <Camera initialViewState={{ center: [lon, lat] }} /> or cameraRef.flyTo({ center: [lon, lat], ... })
TrimbleMapsMapViewModule.MobileDay() TrimbleMaps.StyleURL.MobileDay (sync constant)
Imperative layer management Declarative JSX (<GeoJSONSource>, <Layer>, …)
Platform-split if (Platform.OS) code Unified TypeScript/JSX API
Old Architecture New Architecture (Fabric/TurboModules) required
(latitude, longitude) [longitude, latitude] (GeoJSON order)

Before and after

Before (legacy) 

import { NativeModules } from "react-native";
const { TrimbleMapsMapViewModule } = NativeModules;

TrimbleMapsMapViewModule.setStyle(TrimbleMapsMapViewModule.MobileDay());
TrimbleMapsMapViewModule.setTarget(40.7128, -74.006); // (lat, lon)
TrimbleMapsMapViewModule.setZoom(12);

After (declarative) 

import {
  Account,
  AccountManager,
  LicensedFeature,
  Map,
  Camera,
  TrimbleMaps,
} from "@trimblemaps/maps-react-native";

await AccountManager.initialize(
  new Account({
    apiKey: "YOUR_TRIMBLEMAPS_API_KEY",
    licensedFeatures: [LicensedFeature.MapsSDK],
  }),
);
await AccountManager.awaitInitialization();

<Map mapStyle={TrimbleMaps.StyleURL.MobileDay} style={{ flex: 1 }}>
  <Camera initialViewState={{ center: [-74.006, 40.7128], zoom: 12 }} />
</Map>

Migration steps

  1. Enable the New Architecture (newArchEnabled=true) in your app.
  2. Remove the legacy com.trimblemaps.reactnative:maps-reactnative-sdk Maven dependency and manual TrimbleMapsPackages() registration.
  3. Install @trimblemaps/maps-react-native and configure native dependencies — see Getting started.
  4. Replace account init with AccountManager.initialize() + AccountManager.awaitInitialization().
  5. Replace the native map view with <Map> and <Camera> (remember [lon, lat] coordinate order).
  6. Convert layer calls to declarative <GeoJSONSource> + <Layer> children.
  7. Replace geocoding with @trimblemaps/services-react-native (geocode, reverseGeocode).
  8. Replace routing with @trimblemaps/plugins-react-native (createRoutePlugin).
  9. Update Trimble layers to Map props — see Trimble layers.

Sample app

The sample app on GitHub demonstrates all 16 documentation screens using the new packages. It replaces the legacy React Native sample that used NativeModules and a monolithic native bridge.

Last updated September 23, 2026.
Contents