Getting Started with React Native SDK v5

The Mappedin React Native SDK lets you render the maps of your venue, designed using Mappedin CMS, inside a React Native application. The SDK is a Typescript package and can be downloaded from NPM.

You can find the Mappedin React Native demo application on Github at https://github.com/mappedin/react-native

In this section, we'll help you set up a React Native development environment. For more information about the basic concepts of the SDK, you can review the Mappedin Web SDK Overview. Further pieces of this guide give you more details about how to set up the SDK and customize it as per your liking.

Mappedin React Native SDK uses react-native-webview package to display the map.

The examples are written in Typescript, which is a superset of Javascript that adds type annotations to variables and functions. This helps developers in writing safer code especially when interacting with libraries and SDKs. Typescript code is transpiled to Javascript in the build phase of an application. Developers can use Typescript sample code by removing the variable type annotations from the examples. Code editors such as Visual Studio Code often highlight those as syntax errors if editing a Javascript file. Mappedin uses Typescript to build our Web and React Native SDKs and recommend using Typescript in application code as well. Read more about Typescript on their website.

React Native project setup

If you are starting a new project or want to follow along with the guides in an empty project, follow these steps.

• Set up your environment and start a new React Native -project following the official instructions. npx react-native init GettingStarted --template react-native-template-typescript
• Run yarn start to start the Metro bundler
• The run (in a separate terminal) yarn run ios to make sure everything works at this point. This will run the React Native starter -project in an iOS simulator.
• To install Mappedin React Native SDK, run yarn add @mappedin/react-native-sdk react-native-webview@11 Make sure you build the project after installing dependencies with cd ios && pod install or npx pod-install and followed by launching the app on iPhone emulator yarn run ios.

Rendering the map

With just a few lines of code we can display the demo venue. In this case it is wrapped and centered inside a React Native component SafeAreaView. Replace the content of App.tsx in a fresh React Native project with the following or create a similar component in your own project.

These guides use TypeScript, however most of the code works as is or with small modifications (removal of types) in a JavaScript project as well.

Copy
import React from 'react';
import { SafeAreaView } from 'react-native';
import { MiMapView } from '@mappedin/react-native-sdk';

// See Trial API key Terms and Conditions
// https://developer.mappedin.com/guides/api-keys
const options = {
  clientId: '5eab30aa91b055001a68e996',
  clientSecret: 'RJyRXKcryCMy4erZqqCbuB1NbR66QTGNXVE0x3Pg6oCIlUR1',
  venue: 'mappedin-demo-mall',
  perspective: 'Website',
};

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <MiMapView
        style={{ flex: 1 }}
        key="mappedin"
        options={options}
      />
    </SafeAreaView>
  );
};

export default App;