Giter Club home page Giter Club logo

react-native-sensors's Introduction

react-native-sensors Build Status 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.

react-native-sensors's People

Contributors

danielmschmidt avatar noitidart avatar alexwasner avatar corymsmith avatar esamattis avatar rinfex-holfer avatar imatome avatar jiaminglu avatar lisaah avatar lleios avatar mikeknapp avatar namqdam avatar stylejs-bot avatar vnugent avatar

Watchers

Vivek B Gupta avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.