In our previous example, we used the <Text>
component to render text.
There are a few other components like <Text>
which ship with React Native; we call these core components.
React Native knows how to render these on a specific platform because they are tied to a native component counterpart.
By creating components and rendering them, you tell React Native what to render. The JavaScript with the components is bundled in your app and executed in a separate thread from the native UI. This JS thread instructs React Native what it needs to render. Splitting this into a JS thread and a UI thread allows the platform to understand what needs to be rendered without blocking the actual interface components.
To visualize these two threads, consider a highway with only a single lane for traffic. With both slow and fast traffic combined on this lane, some traffic might slow down others. Adding another lane allows the faster traffic to run independently of the slower traffic. While JS isn’t necessarily slow traffic, it can still block the UI thread and cause stuttering in visible animations.
Besides the visible UI components, the native UI thread is also handling native API requests. Some functionality, like GPS location, needs to be requested from the native APIs. If your JS code uses this kind of functionality, it interacts with the native API using native code. The data from this native code is sent back to the JS code and handled in your app.
Instructions
The diagram demonstrates the relationship between React code, the JS thread, the UI thread, and the native application. From left to right, it describes how a React button is rendered to a native button component.
Here is a copy of the text included in the diagram:
React: The React-like JavaScript code developers write for their React Native apps
JS Thread: The app code is converted into a single JS bundle or file. React Native executes this code in a special thread to determine what it needs to render or invoke.
UI Thread: This thread receives actions to run natively. It can include rendering native components, like a <Button />
. It can also return data, requested by the JS thread, like sensor data.
Native: The native operating system actually renders the native component for a <Button />
on the phone.