react-native-geofencing-blueprint v1.1.2

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