HOW TO GET LATITUDE & LONGITUDE IN REACT NATIVE

Share the post

Hello All, In the last topic, We discussed How to make HTTP calls in react native. In this tutorial, We will discuss How to get latitude & longitude in react native. Most of the time, every mobile developer looking to get the latitude & longitude of the device. They want the user’s latitude & longitude to track the user’s current location. In react native, It’s very easy to find the user’s current location. How ? let’s see the below example.

Example to get latitude & longitude in react native

  • In this example, We will call the navigator.geolocation.getCurrentPosition() function under componentDidMount() method. As we all knew componentDidMount() will call when the component is mounted. It’s the place where will get the result ( latitude & longitude ). If you want to learn more about componentDidMount() then click here.
  • Now, we will create a new page to get the latitude & longitude.
  • After creating a new page, Initialize the state value of latitude & longitude with ‘0.00’. Please see the below code for reference.
  state = {
        latitude: '0.00',
        longitude: '0.00',
    }
  • In componentDidMount() we will call navigator.geolocation.getCurrentPosition() to get latitude & longitude as shown below. In the success of the below, the method will get the coords of the object. This coords object contains different keys like latitude, longitude, etc. We take both values & assign them to constant declared for them. We will get latitude at constant currentLatitude & longitude at constant currentLongitude. Now, both constant values will assign to state value by using setState.
componentDidMount = () => {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const currentLatitude = position.coords.latitude;
                this.setState({ latitude: currentLatitude });

                const currentLongitude = position.coords.longitude;
                this.setState({ longitude: currentLongitude });
            },
            (error) => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );

    }
  • The latitude & longitude will get from above method success function. Now, We have to show them just to verify that we are getting correct data. So, Copy below code to show the result.
 render() {
        
        return (
            <View style={styles.container}>
                <Text> Latitude :{this.state.latitude}</Text>
                <Text> Longitude :{this.state.longitude}</Text>
            </View>
        )
    }
  • The full source code to get geolocation example is shown below
import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TextInput, FlatList, ActivityIndicator, TouchableOpacity } from 'react-native';


export default class HomePage extends Component {
    state = {
        latitude: '0.00',
        longitude: '0.00',
    }


    componentDidMount = () => {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const currentLatitude = position.coords.latitude;
                this.setState({ latitude: currentLatitude });

                const currentLongitude = position.coords.longitude;
                this.setState({ longitude: currentLongitude });
            },
            (error) => alert(error.message),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        );

    }

    

    render() {
        
        return (
            <View style={styles.container}>
                <Text> Latitude :{this.state.latitude}</Text>
                <Text> Longitude :{this.state.longitude}</Text>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        marginTop: 100
    }
})


This is how we will get the geolocation ( latitude & longitude ) in react native. Stay tuned for more advance tutorial of react native.

1 thought on “HOW TO GET LATITUDE & LONGITUDE IN REACT NATIVE”

Leave a Comment