Native modules to determine if a location is within defined geographical boundaries using Google Geometry library

Last update: May 15, 2022

react-native-geo-fencing

Native modules to determine if a location is within defined geographical boundaries using Google Geometry library for ios and android.

Usage

import GeoFencing from 'react-native-geo-fencing';
// with navigator geolocation
componentDidMount() {
  const polygon = [
    { lat: 3.1336599385978805, lng: 101.31866455078125 },
    { lat: 3.3091633559540123, lng: 101.66198730468757 },
    { lat: 3.091150714460597,  lng: 101.92977905273438 },
    { lat: 2.7222113428196213, lng: 101.74850463867188 },
    { lat: 2.7153526167685347, lng: 101.47933959960938 },
    { lat: 3.1336599385978805, lng: 101.31866455078125 } // last point has to be same as first point
  ];

  navigator.geolocation.getCurrentPosition(
    (position) => {
      let point = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      GeoFencing.containsLocation(point, polygon)
        .then(() => console.log('point is within polygon'))
        .catch(() => console.log('point is NOT within polygon'))
    },
    (error) => alert(error.message),
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  );
}
// with only point and polygon
componentDidMount() {
  const polygon = [
    { lat: 3.1336599385978805, lng: 101.31866455078125 },
    { lat: 3.3091633559540123, lng: 101.66198730468757 },
    { lat: 3.091150714460597,  lng: 101.92977905273438 },
    { lat: 3.1336599385978805, lng: 101.31866455078125 } // last point has to be same as first point
  ];

  let point = {
    lat: 2.951269758090068,
    lng: 101.964111328125
  };

  GeoFencing.containsLocation(point, polygon)
    .then(() => console.log('point is within polygon'))
    .catch(() => console.log('point is NOT within polygon'))
}

Installation

$ npm install --save react-native-geo-fencing

ios

Within ios/ directory of your react-native app:

  1. Create a Podfile manually or simply

    $ pod init

# Podfile for cocoapods 1.0
platform :ios, '7.0'

target 'yourAppTarget' do
  pod 'React', path: '../node_modules/react-native'
  pod 'react-native-geo-fencing', path: '../node_modules/react-native-geo-fencing'
end
# for older version of CocoaPods
platform :ios, '7.0'

pod 'React', path: '../node_modules/react-native'
pod 'react-native-geo-fencing', path: '../node_modules/react-native-geo-fencing'
  1. Then

     $ pod install
    
  2. Add $(inherited) for Other Linker Flags to your project's build settings linking_library

  3. Link the static library linking_binaries

android

  1. Add the following to android/settings.gradle
include ':react-native-geo-fencing'
project(':react-native-geo-fencing').projectDir = new File(settingsDir, '../node_modules/react-native-geo-fencing/android')
  1. Add the following to android/app/build.gradle
dependencies {
  // ...
  compile project(':react-native-geo-fencing')
}
  1. Edit android/src/.../MainActivity.java
// ...
import com.surialabs.rn.geofencing.GeoFencingPackage;// <--

public class MainActivity extends ReactActivity {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new GeoFencingPackage() // <--
        );
    }
}
  1. Enable access to location when using the app from your AndroidManifest.xml

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

GitHub

https://github.com/surialabs/react-native-geo-fencing
Comments
  • 1. related to the latest update of Google Play Services 12.0.0

    android/settings.grandle include ':react-native-camera' project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android') include ':react-native-fused-location' project(':react-native-fused-location').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fused-location/android') include ':react-native-geo-fencing' project(':react-native-geo-fencing').projectDir = new File(settingsDir, '../node_modules/react-native-geo-fencing/android') include ':app'

    android/app/build.grandle dependencies { compile project(':react-native-camera') compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules compile project(':react-native-fused-location') compile project(':react-native-geo-fencing') compile (project(':react-native-camera')) { exclude group: "com.google.android.gms" compile 'com.android.support:exifinterface:27.+' } compile ("com.google.android.gms:play-services-gcm:11.8.0") { force = true; } }

    Totally broken....

    ` const polygon = [ { lat: 3.1336599385978805, lng: 101.31866455078125 }, { lat: 3.3091633559540123, lng: 101.66198730468757 }, { lat: 3.091150714460597, lng: 101.92977905273438 }, { lat: 3.1336599385978805, lng: 101.31866455078125 } // last point has to be same as first point ];

    let point = { lat: 2.951269758090068, lng: 101.964111328125 };

    GeoFencing.containsLocation(point, polygon) .then(() => console.log('point is within polygon')) .catch(() => console.log('point is NOT within polygon'))`

    example compiled Ok, but with next crash

    `Could not invoke SLRNGeoFencing.containsLocation

    null

    com.google.android.gms.maps.model.LatLng invoke JavaMethodWrapper.java:385 invoke JavaModuleWrapper.java:162 run NativeRunnable.java handleCallback Handler.java:739 dispatchMessage Handler.java:95 dispatchMessage MessageQueueThreadHandler.java:31 loop Looper.java:148 run MessageQueueThreadImpl.java:194 run Thread.java:818 `

    Reviewed by Kotdnz at 2018-03-23 12:05
  • 2. Congratulations for the Project - Doubt with Circles

    Hello, I am testing with React Native 0.49 and everything is working perfectly, I just needed to make some adjustments on the installation, but after deleting some folders everything worked fine.

    My question is about Circles. I intend to create circles and send alerts to the user when he enters the circle. Maybe this is a beginner's doubt, but I really do not know how to do this. Is it possible to create circles instead of polygons with this library?

    Reviewed by gusilveiramp at 2017-10-24 14:46
  • 3. Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'

    Getting multiple warning. Any plan to upgrade this project before end of the year?

    WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'. It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

    WARNING: The specified Android SDK Build Tools version (23.0.1) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.4. Android SDK Build Tools 27.0.3 will be used. To suppress this warning, remove "buildToolsVersion '23.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

    Reviewed by Shhzdmrz at 2018-10-09 08:51
  • 4. How to Create geo points with in the 5km from Current location.

    HI, I am getting the current Lat, Long using react-native-maps npms in React Native Project. Now I want to find the coordinates that are 5 km apart from the user current lat and long so as to form a circle. and find if any other user existing in that area.

    Reviewed by mehdihussain9 at 2020-04-25 10:52
  • 5. Add any Geofence points

    Can this package work if the geofencing points do not make a polygon ? I would like the package to check if the user is within the geofencing points of any shape that i create.

    Reviewed by DuranMoodley at 2020-04-06 08:12
  • 6. Could not find a declaration file for module 'react-native-geo-fencing

    Could not find a declaration file for module 'react-native-geo-fencing'. 'MY_LOCA/node_modules/react-native-geo-fencing/index.js' implicitly has an 'any' type. Try npm install @types/react-native-geo-fencing if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-geo-fencing';ts

    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-geo-fencing": "^0.1.0",
    
    Reviewed by nadishan at 2019-12-26 15:32
  • 7. Using library with expo app

    i have been using 'react-native-geo-fencing' library with expo app which is resulting for TypeError: Cannot read property 'containsLocation' of undefined on android device. Still not tested with iOS device. Any solution how to use 'react-native-geo-fencing' package with an expo app ?

    Reviewed by saadiya-kazi at 2019-03-25 07:42
