{"size": 1472, "ext": "js", "max_stars_repo_path": "src/Compass.js", "max_stars_repo_name": "mnfjorge/sailing-dashboard", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Compass.js", "max_issues_repo_name": "mnfjorge/sailing-dashboard", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Compass.js", "max_forks_repo_name": "mnfjorge/sailing-dashboard", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.131147541, "max_line_length": 76, "alphanum_fraction": 0.542798913}
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { Magnetometer } from 'expo-sensors';
import { convertXYZToBearing, getAngle } from './utils/convertXYZToBearing';

const imageArrowCompass = require('./assets/arrow-compass.png');

export function Compass() {
    const [heading, setHeading] = React.useState(null);

    React.useEffect(() => {
        Magnetometer.setUpdateInterval(2000);
        const subscription = Magnetometer.addListener((data) => {
            setHeading(getAngle(data));
        });

        return () => {
            subscription.remove();
        };
    }, []);

    if (!heading) {
        return null;
    }

    const imgStyle = StyleSheet.compose(styles.img, {
        transform: [{ rotate: `${90 - heading}deg` }],
    });

    const text = convertXYZToBearing(heading);

    return (
        <View style={styles.container}>
            <Image
                style={imgStyle}
                source={imageArrowCompass}
                tintColor="#fff"
            />
            <Text style={styles.text}>{text}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    img: {
        width: 40,
        height: 40,
        marginRight: 10
    },
    text: {
        fontSize: 40,
        color: '#fff',
    }
});