A bridge in the React Native universe is more than just a connection; is a cross-platform communication between native languages (such as Kotlin, Java, Objective-C and Swift) and the powerful JavaScript. This capability opens the door to building mobile applications efficiently and flexibly.
Before we dive into the transferable properties, it is crucial to understand the underlying mechanism that guides the flow of these properties between different platforms.
When opening any application developed in JavaScript on your mobile device, you may wonder: magic? Yes, indeed! It's the magic of React Native in action.
React Native operates through a threading model for the render pipeline, where threads represent a series of instructions executed by the CPU. In this context, three essential threads come into play: the UI thread (or main thread), the Shadow thread (or Shadow tree) and the JavaScript thread.
The UI thread, originating from the native DOM, is what creates the other two threads. The JavaScript thread manages the application logic, while the Shadow tree observes the states and implements changes to the layout. Changes to the view are calculated integratedly and, at the end of each event loop, are sent to the native side in serialized JSON format.
Thus, properties that cross over to the native side take the form of serialized JSON, restricting themselves to JSON-compatible types.
Consider the example of clicking a button. Since it is not possible to pass callbacks directly, the native side operates via events. The click event is sent, and the JavaScript triggers a callback. This callback is processed in Shadow, triggering the state change. After this change is complete, the result is serialized into JSON and sent to the other side of the bridge, thus ending the communication cycle.
In short, the React Native bridge enables the efficient transfer of properties between languages, these props should be serialized JSON, and all JSON types can be passed to native side, providing a mobile development experience marked by versatility and effectiveness.
Top comments (1)
I loved this post!
You have found a way to talk about how RN threads work understandably. do you have more info about the new events architecture?