Skip to content

oxygen-xx/react-native-sensors

 
 

Repository files navigation

react-native-sensors codebeat badge BCH compliance

Supported React Native Versions

React Native Version react-native-sensors Version
<= 39 < 1.0
>= 40 >= 1.0

Cool Projects using react-native-sensors

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-sensors and add RNSensors.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNSensors.a to your project's Build PhasesLink 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
  1. 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') 
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
     compile project(':react-native-sensors') 

Windows

  1. In Visual Studio, right click on the solution ➜ addexisting project...
  2. Go to node_modulesreact-native-sensors and add RNSensors.csproj
  3. In Visual Studio, in the solution explorer, expand your project, right click ReferencesAdd Reference... and add RNSensors
  4. In the MainPage.cs
  • Add using RNSensors;
  • Add new RNSensorsPackage() on the List of Packages, right below new MainReactPackage()
  1. Done !

Usage

Sensor API

import { Accelerometer, Gyroscope } from 'react-native-sensors'; const accelerationObservable = new Accelerometer({ updateInterval: 100, // defaults to 100ms }); // 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}`)); 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 { 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}> Acceleration has value: {Accelerometer} Gyro has value: {Gyroscope} </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.

About

A developer friendly approach for sensors in react-native (Accelerometer & Gyroscope)

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • Objective-C 35.5%
  • Java 32.7%
  • C# 19.5%
  • JavaScript 10.5%
  • Ruby 1.8%