Accelerometer
from expo-sensors
provides access to the device accelerometer sensor(s) and associated listeners to respond to changes in acceleration in 3d space, meaning any movement or vibration.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install expo-sensors
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { Accelerometer } from 'expo-sensors'; export default function App() { const [data, setData] = useState({}); useEffect(() => { _toggle(); }, []); useEffect(() => { return () => { _unsubscribe(); }; }, []); const _toggle = () => { if (this._subscription) { _unsubscribe(); } else { _subscribe(); } }; const _slow = () => { Accelerometer.setUpdateInterval(1000); }; const _fast = () => { Accelerometer.setUpdateInterval(16); }; const _subscribe = () => { this._subscription = Accelerometer.addListener(accelerometerData => { setData(accelerometerData); }); }; const _unsubscribe = () => { this._subscription && this._subscription.remove(); this._subscription = null; }; let { x, y, z } = data; return ( <View style={styles.sensor}> <Text style={styles.text}>Accelerometer: (in Gs where 1 G = 9.81 m s^-2)</Text> <Text style={styles.text}> x: {round(x)} y: {round(y)} z: {round(z)} </Text> <View style={styles.buttonContainer}> <TouchableOpacity onPress={_toggle} style={styles.button}> <Text>Toggle</Text> </TouchableOpacity> <TouchableOpacity onPress={_slow} style={[styles.button, styles.middleButton]}> <Text>Slow</Text> </TouchableOpacity> <TouchableOpacity onPress={_fast} style={styles.button}> <Text>Fast</Text> </TouchableOpacity> </View> </View> ); } function round(n) { if (!n) { return 0; } return Math.floor(n * 100) / 100; }
import { Accelerometer } from 'expo-sensors';
You should always check the sensor availability before attempting to use it.
Settings > Safari > Motion & Orientation Access
. Some devices will also not fire if the site isn't hosted with HTTPS as DeviceMotion
is now considered a secure API. There is no formal API for detecting the status of DeviceMotion
so this API can sometimes be unreliable on web.boolean
denoting the availability of the sensor.remove()
on when you
would like to unsubscribe the listener.