# react-native-geofencing-blueprint

> geofencing library

Latest version **1.1.2** (published 2019-04-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-geofencing-blueprint
pnpm add react-native-geofencing-blueprint
yarn add react-native-geofencing-blueprint
bun add react-native-geofencing-blueprint
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-04-16 |
| First published | 2019-04-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | PintuSoliya |
| Maintainers | pintusoliya |
| Keywords | geofencing, geofencing-npm |

## Links

- npm: https://www.npmjs.com/package/react-native-geofencing-blueprint
- Repository: https://github.com/pintusoliya/blueprint-geofencing
- Homepage: https://github.com/pintusoliya/blueprint-geofencing#readme
- Issues: https://github.com/pintusoliya/blueprint-geofencing/issues
- npm.io page: https://npm.io/package/react-native-geofencing-blueprint

## Dependencies (3)

- [geolib](https://npm.io/package/geolib.md) ^2.0.24
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-native-maps](https://npm.io/package/react-native-maps.md) ^0.24.0

## Recent versions

- 1.1.2 (latest) — 2019-04-16
- 1.1.1 — 2019-04-16
- 1.1.0 — 2019-04-16
- 1.0.0 — 2019-04-16

## 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

```javascript
// ...
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

---
_Source: https://npm.io/package/react-native-geofencing-blueprint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._