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.
|
1 2 3 4 5 6 7 8 |
<key>NSLocationAlwaysAndWhenInUsageDescription</key> <string>Always and in usage permissions</string> <key>NSLocationAlwaysUsageDescription</key> <string>always permissions</string> <key>NSLocationWhenInUseUsageDescription</key> <string></string> |
Complete Source Code of my info.plist file :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>CFBundleDevelopmentRegion</key> <string>en</string> <key>CFBundleDisplayName</key> <string>projnew</string> <key>CFBundleExecutable</key> <string>$(EXECUTABLE_NAME)</string> <key>CFBundleIdentifier</key> <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string> <key>CFBundleInfoDictionaryVersion</key> <string>6.0</string> <key>CFBundleName</key> <string>$(PRODUCT_NAME)</string> <key>CFBundlePackageType</key> <string>APPL</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleSignature</key> <string>????</string> <key>CFBundleVersion</key> <string>1</string> <key>LSRequiresIPhoneOS</key> <true/> <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict> <key>NSLocationAlwaysAndWhenInUsageDescription</key> <string>Always and in usage permissions</string> <key>NSLocationAlwaysUsageDescription</key> <string>always permissions</string> <key>NSLocationWhenInUseUsageDescription</key> <string></string> <key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>MaterialIcons.ttf</string> <string>Octicons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Zocial.ttf</string> </array> <key>UIBackgroundModes</key> <array> <string>location</string> </array> <key>UILaunchStoryboardName</key> <string>LaunchScreen</string> <key>UIRequiredDeviceCapabilities</key> <array> <string>armv7</string> </array> <key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array> <key>UIViewControllerBasedStatusBarAppearance</key> <false/> </dict> </plist> |
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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, PermissionsAndroid, Alert, Platform } from 'react-native'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
export async function request_device_location_runtime_permission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, { 'title': 'ReactNativeCode Location Permission', 'message': 'ReactNativeCode App needs access to your location ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { Alert.alert("Location Permission Granted."); } else { Alert.alert("Location Permission Not Granted"); } } catch (err) { console.warn(err) } } |
3. Create constructor() in your main export default class and make 3 States named as latitude, longitude and error.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor(){ super() this.state={ latitude : 0, longitude : 0, error : null } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
async componentDidMount() { if(Platform.OS === 'android') { await request_device_location_runtime_permission(); } this.getLongLat = navigator.geolocation.watchPosition( (position) => { this.setState({ latitude: position.coords.latitude, longitude: position.coords.longitude, error: null, }); }, (error) => this.setState({ error: error.message }), { enableHighAccuracy: true, timeout: 2000, maximumAge: 100, distanceFilter: 10 }, ); } |
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.
|
1 2 3 4 5 |
componentWillUnmount() { navigator.geolocation.clearWatch(this.getLongLat); } |
6. Creating 2 Text component inside render’s return block and set the states values inside the Text component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> Latitude = {this.state.latitude}</Text> <Text style={styles.text}> Longitude = {this.state.longitude}</Text> </View> ); } |
7. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
8. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, PermissionsAndroid, Alert, Platform } from 'react-native'; export async function request_device_location_runtime_permission() { try { const granted = await PermissionsAndroid.request( PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, { 'title': 'ReactNativeCode Location Permission', 'message': 'ReactNativeCode App needs access to your location ' } ) if (granted === PermissionsAndroid.RESULTS.GRANTED) { Alert.alert("Location Permission Granted."); } else { Alert.alert("Location Permission Not Granted"); } } catch (err) { console.warn(err) } } export default class Project extends Component { constructor(){ super() this.state={ latitude : 0, longitude : 0, error : null } } async componentDidMount() { if(Platform.OS === 'android') { await request_device_location_runtime_permission(); } this.getLongLat = navigator.geolocation.watchPosition( (position) => { this.setState({ latitude: position.coords.latitude, longitude: position.coords.longitude, error: null, }); }, (error) => this.setState({ error: error.message }), { enableHighAccuracy: true, timeout: 2000, maximumAge: 100, distanceFilter: 10 }, ); } componentWillUnmount() { navigator.geolocation.clearWatch(this.getLongLat); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> Latitude = {this.state.latitude}</Text> <Text style={styles.text}> Longitude = {this.state.longitude}</Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
Screenshots in Android device:
Screenshot in iOS device:
Also Read :
React Native Highlight Some Text Within Text String Yellow Color
System UI isn’t responding Android Emulator React Native Error Solution
Setup React Native Environment in Visual Studio Code Editor Windows MAC Linux
React Native Check Text Input is Empty or Not Android iOS Tutorial
React Native Call useEffect Only Once in Functional Component Example
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
Hello. And Bye.
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…..
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.
Swati you just want to show date in this format or show the date from selecting and then show in this format ?
In this format.
Swati which library you are using because there is no currently same component available in react native for calendar.
react-native-calendars
Swati i am installing the library and checking the code.
Sir please ask something.
what happen sir?
Swati i have installed the library but it is showing many errors at compiling time. Can you send me your code on [email protected] .
Sir I have sent you my code .
i used this code and it always showing the same
latitude 37.421998333333335
longitude -122.08400000000002
Deva are you testing the code in emulator because in emulator the latitude and longitude is set default.
Deva are you testing the code in emulator because in emulator the latitude and longitude is set default.
Hi sir,
I get the latitude and longitude on emulator but with real device it returns the initial value . why sir?
Samar did you put the GPS android permission in Manifest file .
I put these permission :
-It was working fine on emulator and real device for awhile but suddenly no longer works om real device
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.
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 ?
sir i want name of the location how to get that
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
Saranya did you put all the permissions in iOS ?
I have the same problem.
Hi,
How I get the current location name using longitude and latitude.
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?