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:

13 Comments

  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.
    like:-
    date:’2018-12-09′ ,temperature:33
    then date color is blue.

  5. Sir please ask something.

  6. what happen sir?

Leave a Reply

Your email address will not be published. Required fields are marked *