React-Native's navigator.geolocation is undefined

Question

console.log(navigator.geolocation) //undefined

console.log(navigator):

WorkerNavigator {hardwareConcurrency: 8, appCodeName: "Mozilla", appName: "Netscape", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKi…L, like Gecko) Chrome/73.0.3683.103 Safari/537.36", …}
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
connection: NetworkInformation {onchange: null, effectiveType: "4g", rtt: 100, downlink: 4.3, saveData: false}
deviceMemory: 8
hardwareConcurrency: 8
language: "en-US"
languages: (3) ["en-US", "en", "es"]
locks: LockManager {}
onLine: true
permissions: Permissions {}
platform: "MacIntel"
product: (...)
storage: StorageManager {}
usb: USB {onconnect: null, ondisconnect: null}
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36"
get product: ƒ getValue()
set product: ƒ setValue(newValue)
__proto__: WorkerNavigator

I am using React Native 0.59 on iOS.

In info.plist, I have both: Privacy - Location When In Use Usage Description and Privacy - Location Always and When In Use Usage Description

CocoaPods: http://dpaste.com/2W9Y57E Info.plist: http://dpaste.com/1CTG8GP

Answer 1

The WorkerNavigator interface represents a subset of the Navigator interface allowed to be accessed from a Worker. Such an object is initialized for each worker and is available via the WorkerGlobalScope.navigator property obtained by calling window.self.navigator.

The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread.

running navigator on any web page will return a Navigator instance

>> navigator
Navigator { permissions: Permissions, mimeTypes: MimeTypeArray, plugins: PluginArray, doNotTrack: "unspecified", maxTouchPoints: 0, mediaCapabilities: MediaCapabilities, oscpu: "Intel Mac OS X 10.13", vendor: "", vendorSub: "", productSub: "20100101" }

running navigator inside the react-native app will return a WorkerNavigator instance. The WorkerNavigator is a background task.

>> navigator
WorkerNavigator { geolocation: Object, hardwareConcurrency: 4, appCodeName: "Mozilla", appName: "Netscape"… }

The WorkerNavigator interface is not fully compatible/tested with all browsers, but I tested the functionality on the Iphone X emulator and navigator.geolocation is defined.

Several posts on stackoverflow complain about Chrome or Safari returning WorkerNavigator geolocation undefined and as explained in the following answer

Does navigator.geolocation belong to navigator in Chrome?

navigator.geolocation belongs to navigator in the main thread only, but doesn't belong to navigator in the worker thread.

two navigators have independent implementations on the C++ side. That is why navigator.geolocation is not supported in the worker thread.

Chromium includes separates interfaces for the Navigator and the WorkerNavigator C++ implementation.

Navigator is an attribute of DOMWindow, while WorkerNavigator is an attribute of WorkerGlobalScope.

Users on StackOverflow complain that chrome webworker does not have the geolocation attribute

The navigator attribute of the WorkerGlobalScope interface must return an instance of the WorkerNavigator interface, which represents the identity and state of the user agent (the client):

[Exposed=Worker]
interface WorkerNavigator {};
WorkerNavigator includes NavigatorID;
WorkerNavigator includes NavigatorLanguage;
WorkerNavigator includes NavigatorOnLine;
WorkerNavigator includes NavigatorConcurrentHardware;

The geolocation method is not included in the WorkerNavigation and WorkerLocation interfaces

The Navigator is initialized for each worker and is available via the WorkerGlobalScope.navigator property obtained by calling window.self.navigator.

as described in the WorkerNavigator api docs, it does not include the geolocation() method.

If you persist having this issue you may consider following this guide, manually creating your worker and testing the methods on different browsers.

navigator.permissions? to detect geolocation support

The WorkerNavigator.permissions read-only property returns a Permissions object that can be used to query and update permission status of APIs covered by the Permissions API.

self.permissions.query({name:'notifications'}).then(function(result) {
  if (result.state === 'granted') {
    showNotification();
  } else if (result.state === 'prompt') {
    requestNotificationPermission()
  }
});

More information here

Steps to Troubleshoot the Issue

1. You are running console.log with the react-native-debugger tools and maybe the output is the one given from your mac browser and not your phone. Disable debugging on your emulator and show us the output of console.warn(navigator) and console.warn(navigator.geolocation)

   appVersion: "5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103
   Safari/537.36"
   

As in the image below, console.warn(navigator) will return a WorkerNavigator Object in the react-native-debugger-tools, while it returns {product:"ReactNative", "geolocation": {}} in the emulator. React-native will not display the console.log inside the emulator.

2. Do you experiment this issue only on Iphone or also on Android?

3. are you wrongly importing the geolocation object on top of your component?

   import { navigator } from ...
   

4. Do you know that the native geolocation library offers much more accurate api and a wider devices support?

5. Your issue seems to be connected to some browser not fully supporting the WorkerNavigator interface. Do you disagree on this last point and can you provide us some proof that we are wrong. React-Native is using the browser api to run geolocation in the background. You can recreate the same scenario in your iphone emulator safari developer console following this instructions to create the WorkerNavigator instance and then retrieving your location. You could demonstrate the WorkerNavigator works on your Emulator Safari/Chrome browsers.
6. Have you consider opening an issue at the w3c/geolocation-api repository? Have you considered opening a bug report in chromium?

Answer 2

None of the things the other guy said were able, clearly, to solve my problem. At least for me that I'm using RN 0.60, I discovered that they extracted it (like many other packages) in an external package. I thought about it of course, considering the decisions about the so called "lean core", but in rn docs nothing was written on the location extraction.

So here this is the package and here you find the new guide to configure it: https://github.com/react-native-community/react-native-geolocation

Don't know if it isn't available in 0.59 too