Mappls Maps SDK for React Native

Easy To Integrate Maps & Location APIs & SDKs For Android Applications

Powered with India's most comprehensive and robust mapping functionalities.

1. You can get your api key to be used in this document here: Mappls Dashboard

2. The sample code is provided to help you understand the basic functionality of Mappls maps & REST APIs working on Android native development platform.

3. Explore through 200+ countries & territories with Global Search, Routing and Mapping APIs & SDKs by Mappls.

Version History

| Version | Last Updated | Author |
| ---- | ---- | ---- |
| 2.0.2 | 29 Sep 2025 |Mappls API Team|
| 2.0.1 | 17 Sep 2025 |Mappls API Team|
| 2.0.0 | 29 Aug 2025 |Mappls API Team|

API Usage

Your Mappls Maps SDK usage needs a set of license keys (get them here) and is governed by the API terms and conditions. As part of the terms and conditions, you cannot remove or hide the Mappls logo and copyright information in your project.

The allowed SDK hits are described on the user dashboard page. Note that your usage is shared between platforms, so the API hits you make from a web application, Android app or an iOS app all add up to your allowed daily limit.

Prerequisite

1. Sign Up and Log In
- Go to the Mappls Dashboard and sign up or log in.
2. Create Separate Apps for Android & iOS
- Create two separate apps in the Mappls Dashboard:
- One for React Native Android
- One for React Native iOS
3. Install Dependencies
- Install all required dependencies for Mappls SDK integration into your React Native project.
4. Android Configuration
- Download configuration files for your Android app (associated with the Package Name and Signing Certificate SHA-256).
- Add the following configuration files to the app-level root directory of your Android project:
``.a.olf .a.conf`5. iOS Configuration - To initialize and authenticate Mappls SDK on iOS, include the following configuration files in your project bundle:`.i.olf .i.conf`- In yourios/Podfile, add the following line inside the post_installblock:`Swift $MAPPLS_MAPS.post_install(installer)`

`$3`


!Mappls Console - How to create apps
$3

!Mappls Console - How to create apps

Installation

npm


 npm install mappls-map-react-native --save


Installation for Android

$3

- Add the Mappls repository to your settings.gradle or settings.gradle.ktsfile: #### Kotlin (settings.gradle.kts)`kotlin dependencyResolutionManagement { repositories { google() mavenCentral() maven(url = "https://maven.mappls.com/repository/mappls/") } }`#### Groovy (settings.gradle)`groovy dependencyResolutionManagement { repositories { google() mavenCentral() maven { url 'https://maven.mappls.com/repository/mappls/' } } }`

`$3`


- Download Configuration files for your app (associated with Package Name and Signing Certificate SHA-256)
- Add Configuration files (

.a.olf and .a.conf

) into the module app-level root directory of your app
Installation for IOS

- To initialize and authenticate any Mappls SDK, you must include IOS Configuration files(

.i.olf and .i.conf

) in your project bundle
- On iOS it's necessary to add $MAPPLS_MAPS.post_install(installer) to the post_install block in the ios/Podfile is necessary:

pods
	post_install do |installer|
	# Other post install hooks...
	+ $MAPPLS_MAPS.post_install(installer)
	end

How to Add a MapView

~~~javascript
import React, { Component } from "react";
import {View } from "react-native";
import MapplsGL from 'mappls-map-react-native';

export default class App extends Component {
render() {
return (

ref={c => (this.camera = c)}
zoomLevel={12}
minZoomLevel={4}
maxZoomLevel={22}
centerCoordinate={[77.231409,28.6162]}
/>

);
}
}
~~~