import { Magnetometer } from 'expo-sensors';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function Compass() {
const [data, setData] = React.useState({
x: 0,
y: 0,
z: 0,
});
const [subscription, setSubscription] = React.useState(null);
React.useEffect(() => {
_toggle();
return () => {
_unsubscribe();
};
}, []);
const _toggle = () => {
if (subscription) {
_unsubscribe();
} else {
_subscribe();
}
};
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);
};
const { x, y, z } = data;
return (
<View style={styles.sensor}>
<Text>Magnetometer:</Text>
<Text>
x: {round(x)} y: {round(y)} z: {round(z)}
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={_toggle} style={styles.button}>
<Text>Toggle</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>
);
}
function round(n) {
if (!n) {
return 0;
}
return Math.floor(n * 100) / 100;
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
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',
},
sensor: {
marginTop: 15,
paddingHorizontal: 10,
},
});