Introducing our Improved Sample App for React Native SDK v5

To accompany the launch of Mappedin's SDK v5, we've introduced a brand new React Native sample app. This app mirrors our Web SDK Playground by providing concise code samples to demonstrate the SDK's features. Click here to view the app repository on GitHub.

The examples are listed on the starting page of the application and tapping on an example will show you the rendered component. This allows the code to remain short and focused on a single feature, which helps when looking for a specific, small example of a feature implementation with the Mappedin React Native SDK.

For example the markers component found in src/examples/Markers.tsx renders the Mappedin Demo Mall and creates a new marker when a polygon is clicked.

Copy
const Markers = () => {
  const mapView = useRef<MapViewStore>(null);

  return (
    <SafeAreaView style={styles.fullView}>
      <MiMapView
        style={styles.mapView}
        key="mappedin"
        ref={mapView}
        options={venueOptions}
        onFirstMapLoaded={() => {
          mapView.current?.FlatLabels.labelAllLocations();
        }}
        onClick={({polygons}) => {
          if (polygons.length > 0) {
            const location = polygons[0].locations[0];
            const entrance = polygons[0].entrances[0];

            if (!location || !entrance) return;

            mapView.current?.createMarker(
              entrance,
              `<div style="background-color:white; padding: 0.4rem; border-radius: 0.4rem;">
                ${location.name}
              </div>`,
              {
                anchor: MARKER_ANCHOR.CENTER,
                rank: COLLISION_RANKING_TIERS.ALWAYS_VISIBLE,
              },
            );
          }
        }}
      />
    </SafeAreaView>
  );
};

Watch the video below to see the SDK camera controls demo running on both Android and iOS. This is one of many demos we've built into the Playground Samples app and we'll continue to expand the list into the future.

If you're new to our React Native SDK, you can read our Getting Started with React Native guide to setup your own project and begin experimenting. From there, you'll find guides explaining many of the features highlighted in the sample repository.

For truly native apps built with Android Studio or XCode, we provide GitHub sample repos for Android and iOS in addition to our library of SDK guides on the Developer Portal.