Mappls Search Widget¶

Version History ¶

Version	Last Updated	Author	Release Note
v2.0.1	29 Sep, 2025	Mappls API Team (MA) (ST)	- Bug Fixes and Improvements - Implemented security enhancements in Android - Remove `hyperLocal` & `zoom` from Place Widget
v2.0.0	29 Sep, 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-search-widgets-react-native:

npm install mappls-search-widgets-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_SEARCH_WIDGETS.post_install(installer) to the post_install block in the ios/Podfile is necessary:

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

Usage¶

Import¶

import  MapplsUIWidgets  from  'mappls-search-widgets-react-native'
import  MapplsGL  from  'mappls-map-react-native-beta';

PlacePicker ¶

  <MapplsUIWidgets.PlacePicker
      center={plcePickerCenter}
      zoom={10}
      searchWidgetProps={{backgroundColor:'#F0FFF0'}}
      pickerImage={{uri:'http://maps.google.com/mapfiles/ms/micons/blue.png'}}
      resultCallback={(res) => 
      //Do something with result
         }
   />

Request Props¶

center :(number) place picker center coordinate(optional) note- if center is not provided map will zoom to current location of user.
zoom:(number) place picker map zoom level (optional)
pickerImage :place picker marker image. You can use static images or image urls.(optional)
searchWidgetProps :(object) custom configuration for search widget props inside place picker.(optional)
resultCallback:(function) returns result of place picker

try{
 const res = await MapplsUIWidgets.searchWidget({toolbarColor:'#F5F5F5'});
 //Do something with result
 }catch(e){
   //error logs
     console.log(e);
  }

location(Array): set location around which your search will appear. Ex. [77.56,28.34]
filter(String): this parameter helps you restrict the result either by mentioning a bounded area or to certain eloc (6 digit code to any poi, locality, city, etc.), below mentioned are the both types:
- filter = bounds: lat1, lng1; lat2, lng2 (latitude, longitude) {e.g. filter("bounds: 28.598882, 77.212407; 28.467375, 77.353513")
- filter = cop: {mapplsPin} (string) {e.g. filter("cop:YMCZ0J")
historyCount(number): Maximum number of history results appear. (Android )
saveHistory(Boolean): If it sets to true it shows the history selected data. (Android )
pod(String): 1. it takes in the place type code which helps in restricting the results to certain chosen type.Below mentioned are the codes for the pod
- MapplsUIWidgets.POD_SUB_LOCALITY
- MapplsUIWidgets.POD_LOCALITY
- MapplsUIWidgets.POD_CITY
- MapplsUIWidgets.POD_VILLAGE
- MapplsUIWidgets.POD_SUB_DISTRICT
- MapplsUIWidgets.POD_DISTRICT
- MapplsUIWidgets.POD_STATE
- MapplsUIWidgets.POD_SUB_SUB_LOCALITY
- tokenizeAddress(Boolean): provides the different address attributes in a structured object.
- backgroundColor(HexColor): to set the background color of the widget
- toolbarColor(HexColor): to set the toolbar color of the widget.
- hint(String): To set the hint on the Search view of the widget.