Expo

Documentation

Hi friend! Meet us at App.js Conf in Krakow, Poland on April 4th and 5th with workshops and talks. Learn more

Accelerometer

Access the device accelerometer sensor(s) to respond to changes in acceleration in 3d space.

This API is pre-installed in managed apps. To use it in a bare React Native app, follow its installation instructions.

// in managed apps:
import { Accelerometer } from 'expo';

// in bare apps:
import { Accelerometer } from 'expo-sensors';

Returns whether the accelerometer is enabled on the device.

  • A promise that resolves to a boolean denoting the availability of the sensor.

Subscribe for updates to the accelerometer.

  • listener (function) -- A callback that is invoked when an accelerometer update is available. When invoked, the listener is provided a single argument that is an object containing keys x, y, z.

  • A subscription that you can call remove() on when you would like to unsubscribe the listener.

Remove all listeners.

Subscribe for updates to the accelerometer.

  • intervalMs (number) Desired interval in milliseconds between accelerometer updates.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Accelerometer } from 'expo';

export default class AccelerometerSensor extends React.Component {
  state = {
    accelerometerData: {},
  };

  componentDidMount() {
    this._toggle();
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  _toggle = () => {
    if (this._subscription) {
      this._unsubscribe();
    } else {
      this._subscribe();
    }
  };

  _slow = () => {
    Accelerometer.setUpdateInterval(1000); 
  };

  _fast = () => {
    Accelerometer.setUpdateInterval(
      16
    ); 
  };

  _subscribe = () => {
    this._subscription = Accelerometer.addListener(
      accelerometerData => {
        this.setState({ accelerometerData });
      }
    ); 
  };

  _unsubscribe = () => {
    this._subscription && this._subscription.remove(); 
    this._subscription = null;
  };

  render() {
    let {
      x,
      y,
      z,
    } = this.state.accelerometerData; 

    return (
      <View style={styles.sensor}>
        <Text>Accelerometer:</Text>
        <Text>
          x: {round(x)} y: {round(y)} z: {round(z)}
        </Text>

        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={this._toggle} style={styles.button}>
            <Text>Toggle</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
            <Text>Slow</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._fast} style={styles.button}>
            <Text>Fast</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

function round(n) {
  if (!n) {
    return 0;
  }

  return Math.floor(n * 100) / 100;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 15,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#eee',
    padding: 10,
  },
  middleButton: {
    borderLeftWidth: 1,
    borderRightWidth: 1,
    borderColor: '#ccc',
  },
  sensor: {
    marginTop: 15,
    paddingHorizontal: 10,
  },
});