Getting Started

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. The demo code and these guides are written in Typescript but can be adapted to a Javascript project as well. 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.

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 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.

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

export const App = () => {
	return (
		<SafeAreaView style={{ flex: 1 }}>
			<MiMapView
				style={{ flex: 1 }}
				key="mappedin"
				options={{
					clientId: '<MAPPEDIN_CLIENT_ID>',
					clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
					venue: 'mappedin-demo-mall',
					perspective: 'Website',
				}}
			/>
		</SafeAreaView>
	);
};