React Native’s Network Protocol


In this article I go a little under the hood in exploring React Native’s Network Protocol. I use the word “Protocol” loosely here, because I don’t believe the current network traffic conforms to any spec per say, but is just a implementation artifact of the current state of the code. In fact on a cursory look, the traffic patterns between React Native 0.4.x and 0.8.x look different. So with that caveat out of the way, lets begin.

Viewing the Network Traffic

The traffic pipeline we will be inspecting specifically in this article is the WebSocket traffic between the NodeJS server sitting on the desktop and the mobile client. See my article React Native’s Execution Contexts to understand where in the pipeline were inspecting the traffic.

Creating a blank React Native AwesomeProject (as described in the official Getting Started Page), we can see our first network traffic dump once we’ve booted up the app:

The resulting app looks like so:

React Native Starter Project Application

Lets start deconstructing the logs

Creating Views

The first part of understanding the traffic is to compare the app’s output. Here we see the 3D view of the app we created along with the tree hierarchy:

The View Hierarchy blown out in 3D
The resulting View Hierarchy in Tree View

Comparing these hierarchies to the createView statements in the logs, we can start to see some patterns.

The first interesting note, is that we created 11 views but only have 7 views in the tree... what gives?

Nesting Views

Reviewing the main log again, we see that all views are originally created under root, but then are later nested:

Reading the manageChildren statements bottom-up we can create the tree

Which we can infer onto the View Hierarchy like so


Yes, there’s tons moar to cover. I’ll continually update this article as I work to uncover moar.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.