The rendering system in React Native that allows React to communicate with native platform views (host views) instead of web DOM nodes. It bridges JavaScript React code with native UI components via C++ interfaces.

Fabric Renderer

Basic building blocks in React Native such as `<View>`, `<Text>`, `<Image>`, `<ScrollView>`, and `<TextInput>`, which map to native UI elements on each platform.

Core Components

An in-app developer menu available in development builds that provides access to debugging and development tools within the app.

Dev Menu

Components that can be animated using React Native Reanimated library.

Animated Component

React Native's communication layer enables JavaScript code to interact with native platform code:

Legacy Bridge: Asynchronous, serialized JSON-based messaging system

JavaScript Interface (JSI): Direct, synchronous communication between JavaScript and C++

TurboModules: On-demand, type-safe native modules accessed through JSI

CodeGen: Generates type-safe interfaces between JavaScript and native code

The EventEmitter is a core class that manages event handling throughout the system, allowing components to listen for and emit events.

Communication Layer

The native platform embedding React Native, such as Android, iOS, macOS, or Windows.

Host Platform

A syntax extension for JavaScript used in React and React Native that looks like XML/HTML but compiles to React element creation calls.

React Native uses JavaScript as its programming language, with React as the UI framework. Code can be executed using either:

Hermes - A lightweight JavaScript engine optimized for React Native

JSC (JavaScriptCore) - Apple's JavaScript engine (default on iOS)

The JavaScript bundle is created using Metro, React Native's bundler, which handles module resolution, transformations, and bundling.

JavaScript Runtime

The thread responsible for executing the JavaScript code of the React Native app, where most app logic runs.

JavaScript Thread

Unique identifiers assigned to elements in lists to help React efficiently update and reorder components.

Keys

React Native is currently transitioning from its legacy architecture to a new architecture. The key differences are:

| Feature           | Legacy Architecture           | New Architecture                                         |
|-------------------|-------------------------------|----------------------------------------------------------|
| JavaScript Bridge | Uses a serialized JSON bridge | Uses JavaScript Interface (JSI) for direct communication |
| UI Management     | Paper UI (Virtual DOM)        | Fabric Renderer (reactive C++ core)                      |
| Native Modules    | Traditional Native Modules    | TurboModules (on-demand, type-safe)                      |
| Code Generation   | Limited                       | Extensive CodeGen for interfaces                         |
| Performance       | Multiple thread jumps         | Reduced thread hopping                                   |
| Layout Engine     | Yoga                          | Yoga (improved integration)                              |

The new architecture is being gradually rolled out through feature flags, allowing developers to opt-in to specific components.

Legacy vs New Architecture

Props are immutable inputs to components, while state represents mutable data that can change over time and trigger UI updates.

Props and State

The fundamental building blocks of React applications, representing what gets rendered to the UI.

React Elements

References to React components or native elements, used to access or modify them directly, though their use should be limited.

Refs

The thread responsible for handling user interface updates and rendering native views.

UI Thread (Main Thread)

The View component serves as the most basic UI building block in React Native. It's equivalent to div in web development, UIView in iOS, and android.view in Android. Views are designed to be nested inside other views and can contain any number of child components.

View Component

A JavaScript function converted to run on the UI thread, marked with a `worklet` directive, enabling performant animations and interactions.