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-managerand addRNMotionManager.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNMotionManager.ato your project'sBuild Phases➜Link Binary With Libraries - Click
RNMotionManager.xcodeprojin the project navigator and go theBuild Settingstab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Pathsand make sure it contains both$(SRCROOT)/../react-native/Reactand$(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 AccelerationData events above
Gyroscope.stopGyroUpdates();Magnetomer
Magnetometer.setAccelerometerUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('MagnetometerData', function (data) {
/**
* data.magneticField.x
* data.magneticField.y
* data.magneticField.z
**/
});
Magnetometer.startMagnetometerUpdates(); // you'll start getting AccelerationData events above
Magnetometer.stopMagnetometerUpdates();Example
This repo contains an example react-native app to help get you started. Source code here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent