I’ve been working on a React Native project recently and came to the point where I needed to setup a testing framework. To accomplish this, I needed to deep-dive into React Native’s asset pipeline and runtime environments to better understand what’s going on behind the curtains.
React’s Runtime Environment
JSValueRef result = JSEvaluateScript(strongSelf->_context.ctx, execJSString, NULL, NULL, 0, &jsError);
Sitting between iOS and React Native in the browser is a NodeJS WebSocket proxy. The Websocket proxy receives messages with JSON encoded directives from the device (see Inspecting React Native WebSocket traffic: link) and sends them to all registered listeners. The Websocket messages contain directives of which modules to lookup in memory and the relevant information is passed to it.
Below we can the where JSON messages are pushed into the webview for interpretation:
There’s ton more information to go through — but I'm tired and am thirsty for a beer. I'm in now way an expert on all of this, so please leave corrections, clarifications or comments.