How to use Sensors in React Native

Using Sensors in React Native

One of the most exciting strengths of React Native is that it allows you to bridge native calls to Javascript. In contrast to other frameworks that pre-define what can be executed on the native side React Native is easily extensible.

With great power comes great responsibility

The React Native community is hard to compare with others, you have a lot of web developers who love that they are given the possibility to code a native app, without going through learning iOS or Android (count me in here). You also have native developers who love React Native for its fast development cycles but are relatively new to Javascript.

This has lead to a couple of problems with React Native packages containing native code. Often they are iOS or Android only, leaving the user in the need to pick multiple libraries to do the same job. Another problem is the API of native modules. Some are great, but others are simply using the primitives React Native provides, e.g. the NativeEventEmitter, without exposing a nice to use developer interface.

When I wanted to write a little demo using the Gyroscope sensor of my device I stumbled on both of the problems. As there were already libraries out there doing the job on one of the native sides I decided to combine them. Sprinkle a little RxJS on it and boom: react-native-sensors was born.

What does it provide?

react-native-sensors provides a RxJS based interface for Accelerometer, Gyroscope, and Magnetometer. It’s API is consistent with the different sensor types and platforms. Is it easy to use? You will see:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Accelerometer } from "react-native-sensors";

const Value = ({name, value}) => (
  <View style={styles.valueContainer}>
    <Text style={styles.valueName}>{name}:</Text>
    <Text style={styles.valueValue}>{new String(value).substr(0, 8)}</Text>
  </View>
)

export default class App extends Component {
  constructor(props) {
    super(props);

    new Accelerometer({
      updateInterval: 400 // defaults to 100ms
    })
      .then(observable => {
        observable.subscribe(({x,y,z}) => this.setState({x,y,z}));
      })
      .catch(error => {
        console.log("The sensor is not available");
      });
      
    this.state = {x: 0, y: 0, z: 0};
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headline}>
          Accelerometer values
        </Text>
        <Value name="x" value={this.state.x} />
        <Value name="y" value={this.state.y} />
        <Value name="z" value={this.state.z} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  headline: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  valueContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  valueValue: {
    width: 200,
    fontSize: 20
  },
  valueName: {
    width: 50,
    fontSize: 20,
    fontWeight: 'bold'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Let’s go through the important parts:

• Line 20: Create a new accelerometer. This returns a promise, which fulfills if the sensor is available. We subscribe to the observable and set the state.
• Line 33: In the render method we just access the state to show us the raw sensor data, which looks like this:

What are the possibilities?

The project I wanted to do when I first developed this library was fairly simple: I wanted to use the gyroscope to let the user interact with an image that is too wide to display on the screen entirely. So instead of using gestures to go left or right, I wanted to pan my phone and just see the other parts of the image.

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { Gyroscope } from "react-native-sensors";
const Dimensions = require("Dimensions");
const PixelRatio = require("PixelRatio");
const window = Dimensions.get("window");

const deviceWidth = window.width;
const deviceHeight = window.height;

const imageWidth = 8 * deviceWidth;
const imageHeight = deviceHeight;

const middleOfTheScreenX = (imageWidth - deviceWidth) / 2;

export default class App extends Component {
  constructor(props) {
    super(props);

    new Gyroscope({
      updateInterval: 50
    })
      .then(observable => {
        observable.subscribe(({ y }) => {
          this.setState(state => ({
            y: y + state.y
          }));
        });
      })
      .catch(error => {
        console.log("The sensor is not available");
      });

    this.state = {
      image: `https://placeimg.com/${PixelRatio.getPixelSizeForLayoutSize(
        imageWidth
      )}/${PixelRatio.getPixelSizeForLayoutSize(imageHeight)}/any`,
      y: 0
    };
  }

  render() {
    const positionOnScreenX = -imageWidth / 2;
    // The y axis of the sensor data resembles what we need for the x axis
    // in the image
    const movementX = -this.state.y / 10 * imageWidth;

    return (
      <View style={styles.container}>
        <Image
          translateX={positionOnScreenX + movementX}
          style={styles.image}
          source={{ uri: this.state.image }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  image: {
    position: "absolute",
    top: 0,
    left: 0,
    height: imageHeight,
    width: imageWidth
  }
});

As you can see the example is quite similar. To calculate how much I would like to move the image I just add up the sensor values for the y coordinate, so that if you leave your phone tilted to the left you get further left in the image.

In the render function, I use translateX to position the image in the middle of the screen and then add the calculated offset to see where our sensor data should move us to. By dividing the sensor value by 10 I can make the movement more smoothly, you can play with this value to see how it affects the behavior.

The only difference in the construction of the sensor I made is that I added a higher update interval to make the feeling more fluid.

You can go and checkout react-native-sensors on GitHub, it’s all Open Source and ready to use. The examples I have shown can be found in the examples folder. If you need real-world examples, we maintain a list of Open Source projects using this library, so go ahead and see how they do it.

So go ahead and check out our new website: react-native-sensors.github.io

How can I help?

You like the project and you would like to make it even better? There are plenty of ways you can help:

• Build something cool with it? Do a PR to add your project to our list
• Wrote a small fun demo to show what can be done? Do a PR and add it to the examples
• Found a typo in the docs or the website? Do a PR, the website will be automatically deployed after the merge
• Want a new sensor we have currently no support for? Make sure it is available on both platforms and open an issue. I will guide you through the process of how to do a PR and help you land it.
• Want any other feature? I will give my best to help you land a PR for whatever seems nice to have.