react-native gyro

Gryo.h

//
//  Gyro.h
//  CustomComponent
//
//  Created by Patrick Williams on 4/7/15.
//

#import "RCTBridge.h"
#import <CoreMotion/CoreMotion.h>

@interface Gyro : NSObject <RCTBridgeModule> {
  CMMotionManager *_motionManager;
  double _x;
  double _y;
  double _z;
}
- (void) get:(RCTResponseSenderBlock) cb;

#pragma mark - Util_Methods

@end

Gyro.m

//
//  Gyro.m
//  CustomComponent
//
//  Created by Patrick Williams on 4/7/15.
//

#import "Gyro.h"

@implementation Gyro

- (id) init {
  self = [super init];
  self->_x = 0;
  self->_y = 0;
  self->_z = 0;
  if (self) {
    self->_motionManager = [[CMMotionManager alloc] init];
    
    
    //Gyroscope
    if([self->_motionManager isGyroAvailable])
    {
      /* Start the gyroscope if it is not active already */
      if([self->_motionManager isGyroActive] == NO)
      {
        /* Update us 2 times a second */
        [self->_motionManager setGyroUpdateInterval:1.0f / 10.0f];
        
        /* Receive the gyroscope data on this block */
        [self->_motionManager startGyroUpdatesToQueue:[NSOperationQueue mainQueue]
                                          withHandler:^(CMGyroData *gyroData, NSError *error)
         {
           self->_x = gyroData.rotationRate.x;
           self->_y = gyroData.rotationRate.y;
           self->_z = gyroData.rotationRate.z;
         }];
      }
    }
    else
    {
      NSLog(@"Gyroscope not Available!");
    }
  }
  return self;
}

- (void) get:(RCTResponseSenderBlock) cb {
  RCT_EXPORT();

  NSDictionary *position = @{
                                    @"x" : [NSNumber numberWithDouble:self->_x],
                                    @"y" : [NSNumber numberWithDouble:self->_y],
                                    @"z" : [NSNumber numberWithDouble:self->_z],                         };
  cb(@[[NSNull null], position]);
}

@end

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var {
    Gyro
} = require('NativeModules');

var CustomComponent = React.createClass({
  getInitialState: function () {
    return {
      x: 0,
      y: 0,
      z: 0
    };
  },
  componentDidMount: function () {
    this.interval = setInterval(function () {
      Gyro.get(function (err, res) {
        this.setState(res);
      }.bind(this));
    }.bind(this), 100);
  },
  componentWillUnmount: function () {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.position}>x: {this.state.x}</Text>
        <Text style={styles.position}>y: {this.state.y}</Text>
        <Text style={styles.position}>z: {this.state.z}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  position: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('CustomComponent', () => CustomComponent);