react-native-sensors

Supported React Native Versions

Cool Projects using react-native-sensors

• react-native-live-translator
• imagination-react-native
• react-native-game-engine-handbook
• react-native-iridescent
• FlyThru

Do you want your project listed here? Just send a PR.

Getting started

$ npm install react-native-sensors --save

Automatic installation

$ react-native link react-native-sensors

Option: With CocoaPods (iOS only)

Add the following to your Podfile and run $ pod install:

pod 'RNSensors', :path => '../node_modules/react-native-sensors'

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-sensors and add RNSensors.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNSensors.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.sensors.RNSensorsPackage; to the imports at the top of the file
• Add new RNSensorsPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-sensors'
   project(':react-native-sensors').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-sensors/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-sensors')

Usage

Sensor API

import { Accelerometer, Gyroscope } from "react-native-sensors";

let accelerationObservable = null;
new Accelerometer({
  updateInterval: 400 // defaults to 100ms
})
  .then(observable => {
    accelerationObservable = observable;

    // Normal RxJS functions
    accelerationObservable
      .map(({ x, y, z }) => x + y + z)
      .filter(speed => speed > 20)
      .subscribe(speed => console.log(`You moved your phone with ${speed}`));
  })
  .catch(error => {
    console.log("The sensor is not available");
  });

setTimeout(() => {
  accelerationObservable.stop();
}, 1000);

Decorator usage

import React, { Component } from "react";
import { Text, View } from "react-native";
import { decorator as sensors } from "react-native-sensors";

class MyComponent {
  // no lifecycle needed
  render() {
    const { sensorsFound, Accelerometer, Gyroscope } = this.props;

    if (!Accelerometer || !Gyroscope) {
      // One of the sensors is still initializing
      return null;
    }

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {(sensorsFound["Accelerometer"] &&
            `Acceleration has value: ${Accelerometer}`) ||
            "Acceleration is not available"}
          {(sensorsFound["Gyroscope"] && `Gyro has value: ${Gyroscope}`) ||
            "Gyro is not available"}
        </Text>
      </View>
    );
  }
}

export default sensors({
  Accelerometer: {
    updateInterval: 300 // optional
  },
  Gyroscope: true
})(MyComponent);

Changelog

Please see the changelog here

Credits

This project is inspired by the react-native-sensor-manager and by the react-native-motion-manager. Both have similar solutions with a non-uniform interface and this project aims to unify both.

Contributing

• We use semantic-release for the deployment of new versions, so please stick to this format

Contributors

Thanks goes to these wonderful people (emoji key):

Daniel Schmidt 💻	Noitidart 📖	Christophe Lemonnier 💻	Gennady 📖	Jiaming Lu 💻	Alex Wasner 💻	Nam Đàm 💻
Mike Knapp 💻	Kevin Gonnord 💻	ImAtome 💻	Lisa Huynh 💻	Cory Smith 💻	Esa-Matti Suuronen 💻	Viet Nguyen 💻
Simon Bengtsson 💻	maxkomarychev 💻	Alexander Baygeldin 💻	Noane Dan 💻

This project follows the all-contributors specification. Contributions of any kind welcome!