React Native Compass using Expo

Question

I want to display compass on my react-native project, i use this compas-github i already follow all step on that link but got error like this error. I really new to this. Please help me or suggest another way to display compass on react-native. Big thanks

This is my code

import React, {Component} from "react"; import { Text,View, StyleSheet, Image, Animated, Easing, Dimensions} from "react-native"; import {Location, Permissions} from 'expo'; import { Container, Header, Content, } from "native-base";

export default class KompasPage extends Component{

      constructor(props) {
        super(props);
        this.spinValue = new Animated.Value(0);
        this.state = {
          location: null,
          //errorMessage: null,
          heading: null,
          truenoth: null,
          timer: false,
        };
      }

      timePass() {
        this.setState({ timer: true });
      }

      componentWillMount() {
        setTimeout(() => {
          this.timePass();
        }, 1000);
        this._getLocationAsync();
      }

      componentWillUpdate()
      {
        this.spinValue()
      }

      _getLocationAsync = async () => {
        //check dev loc permiss
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted') {
          this.setState({
            errorMessage : 'Permission to access location was denied',
          });
        }
        else {
          Expo.Location.watchHeadingAsync((obj) => {
            let heading = obj.magHeading;
            this.setState({heading: heading})
          })
        }
      };

      spin() {
        let start = JSON.stringify(this.spinValue);
        let heading = Math.round(this.state.heading);

        let rot = +start;
        let rotM = rot % 360;

        if (rotM < 180 && (heading > (rotM +180)))
        rot -= 360;
        if (rotM >= 180 && (heading <= (rotM -180)))
        rot += 360;

        rot += (heading - rotM)

        Animated.timing(
          this.spinValue,
          {
            toValue: rot,
            duration: 300,
            easing: Easing.easeInOut
          }
        ).start()
      }

       render() {
        const { navigate } = this.props.navigation;

        let LoadingText = 'Loading...';
        let display = LoadingText;

        if (this.state.errorMessage)
          display = this.state.errorMessage;

        const spin = this.spinValue.interpolate({
          inputRange: [0,360],
          outputRange: ['-0deg', '-360deg']
        })

        display = Math.round(JSON.stringify(this.spinValue))

        if(display < 0)
          display += 360
        if(display > 360)
          display -= 360

        return(

          <View style={styles.container}>
          <Text style={styles.text}>{display+'°'}</Text>
          <View style={styles.imageContainer} >
            <Animated.Image resizeMode='contain' source={require("../image/dasar_kompas.png")}
              style={{
              width:  deviceWidth  - 10, height: deviceHeight/2 - 10,
              left: deviceWidth /2 -  (deviceWidth   - 10)/2, top:  deviceHeight /2 - (deviceHeight/2  - 10)/2,
              transform: [{rotate: spin}],
            }} />
          </View>
          <View style={styles.arrowContainer} >
            <Image resizeMode='contain' source={require("../image/kompasbaru.png")} style={styles.arrow} />
          </View>
        </View>
  );
 }
 }

 const deviceWidth  =  Dimensions.get('window').width
 const deviceHeight =  Dimensions.get('window').height

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
   text: {
     color: '#263544',
     fontSize: 80,
     transform: ([{translateY: -(deviceHeight/2 - (deviceHeight/2  - 10)/2) - 50 }])
   },
   imageContainer: {
     ...StyleSheet.absoluteFillObject,
   },
   arrowContainer: {
     ...StyleSheet.absoluteFillObject,
   },
   arrow: {
     width: deviceWidth/7,
     height: deviceWidth/7,
     left: deviceWidth /2 - (deviceWidth/7)/2,
     top:  deviceHeight /2  - (deviceWidth/7)/2,
     opacity: 0.9
   }
 });

Did you follow the instructions given in the error message? Try to remove node modules and reinstall — iridescent

Rahul Haque Rahul Haque · Accepted Answer · 2019-02-09T20:26:24

As far as I know, the example you’re following uses some sort of locational data that requires internet for showing direction. If your device has built in compass or magnetometer, you should make use of that. That way it would be more efficient. Here are two examples, one using expo which is much easier to implement but requires, you guessed it expo. And here is another using only react native.

React Native Compass using Expo

1 Answers