react-heading-2
v1.0.4
Published
Get compass heading and inclination in React Native.
Downloads
14
Maintainers
Readme
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(<Text>{heading}</Text>); // or inclination
}
}