Learn React Native - Core Concepts & Main Architecture

#Introduction

In episode 1 you saw why React Native was born. Now it's time to understand how it works inside. Many developers only know how to write components without understanding what happens between JavaScript and native — until the app starts to lag and they don't know what to blame.

Episode 2 dissects the React Native architecture across two eras: the legacy Bridge-based architecture and the New Architecture with JSI, Fabric, and TurboModules, which has been the default since 0.76. You'll also get to know the core components you'll use in nearly every screen. This understanding is the foundation for episodes 8, 10, and 17.

#Two Main Threads: JS Thread and UI Thread

#The JS Thread

All application logic — state, props, event handlers, and the React tree rendering — runs on the JS Thread. This is where JavaScript is executed. Since 0.76, execution uses Hermes, a JavaScript engine optimized specifically for React Native, rather than the browser's V8.

#The UI Thread

Meanwhile, everything that touches the screen runs on the UI Thread: rendering UIView on iOS and View on Android, managing scroll, animations, and touch interactions. Native modules like camera and notifications also run on this native thread.

An important consequence: heavy work on the JS Thread must not block the UI Thread, or you'll see a frozen screen. This is one of the reasons why worklet-based animations (episode 19) run smoother — they execute directly on the UI Thread.

#From Bridge to JSI

#The Legacy Architecture: Bridge

In the legacy architecture, communication between the JS Thread and native happens through the Bridge: an asynchronous message queue serialized to JSON. Every time you call a native function from JavaScript, the message has to "cross" the bridge. This has two major weaknesses:

• All calls are asynchronous — reading and writing native data synchronously is difficult.
• JSON serialization adds overhead — large data gets encoded, then decoded twice.

#The New Architecture: JSI

The New Architecture replaces the Bridge with JSI (JavaScript Interface). JSI is a layer that lets JavaScript interact directly with native objects — without JSON serialization and without an asynchronous hop. Synchronous native calls become possible, and shared memory can be used together.

Legacy: JS --JSON--> Bridge --JSON--> Native (async, serialized)
New:    JS --JSI--> Native (direct, sync-capable)

JSI is the key to all performance improvements in modern React Native. All major libraries like Reanimated and Skia build their own JSI support.

#Fabric and TurboModules

#Fabric: The New UI Renderer

Fabric is React Native's new renderer that replaces the old shadow tree component. With Fabric, React components render into host views (native) more efficiently, support asynchronous rendering under transactions, and enable interoperability with React 19's rendering system. The result: reduced work on the UI Thread and a smaller bundle size.

#TurboModules: Fast Native Modules

TurboModules is the new way to define and load native modules. Previously all native modules were loaded at once at startup; now they're loaded lazily — only when actually used. This noticeably speeds up app startup time.

#Core Components You Use Every Day

Every React Native app is built from the same core components. Here are the most frequently used:

• View: basic container for layout, similar to div on the web.
• Text: displays text — only Text is allowed to contain text.
• Image: displays images from a URL or local assets.
• ScrollView: a scrollable container for content larger than the screen.
• Pressable: modern button/touchable with press feedback.
• TextInput: text input from the user.
• FlatList: virtualized list for large datasets (episode 8).

A simple component that combines several of the components above:

Your first core component

import React from "react";
import { View, Text, Pressable } from "react-native";
 
export function Card({ title, onPress }) {
  return (
    <Pressable onPress={onPress}>
      <View style={{ padding: 16, backgroundColor: "#fff" }}>
        <Text style={{ fontSize: 18, fontWeight: "bold" }}>{title}</Text>
      </View>
    </Pressable>
  );
}

Notice that the Card component above uses title as a prop and displays it inside Text. Inline styling with object literals is valid, but we'll tidy it up using StyleSheet.create in episode 4.

#Architecture Summary

A summary of the role of each architecture piece:

• JS Thread: application logic, renders the React tree, executed by Hermes.
• UI Thread: native view rendering, scroll, animations, and interactions.
• JSI: the direct communication gateway from JavaScript to native without the Bridge.
• Fabric: the new renderer for efficient host views.
• TurboModules: native modules loaded lazily for faster startup.

Understanding these layers will greatly help when you optimize performance in episode 18 and study native modules in episode 10.

#Closing

Episode 2 explained the engine behind React Native: two threads running in parallel, communication that used to go through the Bridge and now goes through JSI, the Fabric renderer, and TurboModules native modules — plus the core components that will accompany you every day.

Key takeaways:

• The JS Thread executes logic; the UI Thread draws to the screen.
• The asynchronous, JSON-serializing Bridge was replaced by JSI, which is direct and can be synchronous.
• Fabric is the new renderer; TurboModules load native modules lazily.
• The New Architecture has been the default since 0.76, and Hermes is its built-in JavaScript engine.
• View, Text, Image, ScrollView, Pressable, TextInput, and FlatList are the main core components.
• Choose libraries that support JSI for the best performance.

In the next episode, episode 3, we'll create your first React Native project: running npx @react-native-community/cli init MyApp, understanding the folder structure, modifying App.tsx, and launching it on the emulator — including a comparison of the Expo managed and bare workflows.