GitHub
npm
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 |
---|---|---|---|---|
-
npx 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({
x: 0,
y: 0,
z: 0,
});
const [subscription, setSubscription] = useState(null);
const _slow = () => {
Accelerometer.setUpdateInterval(1000);
};
const _fast = () => {
Accelerometer.setUpdateInterval(16);
};
const _subscribe = () => {
setSubscription(
Accelerometer.addListener(accelerometerData => {
setData(accelerometerData);
})
);
};
const _unsubscribe = () => {
subscription && subscription.remove();
setSubscription(null);
};
useEffect(() => {
_subscribe();
return () => _unsubscribe();
}, []);
const { x, y, z } = data;
return (
<View style={styles.container}>
<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={subscription ? _unsubscribe : _subscribe} style={styles.button}>
<Text>{subscription ? 'On' : 'Off'}</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>
);
}
%%placeholder-start%%function round() { ... } %%placeholder-end%%function round(n) {
if (!n) {
return 0;
}
return Math.floor(n * 100) / 100;
}
%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
text: {
textAlign: 'center',
},
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',
},
});
import { Accelerometer } from 'expo-sensors';
Accelerometer.isAvailableAsync()
You should always check the sensor availability before attempting to use it.
Returns whether the accelerometer is enabled on the device.
On mobile web, you must first invoke Accelerometer.requestPermissionsAsync()
in a user interaction (i.e. touch event) before you can use this module. If the status
is not equal to granted
then you should inform the end user that they may have to open settings.
On web this starts a timer and waits to see if an event is fired. This should predict if the iOS device has the device orientation API disabled in 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.Accelerometer.addListener(listener)
Subscribe for updates to the accelerometer.
remove()
on when you
would like to unsubscribe the listener.Accelerometer.removeAllListeners()
Remove all listeners.
Accelerometer.setUpdateInterval(intervalMs)
Subscribe for updates to the accelerometer.
intervalMs (number) Desired interval in milliseconds between accelerometer updates.
Starting in Android 12 (API level 31), the system has a 200ms limit for each sensor updates. If you need a update interval less than 200ms, you should add
<uses-permission android:name="android.permission.HIGH_SAMPLING_RATE_SENSORS"/>
to AndroidManifest.xml.