npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rn-bridge/react-native-geofencing

v1.0.1

Published

Native modules to determine if a location is within defined geographical boundaries

Downloads

213

Readme

npm React Native Android iOS

@rn-bridge/react-native-geofencing

Native module to determine if a location is within defined geographical boundaries. Geofencing combines awareness of the user's current location with awareness of the user's proximity to locations that may be of interest. To mark a location of interest, you specify its latitude and longitude. To adjust the proximity for the location, you add a radius. The latitude, longitude, and radius define a geofence, creating a circular area, or fence, around the location of interest.

Fully compatible with TypeScript.

Supported platforms

| Platform | Support | |---|---| | iOS | ✅ | | Android | ✅ | | Web | ❌ | | Windows | ❌ | | macOS | ❌ |

Installation

npm install @rn-bridge/react-native-geofencing

or

yarn add @rn-bridge/react-native-geofencing

Configuration and Permissions

iOS

To enable geofence in your app, you need to add the NSLocationWhenInUseUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription keys to your Info.plist file. If your app supports iOS 10 or earlier, you must also include the NSLocationAlwaysUsageDescription key. Without these keys, geofence requests will fail.

To enable geofence while the app runs in the background, add the NSLocationAlwaysUsageDescription key to Info.plist.

It’s important to ensure you’ve enabled the necessary background modes. Here’s how to do so:

  • Go to your Xcode project settings.
  • Select your target.
  • Go to the Signing & Capabilities tab.
  • Enable Background Modes capability.
  • Check Location updates

Your Info.plist should look like this, Explain why the background location is required!!

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app need your location to provide best feature based on location</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app need your location to provide best feature based on location</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app need your location to provide best feature based on location in background</string>
<key>UIBackgroundModes</key>
<array>
  <string>location</string>
</array>

Android

The first step in requesting geofence monitoring is to request the necessary permissions. To use geofencing, your app must request the following:

  • ACCESS_FINE_LOCATION
  • ACCESS_BACKGROUND_LOCATION if your app targets Android 10 (API level 29) or higher

Your AndroidManifest.xml should look liks this

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

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

</manifest>

Summary

Methods

Listeners


Usage

requestLocation

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.requestLocation({ allowWhileUsing: true });

Response:

{
  "success": true,
  "location": "WhenInUse"
}

To request background location:

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.requestLocation({ allowAlways: true });

Response:

{
  "success": true,
  "location": "Always"
}

Supported options:

  • allowWhileUsing (Boolean) - App can use all location services and receive events while the app is in use.
  • allowAlways (Boolean) - App can use all location services and receive events even if the user is not aware that your app is running. If your app isn’t running, the system launches your app and delivers the event.

[!WARNING] Android needs background location for geofencing to work. You must request location Allow all the time from the user. While iOS works with both while using and always

getLocationAuthorizationStatus

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.getLocationAuthorizationStatus();

Response: WhileInUse Always Denied

getCurrentLocation

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.getCurrentLocation();

Reponse:

{
  "altitude": 0,
  "city": "Coimbatore",
  "country": "India",
  "isoCountryCode": "IN",
  "latitude": 10.9314,
  "longitude": 76.9781,
  "name": "Eachanari", 
  "postalCode": "641021",
  "state": "TN",
  "timeZone": "Asia/Kolkata"
}

addGeofence

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.addGeofence({
        id: 'a9957259-8036-4dcb-974c-34eae9b44bdb',
        latitude: 16.153062,
        longitude: 100.281585,
        radius: 500
    })

Response:

{
  "success": true,
  "id": "a9957259-8036-4dcb-974c-34eae9b44bdb"
}

Supported options:

  • id (String) - Set the ID of the geofence. This is a string to identify this geofence.
  • latitude (Double) - The latitude and longitude are used to define the precise geographical location of the geofence’s center. This ensures accurate detection when a device enters or exits the geofenced area.
  • longitude (Double) - The latitude and longitude are used to define the precise geographical location of the geofence’s center. This ensures accurate detection when a device enters or exits the geofenced area.
  • radius (Integer) - The radius defines the boundary of the geofence around the central point (latitude and longitude). It allows for flexibility in creating different-sized geofences

removeGeofence

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.removeGeofence(id)

Response:

{
  "success": true,
  "id": "a9957259-8036-4dcb-974c-34eae9b44bdb"
}

Supported options:

  • id (String) - The ID uniquely identifies a geofence, enabling precise and efficient removal by referencing the specific geofence without ambiguity.

getRegisteredGeofences

import Geofencing from '@rn-bridge/react-native-geofencing';

const response = await Geofencing.getRegisteredGeofences()

Response:

["id1", "id2", "..."]

Constants

import { Events } from '@rn-bridge/react-native-geofencing';

| Constant | Value | |---|---| | Events.onEnter | "onEnter" | | Events.onExit | "onExit" |

import { Authorization } from '@rn-bridge/react-native-geofencing';

| Constant | Value | |---|---| | Authorization.Always | "Always" | | Authorization.WhenInUse | "WhenInUse" | | Authorization.Restricted | "Restricted" | | Authorization.Denied | "Denied" | | Authorization.NotDetermined | "NotDetermined" | | Authorization.Unknown | "Unknown" |

[!IMPORTANT]

Listening for location transitions

onEnter

import Geofencing, { Events } from '@rn-bridge/react-native-geofencing';

Geofencing.onEnter((ids: string[]) => {
  console.log(Events.Enter, ids);
});

Response:

["id1", "id2", "..."]

onExit

import Geofencing, { Events } from '@rn-bridge/react-native-geofencing';

Geofencing.onExit((ids: string[]) => {
  console.log(Events.Exit, ids);
});

Response:

["id1", "id2", "..."]

removeOnEnterListener

import Geofencing from '@rn-bridge/react-native-geofencing';

Geofencing.removeOnEnterListener()

removeOnExitListener

import Geofencing from '@rn-bridge/react-native-geofencing';

Geofencing.removeOnExitListener()

isOnEnterListenerAdded

import Geofencing from '@rn-bridge/react-native-geofencing';

Geofencing.isOnEnterListenerAdded() // true or false

isOnExitListenerAdded

import Geofencing from '@rn-bridge/react-native-geofencing';

Geofencing.isOnExitListenerAdded() // true or false

How To Run Example App ?

To run example app, follow the below steps

  1. Clone the repository
  2. Do yarn install
  3. Next navigate to example folder i.e cd example
  4. Do yarn install
  5. Next navigate to ios folder i.e cd ios and do pod install, then cd ..
  6. For android run yarn android
  7. For ios run yarn ios

Demo Video

Android iOS