Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pwmckenna/react-native-motion-manager
CMMotionManager wrapper for react-native
https://github.com/pwmckenna/react-native-motion-manager
Last synced: about 1 month ago
JSON representation
CMMotionManager wrapper for react-native
- Host: GitHub
- URL: https://github.com/pwmckenna/react-native-motion-manager
- Owner: pwmckenna
- Created: 2015-04-11T16:39:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-02-24T03:49:15.000Z (almost 5 years ago)
- Last Synced: 2024-08-16T17:54:25.303Z (4 months ago)
- Language: Objective-C
- Homepage: https://www.npmjs.com/package/react-native-motion-manager
- Size: 122 KB
- Stars: 246
- Watchers: 10
- Forks: 69
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-motion-manager ★223 - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer (Components / System)
- awesome-react-native-native-modules - react-native-motion-manager ★203 - native. (<a name="Motion-Sensor:-Native-Modules">Motion Sensor: Native Modules</a>)
- Awesome-React-Native-Education - react-native-motion-manager - native, exposing Accelerometer, Gyroscope, and Magnetometer. | (Index / Native APIs)
- awesome-react-native - react-native-motion-manager ★223 - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer (Components / System)
- awesome-react-native - react-native-motion-manager ★223 - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer (Components / System)
- awesome-react-native-ui - react-native-motion-manager ★151 - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer (Components / System)
- awesome-react-native - react-native-motion-manager ★223 - A react-native interface for using the Gyroscope, Accelerometer and Magnetometer (Components / System)
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 react-native-motion-manager@latest --save`
2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
3. Go to `node_modules` ➜ `react-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 Phases` ➜ `Link 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`.
5. Run your project (`Cmd+R`)### Setup trouble?
If you get stuck, take a look at [Brent Vatne's blog](http://brentvatne.ca/packaging-react-native-component/). He was gracious enough to help out on this project, and his blog is my go to reference for this stuff.
# Api
### Setup
```js
var {
Accelerometer,
Gyroscope,
Magnetometer
} = require('NativeModules');
var {
DeviceEventEmitter // will emit events that you can listen to
} = React;
```### Accelerometer
```js
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
```js
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
```js
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.](https://github.com/pwmckenna/react-native-motion-manager/tree/master/Example/MotionExample)
![](http://pwmckenna.com/react-native-motion-manager/motion.png)
![](http://pwmckenna.com/react-native-motion-manager/accelerometer.png)
![](http://pwmckenna.com/react-native-motion-manager/gyroscope.png)
![](http://pwmckenna.com/react-native-motion-manager/magnetometer.png)