2

I followed the first steps of the React Native tutorial here:

https://facebook.github.io/react-native/docs/getting-started.html

Then I want to read information from the device sensors.

For that I also followed this tutorial:

https://medium.com/react-native-training/using-sensors-in-react-native-b194d0ad9167

and ended up with this code (just copy/pasted from there):

// Reference:
// https://medium.com/react-native-training/using-sensors-in-react-native-b194d0ad9167
// https://react-native-sensors.github.io

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,
  },
});

Here is the full repository you can download and try right away:

$ git clone https://github.com/napolev/react-native-app
$ cd react-native-app
$ npm i
$ expo start

My problem is that after I do: $ expo start I get the following error:

Native modules for sensors not available. Did react-native link run successfully?

as you can see on the following image:

enter image description here

Any idea about how can I make this work?

Thanks!

davidesp
  • 3,743
  • 10
  • 39
  • 77

2 Answers2

2

It's probably due to the fact that you are using Expo and that react-native-sensors requires the full version of React Native.

To use react-native-sensors you will probably have to eject your app and then install the dependency. If you eject your app it will require you to have Xcode (for iOS) and Android Studio (for Android) installed on your development machine.

For more details on the differences between Expo and React-Native check out this SO answer: What is the difference between Expo and React Native?

However, Expo does have access to some sensor info, you can read more about using the accelerometer here https://docs.expo.io/versions/latest/sdk/accelerometer

Expo also has access to the gyroscope, the magnetometer and a pedometer, though no barometer that I can see in the docs

Andrew
  • 26,706
  • 9
  • 85
  • 101
  • 2
    This is correct, but note that Expo already has built-in sensor APIs eg https://docs.expo.io/versions/latest/sdk/accelerometer . So you have a choice between running a vanilla / ejected RN project with `react-native-sensors`, or sticking with Expo and using their APIs instead of `react-native-sensors`. – Rob Hogan Dec 23 '18 at 17:39
  • Spooky I was just adding that to my post. – Andrew Dec 23 '18 at 17:43
1

I had a similar issue, what solved it for me was to use npx

npx react-native link react-native-sensors;

https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner

Then i cleared the app data and removed the app from my phone, and then rebuilt!

James Nicholson
  • 987
  • 10
  • 20