React Native Wayfinding migration guide

We have introduced a new WYF module that utilizes the Situm Map Viewer. This enhancement brings numerous advantages, such as providing a consistent user experience across multiple platforms and also improved usability.

Please note that certain changes are required. We have transitioned to a different library and adjusted some requirements. For instance, we have replaced Google Maps with Mapbox, eliminating the need for a Google Maps API key. It is important to mention that certain functionalities previously available may not be present in this new version. Rest assured, we are actively working on further development and enhancements for the module.

Migrate from Situm React Native Wayfinding to the new Situm React Native plugin #

Migrating your app from Situm React Native Wayfinding to Situm React Native requires modifications in both the native and React Native parts of your app. However, the process is straightforward, and you will notice that your code becomes cleaner than before:

React Native – Android #

» Remove your Google Maps Api Key. Google Maps has been replaced by Mapbox. You no longer need to provide a Google Maps Api Key: remove it from “android/src/main/AndroidManifest.xml” file:

    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="GOOGLE_MAPS_APIKEY" />

React Native – iOS #

» Update pods. Run pod install or pod update if necessary.

React Native – React Native #

» Replace the library. Both package and libraries has been renamed. Update your package.json:

yarn remove @situm/react-native-wayfinding

yarn add @situm/react-native

» Update your imports:

import {
  MapView
} from '@situm/react-native-wayfinding';
import SitumPlugin;

import {
  MapView,
  SitumProvider
} from '@situm/react-native';

» Wrap your screen with the new SitumProvider:

This component handles our SDK status and provides it to use inside your application

import {SITUM_EMAIL, SITUM_API_KEY} from './credentials.tsx';

<SitumProvider email={SITUM_EMAIL} apiKey={SITUM_API_KEY}>
 <YourScreen />
</SitumProvider>

» Remove the user and apikey props from the <MapView /> component.

The SitumProvider component will handle it now.