This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Expo Gyroscope iconExpo Gyroscope

A library that provides access to the device's gyroscope sensor.

Android
iOS (device only)
Web
Included in Expo Go
Recommended version:
~56.0.6

Gyroscope from expo-sensors provides access to the device's gyroscope sensor to respond to changes in rotation in three-dimensional space.

Installation

Terminal
- npx expo install expo-sensors
- yarn expo install expo-sensors
- pnpm expo install expo-sensors
- bun expo install expo-sensors

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic Gyroscope usage
import { useState, useEffect } from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { Gyroscope } from 'expo-sensors'; export default function App() { const [{ x, y, z }, 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(); }, []); return ( <View style={styles.container}> <Text style={styles.text}>Gyroscope:</Text> <Text style={styles.text}>x: {x}</Text> <Text style={styles.text}>y: {y}</Text> <Text style={styles.text}>z: {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> ); } 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', }, });

API

import { Gyroscope } from 'expo-sensors';

No API data file found, sorry!