Why is iOS compass not pointing the same direction as heading calculated from react-native expo-sensors Magnetometer library?

Question

I'm building a simple compass app using react-native and Expo. I'm testing it on my iPhone using Expo Go. I'm using data from the Magnetometer library to calculate heading and display it with an arrow. The arrow does not point north even though the built in iPhone compass app points north just fine. My arrow also changes directions significantly when I tilt the phone so it's not coplanar with the ground.

I get the calibrated magnetometer data using import { Magnetometer } from 'expo-sensors'; and Magnetometer.addListener(myCallBackFunc). The raw sensor data provided is an x, y, and z value. I use a simple equation to calculate a heading from the x and y values: Math.atan2(data.y, data.x) * (180 / Math.PI);

What is the built in compass app doing that I am not?

const Compass = () => {
    const [magnetometerSub, setMagnetometerSub] = useState(null);
    const [northAngle, setNorthAngle] = useState(null);

    useEffect(() => {
        subscribeToMagnetometer();
        return () => unsubscribeFromMagnetometer();
    }, []);

    const subscribeToMagnetometer = () => {
        setMagnetometerSub(
            Magnetometer.addListener((data) => {
                setNorthAngle(calculateNorthAngle(data));
            })
        );
    };

    const unsubscribeFromMagnetometer = () => {
        magnetometerSub && magnetometerSub.remove();
        setMagnetometerSub(null);
        setNorthAngle(null);
    };

    // Calculates North angle from magnetometer reading
    // Returns values in degrees in range (-180, 180]
    const calculateNorthAngle = (data) => {
        if (!(data && data.x && data.y)) {
            return null;
        }

        return Math.atan2(data.y, data.x) * (180 / Math.PI);
    };

    return (
        <View>
            {northAngle ? (
                // Arrow points to the right when angle is 0
                <Arrow angle={northAngle.toString()} />
            ) : (
                <Text>no angle data</Text>
            )}
        </View>
    );
};

device: iPhone 14 Pro Max, iOS: 16.6.1, npm: 9.8.1, node: 18.18.0, expo: 49.0.3

PS: I am testing this in an airport. Could that be a source of magnetic interference? If so, why does the built in compass app still work fine in the airport?

Answer 1

I solved my own question. For anybody else who runs into this, the right function to use for a compass in Expo is watchHeadingAsync.

import * as Location from 'expo-location';

Location.watchHeadingAsync(callback);

This produces the same heading I get from the built in iPhone compass app.

Edit: Link to docs for this function