Compass in React-native || how to add Compass in react native

import React, {Component} from "react";

import {Text, View, Image, Dimensions} from "react-native";
import {magnetometer, SensorTypes, setUpdateIntervalForType} from "react-native-sensors";
import LPF from "lpf";

const {height, width} = Dimensions.get("window");

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      magnetometer: "0",
    };
    LPF.init([]);
    LPF.smoothing = 0.2;
  }

  componentDidMount() {
    this._toggle();
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  _toggle = () => {
    if (this._subscription) {
      this._unsubscribe();
    } else {
      this._subscribe();
    }
  };

  _subscribe = async () => {
    await setUpdateIntervalForType(SensorTypes.magnetometer, 16);
    this._subscription = magnetometer.subscribe(
      sensorData =>  this.setState({magnetometer: this._angle(sensorData)}),
      error => console.log("The sensor is not available"),
    );
  };

  _unsubscribe = () => {
    this._subscription && this._subscription.unsubscribe();
    this._subscription = null;
  };

  _angle = magnetometer => {
    let angle = 0;
    if (magnetometer) {
      let {x, y} = magnetometer;
      if (Math.atan2(y, x) >= 0) {
        angle = Math.atan2(y, x) * (180 / Math.PI);
      } else {
        angle = (Math.atan2(y, x) + 2 * Math.PI) * (180 / Math.PI);
      }
    }
    return Math.round(LPF.next(angle));
  };

  _direction = degree => {
    return 'S'
    if (degree >= 22.5 && degree < 67.5) {
      return "NE";
    } else if (degree >= 67.5 && degree < 112.5) {
      return "E";
    } else if (degree >= 112.5 && degree < 157.5) {
      return "SE";
    } else if (degree >= 157.5 && degree < 202.5) {
      return "S";
    } else if (degree >= 202.5 && degree < 247.5) {
      return "SW";
    } else if (degree >= 247.5 && degree < 292.5) {
      return "W";
    } else if (degree >= 292.5 && degree < 337.5) {
      return "NW";
    } else {
      return "N";
    }
  };

  // Match the device top with pointer 0° degree. (By default 0° starts from the right of the device.)
  _degree = magnetometer => {
    return magnetometer - 90 >= 0
      ? magnetometer - 90
      : magnetometer + 271;
  };

  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <View style={{flexDirection:'row', alignItems: "center"}} >
          <View style={{alignItems: "center"}}>
            <Text
              style={{
                color: "#fff",
                fontSize: height / 26,
                fontWeight: "bold",
              }}
            >
              {this._direction(this._degree(this.state.magnetometer))}
            </Text>
          </View>
        </View>

        {/* <View style={{flexDirection:'row', alignItems: "center"}} size={0.1}>
          <View style={{alignItems: "center"}}>
            <View style={{width: width, alignItems: "center", bottom: 0}}>
              <Image
                source={require("../Utils/vedic_clock.png")}
                style={{
                  height: height / 26,
                  resizeMode: "contain",
                }}
              />
            </View>
          </View>
        </View> */}

        <View style={{alignItems: "center"}} size={2}>
          <Text
            style={{
              color: "#000",
              fontSize: height / 27,
              width: width,
              textAlign: "center",
            }}
          >
            {this._degree(this.state.magnetometer)}°
          </Text>

          <View style={{alignItems: "center"}}>
            <Image
              source={require("../component/img/Compass.png")}
              style={{
                height: 250,
                width: 250,
                justifyContent: "center",
                alignItems: "center",
                resizeMode: "contain",
                transform: [
                  {rotate: 360 - this.state.magnetometer+90 + "deg"},
                ],
              }}
            />
          </View>
        </View>
      </View>
    );
  }
}

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.