GitHub
npm
Magnetometer
from expo-sensors
provides access to the device magnetometer sensor(s) to respond to and measure the changes in the magnetic field. You can access the calibrated values with Magnetometer.
and uncalibrated raw values with MagnetometerUncalibrated
.
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 { Magnetometer } from 'expo-sensors';
export default function Compass() {
const [data, setData] = useState({
x: 0,
y: 0,
z: 0,
});
const [subscription, setSubscription] = useState(null);
const _slow = () => {
Magnetometer.setUpdateInterval(1000);
};
const _fast = () => {
Magnetometer.setUpdateInterval(16);
};
const _subscribe = () => {
setSubscription(
Magnetometer.addListener(result => {
setData(result);
})
);
};
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}>Magnetometer:</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 { Magnetometer } from 'expo-sensors';
Magnetometer.isAvailableAsync()
You should always check the sensor availability before attempting to use it.
Returns whether the magnetometer is enabled on the device.
OS | Availability |
---|---|
iOS | iOS 8+ |
Android | Android 2.3+ (API Level 9+) |
Web | N/A |
boolean
denoting the availability of the sensor.Magnetometer.addListener(listener)
Subscribe for updates to the Magnetometer.
remove()
on when you
would like to unsubscribe the listener.Magnetometer.removeAllListeners()
Remove all listeners.
Magnetometer.setUpdateInterval(intervalMs)
Subscribe for updates to the Magnetometer.
intervalMs (number) Desired interval in milliseconds between Magnetometer 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.