The technical inventions like geo location and location tracking system become the biggest blessing and the splendid gift of technology to the human beings to get the exact direction to reach any location without facing any hassle. We can see a location tracking system in the utmost mobile app whether they are an Android app or an iOS app. Also, implement such system in an app not so difficult, nevertheless fewer newbies who are working on the React Native technology environment are suffering to generate the code to add a location system in their reach application for Android. Ence, this article is helpful for all those individuals who are going to implement a tracking app with react native.
First of all we need to have geolocation for this as it supports both Android and iOS. Now, request the user to access the location by adding this single code line in the android/app/scr/main/AndroidManifest.xml file of the project.
android:versionName=”1″>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
In this way, the geolocation api exits the navigator object, so we can easily access the navigatior.geolocation, which do not need to import in the form of a react native component.
Most possible methods to add a geolocation are:
- getCurrentPosition(success: Function, error?: Function, options?: GeoOptions)
It is the most common method to access the user location at anytime from anywhere. This method supports the following option.
- enableHighAccuracy(boolean) which allows us to get the accurate location.
- timeout(milliseconds) by this we can give time interval to get position.
- maximumAge(milliseconds)
You may clearly understand the concept by implemention this example code:
import React, {Component} from ‘react’;
import { View, Text } from ‘react-native’;
export default class Geolocation extends Component {
constructor(props) {
super(props);
this.state = {
latitude: null,
longitute: null,
timestamp: null
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude ,
longitute: position.coords.longitude
timestamp: position.timestamp
})
},
(error) => { console.log(error); },
{ enableHighAccuracy: true, timeout: 30000 }
)
}
render() {
return (
<View>
<Text>{this.state.latitude}</Text>
<Text>{this.state.longitude}</Text>
<Text>{this.state.timestamp}</Text>
</View>
)
}
}
The above code will give you the latitude and longitude, of a direction whenever you wil pass the values to the Google Maps API, and in theis way we can get the exact location details.
Apart from that, if we use the below mention code, then we can also get the country name of any tracked location.
- watchPosition(success: Function, error?: Function, options?: GeoOptions)
It also works similarly as the getCurrentPosition option works, but in a little different form, as it used success function when the location gets changed. While if you do not need to fetch the current location updates, then you can simply skip this method.
- (watchID: number)
It will clear the previously stored idclearWatch, when the app goes closed. This option works on when you used the watchPosition option in your app.
