React Native Motion Manager

CMMotionManager wrapper for react-native
Alternatives To React Native Motion Manager
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Native Motion Manager232
183 years ago7September 27, 201717Objective-C
CMMotionManager wrapper for react-native
React Native Sensor Manager200
304 years ago11September 23, 201624Java
Native sensors access for react-native
Imagination React Native37
16 years ago11June 21, 2018mitJavaScript
Imagination app made with react native. Takes your accelerometer and turns it into a color. This app works as a show room for imagination creations.
React Accelerometer10
6 years ago1JavaScript
Uses the device's Accelerometer as a React Component
Rnsensordemo3
4 years ago1JavaScript
A sample React Native app that uses the accelerometer data from React Native Sensors
Alternatives To React Native Motion Manager
Select To Compare


Alternative Project Comparisons
Readme

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

  1. npm install [email protected] --save
  2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  3. Go to node_modulesreact-native-motion-manager and add RNMotionManager.xcodeproj
  4. In XCode, in the project navigator, select your project. Add libRNMotionManager.a to your project's Build PhasesLink Binary With Libraries
  5. 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.
  6. 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.

Popular Reactjs Projects
Popular Accelerometer Projects
Popular Web User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Reactjs
Objective C
Accelerometer
Gyroscope