CODEWITHSUNDEEP
javascriptiosreact-native
coldbuffet
coldbuffet

Reputation: 2575

React Native - Geolocation

I am trying to access the Geolocation in my iOS React Native app. I am looking at the example in the documentation but it is totally unhelpful. In the example I do not understand how the Geolocation API is used.

My first instinct was to do something like:

var React = require('react-native');
var {
    Geolocation
} = React;

Then in my code, do something like:

Geolocation.getCurrentPosition((position) => {
     console.log(position);
},
(error) => {
    console.log(error);
});

However, this seems to fail. In the example it uses the Geolocation as follows:

navigator.geolocation.getCurrentPosition(
  (position) => {
    var initialPosition = JSON.stringify(position);
    this.setState({initialPosition});
  },
  (error) => alert(error.message),
  {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
);

however, it is not exactly clear where navigator comes from and why it has a geolocation property attached to it. What am I not getting?

Thanks in advance.

Update:

Turns out the solution is simply:

var Geolocation = require('Geolocation');

I was getting confused as PushNotificationIOS (whos documentation is in the same area as Geolocation) is utilised in React Native via:

var React = require('react-native');
var {
    PushNotificationIOS
} = React;

Upvotes: 2

Views: 2540

Answers (2)

anuj singh
anuj singh

Reputation: 1

**It gives you current position attributes and also update the position **

Define all the variables in the constructor inside this.state then use it .

 - Don't forget to give location permission in manifest file

- <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

componentDidMount(){
        //Alert.alert('Updated');
        this.watchId = navigator.geolocation.watchPosition(
            (position) => {
              // lastpos = JSON.stringify(position);
              this.getDeviceStatus();
              this.setState({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                speed: position.coords.speed,
                accuracy: position.coords.accuracy,
                heading: position.coords.heading,
                timestamp: position.timestamp,
                altitude: position.coords.altitude
              });
            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 5 },
          );
    }
    getDeviceStatus()
    {
        //Alert.alert('Device');
    }
    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchId);
      }

render(){
    return(

            <Text> {this.state.latitude} </Text>
            <Text> {this.state.longitude} </Text>
            <Text> {this.state.speed} </Text>
            <Text> {this.state.accuracy} </Text>
            <Text> {this.state.heading} </Text>
            <Text> {this.state.timestamp} </Text>                                 
            <Text> {this.state.altitude} </Text>

    )
}

export default LivePos;

Upvotes: 0

G. Hamaide
G. Hamaide

Reputation: 7106

Why don't you use the example as it is ? I don't know where navigator comes from but I use it this way and it works fine.

Have you also added the NSLocationWhenInUseUsageDescription key in your Info.plist ?

Upvotes: 2

Related Questions