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 NSLocationAlwaysAndWhenInUsageDescription, NSLocationAlwaysUsageDescription 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:

Screenshot in iOS device: