Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Magnetometer


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.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-failed-icon

Installation

Terminal
expo install expo-sensors

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

Magnetometer
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',
  },
});

API

import { Magnetometer } from 'expo-sensors';

Methods

Magnetometer.isAvailableAsync()

Info-icon

You should always check the sensor availability before attempting to use it.

Returns whether the magnetometer is enabled on the device.

OSAvailability
iOSiOS 8+
AndroidAndroid 2.3+ (API Level 9+)
WebN/A

Returns

  • A promise that resolves to a boolean denoting the availability of the sensor.

Magnetometer.addListener(listener)

Subscribe for updates to the Magnetometer.

Arguments

  • listener (function) -- A callback that is invoked when an Magnetometer update is available. When invoked, the listener is provided a single argument that is an object containing keys x, y, z.

Returns

  • A subscription that you can call remove() on when you would like to unsubscribe the listener.

Magnetometer.removeAllListeners()

Remove all listeners.

Magnetometer.setUpdateInterval(intervalMs)

Subscribe for updates to the Magnetometer.

Arguments

  • intervalMs (number) Desired interval in milliseconds between Magnetometer updates.
  • Message-iconAsk a question on the forums about Magnetometer
  • Github-iconView open bug reports for Magnetometer
  • Code-iconView source code for Magnetometer
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?