react-native-geofencing-blueprint

geofencing library

Usage no npm install needed!

<script type="module">
  import reactNativeGeofencingBlueprint from 'https://cdn.skypack.dev/react-native-geofencing-blueprint';
</script>

README

blueprint-geofencing

Geofencingblueprint is tool which is use for create multiple polygon on map and also apply diffrent color and display name of the polygon for perticuler area.User can also click on polygon and we can handle purticuler polygon click event.Also we can get notification for user enter and exit from area.

Prerequisites

You have to follow all bellow step for run google map in your application and if you didn't do that then follow bellow link all the steps.

https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md

Installation

After follow all the stpes for implement google map in your application, and successfully run google map in your application run this command in you project for install geofencing.

npm i react-native-geofencing-blueprint

Usage

// ...
import React, {Component} from 'react';
import { Geofencing } from 'react-native-geofencing-blueprint';

//Ppolygon list for you areas
let polygons = [{
  id: "k1nFj8b0imq9NzALveDA", fencePoints: [
      { latitude: 33.982798, longitude: -118.4710194 },
      { latitude: 33.9941135, longitude: -118.4496422 },
      { latitude: 34.002439, longitude: -118.4669844 },
      { latitude: 33.9946827, longitude: -118.4821803 },
  ], name: "", userCount: 344, fillColor: "rgba(255, 95, 95,0.5)"
},
{
  id: "EtlI49XRiaKGUR8tbwqH", fencePoints: [
      { latitude: 33.9798087, longitude: -118.4680274 },
      { latitude: 34.0075975, longitude: -118.4175163 },
      { latitude: 34.0026524, longitude: -118.4141017 },
      { latitude: 33.9955723, longitude: -118.4231645 },
  ], name: "Marina Del Rey", userCount: 200, fillColor: "rgba(255, 95, 95,0.5)"
},
];
export default class App extends Component {

isInStatus = (isInStatus) => {
  console.log('ISINSTATUS',isInStatus); 
}
onPolygonClick = (areaDetail) => {
  console.log('Polygon Click Detail',areaDetail); 
}
render() {
    return (
      <Geofencing  data={polygons} initialLatitude={33.9957146} initialLongitude={-118.4790071} markerTitle={'Test Title'} markerdescription={'Test Description'} isInArea={this.isInStatus} polygonClick={this.onPolygonClick}/>
    );
  }
}

Props

Name Type Description Default
data Array Array of polygon which you want to display on map
initialLatitude Number Initial latitude that you want to display when load map null
initialLongitude Number Initial longitude that you want to display when load map
markerTitle String Maker title that you want to display when you click on maker
markerdescription String Maker description that you want to display when you click on maker
isInArea Bool Return user enter and exit from the area.
polygonClick Function Detail of polygon on which you click