React Native’s Network Protocol
**THIS IS A DRAFT PUBLICATION AND IS NOT COMPLETE NOR GRAMMAR CHECKED**
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:
Lets start deconstructing the logs
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:
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?
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.