[Idea: JS] Add way to detect react-native (and platform) without require().

[mikelehen]

Motivation

I have a 3rd-party library that needs to work in react-native (as well as node.js, web, etc.). I want to detect when it's used in react-native, for analytics purposes. I can't use require('react-native') or similar because if somebody uses my library with a tool like browserify, it will try to statically satisfy all require() statements and fail on react-native.

Suggestion

• Set navigator.product to 'ReactNative' (it is currently 'Gecko')
• Set navigator.platform to 'iPhone', 'iPad', or 'Android' as appropriate (it is currently 'MacIntel', at least in the iOS emulator).

Implementing

Code in question is here:

react-native/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

Line 114 in 0fbe091

GLOBAL.navigator = GLOBAL.navigator || {};

Related IRC Conversation: https://gist.github.com/mikelehen/822a82a37bf30431a104

[sophiebits]

I expect that navigator.platform is already something reasonable on device; I don't think we set it. Setting navigator.product sounds somewhat reasonable though…

[mikelehen]

I'd be fine with dropping the .platform part. Somebody on IRC had mentioned it.

[ide]

Proposal to move things forward: navigator.product returns "ReactNative" and navigator.productSub returns the version e.g. "0.5.0". This is a little different than browsers, which return "Gecko" and "20030107" but we'd be returning useful values in this case.

Relevant docs:
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/product
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/productSub

[mikelehen]

FWIW, @ide's proposal would definitely work for our use case.

[oveddan]

@spicyj @ide I have doubts that attaching something to the navigator will work in the chrome debugger, if we go ahead with the decision to run the chrome debugger in a worker (#1632 and #1473). The code within the worker doesn't have access to window, but just to the worker's own scope, which has I believe a different navigator. See the web worker's context api.

[ide]

That sounds preferable actually. We don't want any of the browser environment to leak into React Native's environment ideally.

[rainchen]

+1 for this idea