react-heading-2

This class calculates the magnetic north and inclination of your device in React Native, only using Magnetometer and Acceleration data.

Installation

``
npm i react-heading-2
`

Usage

Import the following packages.

`
import React from 'react';
import { Magnetometer, DeviceMotion } from 'expo-sensors';
let ReactHeading = require('react-heading-2');
`

Fetch the data from the Magnetometer and Devicemotion libraries using listeners.

`
let magnet = Magnetometer //data from listener
let gyroscope = DeviceMotion.accelerationIncludingGravity;

`

In order to calculate the heading and inclination, call the following functions with the magnet and gyroscope data like shown below.

`
let heading = ReactHeading._getHeading(magnet,gyroscope);
let inclination = ReactHeading._getInclination(gyroscope);

`

Example

Here is an example which shows a Text component containing the device heading each 50ms.

`
import React from 'react';
import { Magnetometer, DeviceMotion } from 'expo-sensors';
let ReactHeading = require('react-heading-2');

export default class TextWithHeading extends React.Component {

state = {
MagnetometerData: {},
GyroscopeData:{
accelerationIncludingGravity:{}
},
};

componentDidMount() {
this._subscribe();
Magnetometer.setUpdateInterval(50);
}

_subscribe = () => {
this._subscription = Magnetometer.addListener(result => {
this.setState({ MagnetometerData: result });
});

this._subscription2 = DeviceMotion.addListener(result => {
this.setState({ GyroscopeData: result });
});
};

render() {
let gyroscope = this.state.GyroscopeData.accelerationIncludingGravity;
let magnet = this.state.MagnetometerData;
let heading = ReactHeading._getHeading(magnet,gyroscope);
let inclination = ReactHeading._getInclination(gyroscope);
return({heading}); // or inclination
}

}

``