---
title: Gyroscope
description: A library that provides access to the device's gyroscope sensor.
sourceCodeUrl: https://github.com/expo/expo/tree/sdk-53/packages/expo-sensors
packageName: expo-sensors
iconUrl: /static/images/packages/expo-sensors.png
platforms: ["android", "ios*", "web"]
---
`Gyroscope` from `expo-sensors` provides access to the device's gyroscope sensor to respond to changes in rotation in three-dimensional space.
## Installation
## Usage
```jsx
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
```js
```