Notice
I don't use this module anymore, and don't have time to maintain it. I've been handing out both github and npm write access to folks that seem interested, so feel free to ask.
react-native-motion-manager
CMMotionManager wrapper for react-native, exposing Accelerometer, Gyroscope, and Magnetometer.
Add it to your project
npm install react-native-motion-manager@latest --save
- In XCode, in the project navigator, right click
Libraries
âžœAdd Files to [your project's name]
- Go to
node_modules
âžœreact-native-motion-manager
and addRNMotionManager.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNMotionManager.a
to your project'sBuild Phases
âžœLink Binary With Libraries
- Click
RNMotionManager.xcodeproj
in the project navigator and go theBuild Settings
tab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Paths
and make sure it contains both$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- mark both asrecursive
. - 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.