Skip to main content
Version: 5.0

Getting Started

Using Mappedin SDK for React Native with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

The Mappedin SDK for React Native 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 JS 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 SDK for React Native 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.

Coding with AI​

Mappedin SDK for React Native provides an llms-mappedin-react-native.txt file that can be used to help with coding when using Large Language Models (LLMs).

Expand for instructions on how to use Mappedin provided llms.txt files with Cursor, Github Copilot, JetBrains AI Assistant and Windsurf.

How to use llms.txt files with LLMs:

To use the llms.txt file with Cursor:

  1. Download the llms.txt file for this guide.
  2. Create a .cursor directory in your project root if it doesn't exist already.
  3. Place the llms.txt file in the .cursor directory.
  4. Start creating a new Cursor rule using Cursor's instructions.
  5. Set the rule type to: Agent Requested.
  6. Set the agent description to: Use this rule whenever a question is asked about Mappedin, Mappedin-JS, Mappedin SDK..
  7. In the rule body, add the name of the llms.txt file such as: @llms.txt or @llms-mappedin-js.txt
  8. Optionally, if using Mappedin JS add : @index.d.ts, referring to the index.d.ts file located in the node_modules/@mappedin/mappedin-js/lib/esm/ directory to add all Mappedin types to the rule.
  9. With this configuration, Cursor will automatically use the llms.txt whenever a question is asked about Mappedin, Mappedin-JS or Mappedin SDKs. When starting a new chat be sure to mention Mappedin to trigger the rule.
  10. The llms.txt file includes:
    • Detailed explanations of concepts
    • Code examples and their context
    • Related documentation references
    • Source file locations for verification

This helps ensure that Cursor provides assistance that is consistent with Mappedin documentation and best practices, using the same structured information that's available on the Mappedin Developer Portal.

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 SDK for React Native, 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.

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/docs/demo-keys-and-maps
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;

React Native iOS - Display map