react-native-motion-manager

CMMotionManager wrapper for react-native, exposing Accelerometer, Gyroscope, and Magnetometer.

Supported Platforms

• iOS
• Android

Add it to your project

1. npm install react-native-motion-manager@latest --save
2. react-native link (Note that for react-native link to work you directory must be named ios all lower case). This is equivalent to the manual steps:
   1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
   2. Go to node_modules ➜ react-native-motion-manager and add RNMotionManager.xcodeproj
   3. In XCode, in the project navigator, select your project. Add libRNMotionManager.a to your project's Build Phases ➜ Link Binary With Libraries
   4. Click RNMotionManager.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
3. Run your project (Cmd+R)

Setup trouble?

If you get stuck, take a look at Brent Vatne's blog. He was gracious enough to help out on this project, and his blog is my go to reference for this stuff.

Api

Setup

var {
    Accelerometer,
    Gyroscope,
    Magnetometer
} = require('NativeModules');
var {
  DeviceEventEmitter // will emit events that you can listen to
} = React;

Accelerometer

Accelerometer.setAccelerometerUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('AccelerationData', function (data) {
  /**
  * data.acceleration.x
  * data.acceleration.y
  * data.acceleration.z
  **/
});
Accelerometer.startAccelerometerUpdates(); // you'll start getting AccelerationData events above
Accelerometer.stopAccelerometerUpdates();

Gyroscope

Gyroscope.setGyroUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('GyroData', function (data) {
  /**
  * data.rotationRate.x
  * data.rotationRate.y
  * data.rotationRate.z
  **/
});
Gyroscope.startGyroUpdates(); // you'll start getting GyroscopicData events above
Gyroscope.stopGyroUpdates();

Magnetometer

Magnetometer.setMagnetometerUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('MagnetometerData', function (data) {
  /**
  * data.magneticField.x
  * data.magneticField.y
  * data.magneticField.z
  **/
});
Magnetometer.startMagnetometerUpdates(); // you'll start getting MagnetomerData events above
Magnetometer.stopMagnetometerUpdates();

Example

This repo contains an example react-native app to help get you started. Source code here.