How does the JavaScript code you write turn into a real iOS or Android UI element? This topic explains the path from JSX to the screen, so you're not just blindly applying each building block later on.

1. Description

React Native does NOT run your JavaScript code inside a webview (that would be a "hybrid app", e.g. with Cordova/Ionic) – instead it runs in its own JavaScript engine (historically JavaScriptCore, nowadays usually Hermes) ALONGSIDE the actual native app, and both sides communicate asynchronously through a messaging layer (the "bridge", see its own topic). The UI itself consists of REAL native components (UIView on iOS, android.view.View on Android) – not rendered HTML elements.

The three key threads

• JS thread: runs your React Native JavaScript code – component logic, state updates, event handlers.
• Native (UI) thread: draws the actual native views and processes touch events on iOS/Android.
• Shadow thread: computes layout (flexbox positioning) via the Yoga layout engine before views actually get drawn.

From JSX to the screen: the flow

1. You write JSX (<View><Text>Hello</Text></View>).
2. Babel translates JSX into regular JavaScript function calls at build time.
3. React computes a virtual tree of components (not UI elements directly).
4. This tree gets sent to the native side over the bridge.
5. The native side creates REAL UIView/View objects from it and displays them.