Gyroscope
from expo-sensors
provides access to the device's gyroscope sensor to respond to changes in rotation in 3D space.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 { Gyroscope } from 'expo-sensors'; export default function App() { const [data, setData] = useState({ x: 0, y: 0, z: 0, }); const [subscription, setSubscription] = useState(null); const _slow = () => { Gyroscope.setUpdateInterval(1000); }; const _fast = () => { Gyroscope.setUpdateInterval(16); }; const _subscribe = () => { setSubscription( Gyroscope.addListener(gyroscopeData => { setData(gyroscopeData); }) ); }; 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}>Gyroscope:</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 { Gyroscope } from 'expo-sensors';
You should always check the sensor availability before attempting to use it.
Permissions.askAsync(Permissions.MOTION)
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.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.