React Native Module to use Android Geolocation via Google Play API
React Native Module to use Android Geolocation via Google Play API

react-native-android-geolocation React Native Module to use Android Geolocation via Google Play API Installation npm install --save react-native-andro

Aug 9, 2021
A LeafletView component using WebView and Leaflet map for React Native applications
A LeafletView component using WebView and Leaflet map for React Native applications

A LeafletView component using WebView and Leaflet map for React Native applications

Jun 19, 2022
Background and foreground geolocation plugin for React Native. Tracks user when app is running in background.

@mauron85/react-native-background-geolocation We're moving Npm package is now @mauron85/react-native-background-geolocation! Submitting issues All new

Jun 16, 2022
geocoding services for react native

react-native-geocoder geocoding services for react native Version table Geocoder Version RN >=0.5.0 >= 0.47.0 >=0.4.6 >= 0.40.0 <0.4.5 <0.40.0 Install

Jun 1, 2022
React Native module bridge to convert address to geo coordinates.

react-native-reverse-geo React Native module bridge to convert address to geo coordinates. Makes use of the following native iOS classes: CLGeocoder C

May 18, 2018
Native implementation of geofencing/region monitoring

react-native-boundary A simple, native, and efficient geofencing/region monitoring react native library for both iOS and android. Usage import Boundar

Jun 6, 2022
The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map
The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map

The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map. It also uses the user's IP address to fetch and display the user's location on the map.

May 26, 2022
☯️ React hook to determine if you are on the server, browser, or react native
☯️ React hook to determine if you are on the server, browser, or react native

useSSR ☯️ React hook to determine if you are on the server, browser, or react native Need to know when you're on the server, in the browser or in reac

Apr 15, 2022
DX tool to test react-native components with defined props/state fixtures.

react-native-cosmos DX tool to test react-native components with defined props/state fixtures. This project brings the "cosmos for React" idea from @s

Dec 20, 2021
Component-wrapper to determine and report children elements height
Component-wrapper to determine and report children elements height

react-height Component-wrapper to determine and report children elements height Goals react-height keeps things simple, therefore it does not support

Jun 15, 2022
Determine the cursor aim for triggering mouse events.
Determine the cursor aim for triggering mouse events.

React Aim Determine the cursor aim for triggering mouse events. Demo Try the demo here. Installation npm install react-aim --save Usage import React,

May 22, 2022
Maps out days defined by 12 hours of sunlight, as described by XKCD 2542.
Maps out days defined by 12 hours of sunlight, as described by XKCD 2542.

Daylight maps (XKCD 2542) © Randall Monroe, 2021 Daylight calendar, where every 12 hours of sun gives you a freshly minted day! These are maps showing

Nov 29, 2021
hack to allow react-native projects to use node core modules, and npm modules that use them

hack to allow react-native projects to use node core modules, and npm modules that use them

Jun 13, 2022
React-tiny-autoscroll - Automatically scrolls the element when the cursor approaches the boundaries.

react-tiny-autoscroll Automatically scrolls the element when the cursor approaches the boundaries. Demo Mostly helpful when used in combination with d

Jun 20, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

Jun 22, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

Jun 19, 2022
Finest location for react-native on Android using the new Fused API.
Finest location for react-native on Android using the new Fused API.

react-native-fused-location Get the finest location on Android using Fused API. I created this react native module with an inspiration that none of re

Jun 7, 2022
Variant on the freeCodeCamp MFE demo eCommerce application using react-location for the routing

Full Site Federation Example with React-Location An example eCommerce app Module Federation in a Full Site Federation configuration, using react-locat

Nov 16, 2021
React Native plug-in that provides GPS location information
React Native plug-in that provides GPS location information

react-native-location Native GPS location support for React Native. You might decide to use this library over the built-in geolocation because it incl

Jun 20, 2022
React Native module for Radar, the leading geofencing and location tracking platform
React Native module for Radar, the leading geofencing and location tracking platform

React Native module for Radar, the leading geofencing and location tracking platform

Jun 21, 2022