Mappls Geofence Widget

Getting started

A ready to use UI Widget to create/edit GeoFence in a React Native application.

Version History

Version	Last Updated	Author	Release Note
v2.0.0	06 Oct, 2025	Mappls API Team (MA) (ST)	- Authentication and authorization mechanisms have been revised. - Updated minimum Android version to 21. - Added Support for 16 KB Page Sizes - Added SPM(Swift Package Manager Support) for IOS.

Installation

First install mappls-geofence-widget-react-native:

npm install mappls-geofence-widget-react-native

Install peerDependencies

npm install mappls-map-react-native

Android Setup

Click Here for Android Setup

IOS Setup

Click Here for IOS Setup
On iOS it's necessary to add $MAPPLS_GEOFENCE_WIDGETS.post_install(installer) to the post_install block in the ios/Podfile is necessary:
```
post_install do |installer|
# Other post install hooks...
+ $MAPPLS_GEOFENCE_WIDGETS.post_install(installer)
end
```

Usage

Import

import  MapplsGeoFence  from  'mappls-geofence-widget-react-native';

Open MapplsGeoFence Widget

MapplsGeoFence.openGeoFenceWidget({minRadius: 2000,  maxRadius: 10000})
.then(e  =>  {console.log(e)})
.catch(err  =>  console.log("error catch search:",  err.message))

Request Props

circleFillColor(string): To change Circle Fill colors
circleFillOutlineColor(string): To change circle Outline color
circleOutlineWidth(number): To change the circle outline width
draggingLineColor(string): To change the dragging line of Polygon edges and circle radius changing line.
maxRadius(number): To set maximum radius of circle
minRadius(number): To set minimum radius of circle.
polygonDrawingBackgroundColor(string): To change the color of Polygon drawing board color.
polygonDrawingLineColor(string): To set the polygon sketch drawing line.
polygonFillColor(String): To change fill color of polygon
polygonFillOutlineColor(string): To change outline color of polygon
polygonOutlineWidth(number): To set the polygon outline width
radiusInterval(number): To set the step size of radius changing
seekbarCornerRadius(number): To change seekbar corner radius
polygonCreationMode(number): To change the creation mode of polygon. Below mentioned are the values:
- MapplsGeoFence.POLYGON_CREATION_MODE_DRAW:User can draw on screen to create polygon
- MapplsGeoFence.POLYGON_CREATION_MODE_TAP : User can tap on the screen to create polygon
toolbarTitle(string): To change the title of toolbar .
toolbarColor(string): To change the color of toolbar
**toolbarTintColor(string): ** To change done button tint color.
initialiseGeoFence(GeoFence): Set initial properties for Geofence. Takes GeoFence Object as parameter.
simplifyOnIntersection(boolean): To auto correct self intersecting polygon
maxEdgesInPolygon(number): To restrict number of points in a polygon
convertPointsToClockWise(string): To get Polygon points in clockwise/anti-clockwise directions. Below mentioned are the values:
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_NONE
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_ANTICLOCKWISE
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_CLOCKWISE
doneButtonColor(string): To change done button color.
doneButtonTintColor(string): To change done button tint color.

Geofence

isPolygon (boolean): To set if polygon or circle.
circleRadius(number): To set the radius of circle.
circleCenter(Array): To set the center of circle.
polygon(Array<Array<Array>>) : To set the polygon points.
polygonType(String) : To set the type of polygon. Below mentioned are the values:
- MapplsGeoFence.POLYGON_TYPE_NORMAL
- MapplsGeoFence.POLYGON_TYPE_QUADRILATERAL