DEV Community


Posted on


Identifying the OS version and phone model hosting a React Native mobile app purely with JavaScript

When it is absolutely necessary to determine the OS and phone model in a React Native app it can be done with purely with JavaScript. Please let me explain how exactly the open source React Native component info-glass does it.

User Agent String

The React Native WebView component can execute a simple JavaScript function that returns the user agent string. That means the WebView will kinda reply like a web browser does.

The user agent string identifies the mobile app's host:

  1. OS name
  2. OS version
  3. Phone model

It doesn't have to be a phone the WebView can also identify a mobile device model like a tablet too.


  function getinfo() {
    if(window.postMessage.length !== 1) {
      setTimeout(getinfo, ${ASYNCHRONOUS_DELAY_MS});
    } else {
  window.onload = getinfo;

The code snippet above is just a single javascript function named getinfo() in a single HTML script tag. The function getinfo() returns the window.navigator.userAgent string for the WebView.

The secret is that a WebView component instance can send a message to the containing React Native component through the JavaScript function window.postMessage().


The npm package info-glass is a single JavaScript component that does one or two more things to simplify the above snippet. The source code is on Github in one single index.js file.

Every single React Native project is different. I simply like building purely in JavaScript because:

  1. Developer operation simplifications.
  2. Debugging a purely JavaScript application is relatively easy.
  3. Dust bunnies are easy to find with a JavaScript linter.

It's not too difficult to mix in native code, it simply isn't always absolutely necessary to write native code. If you are trying to be a humble JavaScript champion, it can't hurt to use a WebView to get the userAgent.

Latest comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!