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

react-native-geo-fence

v1.0.5

Published

Simple React-Native geofencing package

Downloads

28

Readme

react-native-geo-fence

npm Downloads Licence

Simple React-Native geofencing package

Installation

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

or use yarn

$ yarn add react-native-geo-fence

Mostly automatic installation

$ react-native link react-native-geo-fence

Manual installation

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.bmustapha.RNGeofence.RNGeoFencePackage;; to the imports at the top of the file
  • Add new RNGeoFencePackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-geo-fence'
    project(':react-native-geo-fence').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-geo-fence/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-geo-fence')
    react-native-geo-fence comes bundled with latest play-services as at every release. If you want to use a different version to prevent version conflict, do as below
    compile(project(':react-native-geo-fence')) {
        exclude group: 'com.google.android.gms'
    }
    compile 'com.google.android.gms:play-services-base:10.2.6' // replace 10.2.6 with your play services version number
    compile 'com.google.android.gms:play-services-location:10.2.6' // replace 10.2.6 with your play services version number

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-geo-fence and add RNReactNativeGeoFence.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNReactNativeGeoFence.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Usage

import React, { Component } from 'react';
import {
  NativeAppEventEmitter,
} from 'react-native';
import RNGeofence from 'react-native-geo-fence';
import _ from 'lodash';


export default class Home extends Component {

  componentDidMount() {
    // trigger geofencing
    this.initiateGeofencing();
    // listen to native "GeofenceEvent" event triggered by "react-native-geo-fence"
    this.listeners = [
      NativeAppEventEmitter.addListener('GeofenceEvent', this.handleNativeEvents),
    ];
  }

  componentWillUnmount() {
    // stop geofencing
    RNGeofence.stopGeofencing();
    // remove listener
    _.each(this.listeners, l => l.remove());
  }

  handleNativeEvents = (event) => {
    /*
    * event contains an object as below
    *
    * {
    *   event: 'geofenceTrigger',
    *   data: [{
    *     transition: 'Entered', // transition is either "Entered" or "Exited" explains if user entered or exited geofence
    *     key: 'qyuwhbhh783',
    *     latitude: 6.4334191,
    *     longitude: 3.4345843,
    *   }]
    * }
    *
    * data contains an array of geofences triggered.
    * It is always an array, even if only one geofence was triggered
    *
    * */

    console.log('Native Event: ', event);

    // do something else with event object and geofences
  };

  initiateGeofencing = () => {
    // create an array of geofences you want to get notified for as below
    const geofencesArray = [{
      key: 'qyuwhbhh783', // must be unique, used internally to return unique geofence
      latitude: 6.4334191,
      longitude: 3.4345843,
    }, {
      key: '6273hbbvdhbf',
      latitude: 34.8372645,
      longitude: 19.763423,
    }, {
      key: 'hjd09283745',
      latitude: 12.2519453,
      longitude: 9.8125365,
    }];

    // create location update interval
    const updateIntervalInMilliseconds = 10000;
    const fastestIntervalInMilliseconds = 3000;

    // initialize geofencing
    RNGeofence.init(
      updateIntervalInMilliseconds,
      fastestIntervalInMilliseconds,
    );

    // create radius and expiry time
    const geofenceRadiusInMetres = 500; // geofence radius
    const geofenceExpirationInMilliseconds = 86400000; // geofence expiration time

    // add geofences array to module
    RNGeofence.populateGeofenceList(
      geofencesArray,
      geofenceRadiusInMetres,
      geofenceExpirationInMilliseconds,
    );

    // start tracking geofences
    RNGeofence.beginGeofencing();
  };

  render() {
    return null;
  }
}

Managing Location permission in Android 6.0 and above

react-native-geo-fence uses ACCESS_FINE_LOCATION permission to track user's location changes. Prior to Android 6.0, all permissions specified in app manifest will be granted at install time. For Android 6.0 and above, permissions need to be requested at run time. To achieve this, react-native-geo-fence requests for said permission when RNGeofence.beginGeofencing() is triggered. Due to this, some other setups are required to be completed to enable react-native-geo-fence know when user has granted said permission.

Add this to AndroidManifest.xml

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

Add the snippet below to your project MainActivity.java

// import the following lines at the top
import static com.bmustapha.RNGeofence.RNGeoFenceModule.RNGeoFenceModuleContext;
import static com.bmustapha.RNGeofence.RNGeoFenceModule.RNGeoFenceModule_REQ_PERMISSION;

// override MainActivity onRequestPermissionsResult
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    switch (requestCode) {
        case RNGeoFenceModule_REQ_PERMISSION: {
            if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                // Permission granted
                RNGeoFenceModuleContext.resume();
            }
            break;
        }
    }
}

TODO

  • iOS implementation

Contributing

Contributions are welcome and will be fully credited.

Contributions are accepted via Pull Requests on Github.

Pull Requests

  • Document any change in behaviour - Make sure the README.md and any other relevant documentation are kept up-to-date.

  • Consider our release cycle - We try to follow SemVer v2.0.0. Randomly breaking public APIs is not an option.

  • Create feature branches - Don't ask us to pull from your master branch.

  • One pull request per feature - If you want to do more than one thing, send multiple pull requests.

  • Send coherent history - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting.

Issues

Check issues for current issues.

Author

Mustapha Babatunde

License

The MIT License (MIT). Please see LICENSE for more information.