React Native Get Device Current Location Latitude Longitude Example

Latitude and Longitude are two imaginary lines draw on earth’s map to locate any place on Earth. Latitude is the distance of north or south of the equator (an imaginary circle around the Earth halfway between the North Pole and the South Pole) like a horizontal line between earth. Longitude is distance east or west of the prime meridian like a vertical line connecting both North pole and South pole. You can see the below image to know how exactly Latitude and Longitude are . So in this tutorial we would going to Get Device Current Location Latitude Longitude in react native android iOS application example tutorial using geolocation.watchPosition() method, There is no need to import this library. So let’s get started 🙂 .

Contents in this project Get Device Current Location Latitude Longitude in React Native Android iOS App Example Tutorial:

Configure Project for Android Devices:

To get current latitude and longitude of device we need to use the android’s Requesting runtime permission structure in our application, So read my this tutorial about Android Requesting Runtime GPS permission and follow all the steps of my tutorial to enable runtime permission functionality in your app. Without enabling runtime permission you won’t be able to retrieve current location in android.

Configure Project for iOS Devices:

1. To configure your project in iOS devices we need to put below NSLocationAlwaysAndWhenInUsageDescriptionNSLocationAlwaysUsageDescription and NSLocationWhenInUseUsageDescription permissions in YourReactNativeProject -> ios -> YourProjectName -> info.plist file.

Note: These permissions are very important in order to access the device location in iOS mobile phones.

Complete Source Code of my info.plist file :

2. Open your react native project in Xcode and Select Your Project -> Select Your Project as Target -> Capabilities -> ON the Background Modes -> Enable Location Updates. See the below screenshot for more specific details. Click on the screenshot to see it in full size.

Start Coding for app:

1. Import StyleSheet, Text, View, PermissionsAndroid, Alert and Platform component in your project.

2. Creating a async function class named as request_device_location_runtime_permission() in your project. Using this class we can ask for runtime permission to access the GPS location. 

3. Create constructor() in your main export default class and make 3 States named as latitude, longitude and error.

4. Creating a async componentDidMount() method in your main class and call the request_device_location_runtime_permission() function with await method. Inside this method we would call the navigator.geolocation.watchPosition() method to access devices’s current latitude and longitude and save them inside Sates. The watchPosition() methods invokes every time when location changes.

5. Creating componentWillUnmount() method and Inside this method we would call the navigator.geolocation.clearWatch() method. This would tell the app that after unmount the app you app doesn’t need access device location.

6. Creating 2 Text component inside render’s return block and set the states values inside the Text component.

7. Creating Style.

8. Complete source code for App.js File :

Screenshots in Android device:

Get Device Current Location Latitude LongitudeScreenshot in iOS device:


  1. html img src showing old image even changed image into new with same name

    i use godaddy hosting, php website , i saved image in one folder,during editing accunt i keep same name but change the image.this new image is not reflecting on

  2. Hello. And Bye.

  3. Sir Please help me
    How to code in date(calendar) ,it should be color based on temperature.
    like :-
    date:2018-12-21 temperature :33
    then 2018-12-21 color is blue
    and so on…..

  4. Sir Please help me
    How to code in the date(calendar),it should be color based on temperature, and without use of temperature API.
    date:’2018-12-09′ ,temperature:33
    then date color is blue.

  5. Sir please ask something.

  6. what happen sir?

  7. i used this code and it always showing the same
    latitude 37.421998333333335
    longitude -122.08400000000002

  8. Hi sir,
    I get the latitude and longitude on emulator but with real device it returns the initial value . why sir?

  9. I put these permission :

    -It was working fine on emulator and real device for awhile but suddenly no longer works om real device

  10. I’m so sorry , permissions hadn’t been posted in the comment

    • Thanks for comment samar but you are testing this code in android 5.1 but the run time permissions working from Android 6.0 Marshmallow. If you are using the below version then it will automatically grant the permissions to user.

  11. hello sir
    How to get adress or location name by latt. and long.

    • Jyoti using my tutorial your are getting the latitude and longitude ? Please explain your question more briefly ?

  12. sir i want name of the location how to get that

  13. I used the code given above and run for ios device,but im getting the latitude and longitude as zero and it didnt even ask for any notification to use location services

  14. I have the same problem.

  15. Hi,
    How I get the current location name using longitude and latitude.

  16. Hello sir. I tried working on snack with same code. It’s working perfectly fine on web. but on android and ios it shows zero zero. Isn’t there anyway that it works on snack?

Leave a Reply

Your email address will not be published.