React Native Architecture

React Native architecture is the overall structure through which React application code communicates with the native mobile platform.

React Code
    ↓
React Native Runtime
    ↓
Native Platform
    ↓
Android / iOS

React Native applications are commonly written using JavaScript or TypeScript.

This layer contains application logic, components, state management, event handling, API calls and other application functionality.

const message = "Hello React Native";

console.log(message);

React provides the programming model used to create components and manage UI updates.

Developers use concepts such as JSX, components, props, state and Hooks.

function App() {
    return (
        <View>
            <Text>Hello App</Text>
        </View>
    );
}

React Native provides the mobile-specific components and APIs that connect the React programming model with the native platform.

Examples include View, Text, Image, TextInput and platform APIs.

The native platform provides operating-system capabilities used by mobile applications.

React Native applications can interact with Android and iOS platform features through React Native APIs and appropriate native modules or libraries.

React Native applications can target Android and iOS.

              React Native
               /        \
              /          \
         Android          iOS

Most application logic can be shared, while platform-specific code can be added when required.

A React Native application can be represented as a component tree.

App
 ├── Header
 ├── Home
 │    ├── ProfileCard
 │    └── StudentList
 └── Footer

React manages the relationships between these components and their data.

React determines what the application interface should look like based on the current component state and props.

React Native then coordinates the required UI updates with the mobile platform.

State / Props
      ↓
React Rendering
      ↓
React Native
      ↓
Mobile UI

When state changes, React can render the component again so the interface reflects the new state.

const [count, setCount] = useState(0);

setCount(count + 1);

The state change can result in an updated part of the mobile interface.

Props allow data to flow from parent components to child components.

function Student({ name }) {
    return (
        <Text>{name}</Text>
    );
}

function App() {
    return (
        <Student name="Rahul" />
    );
}

This helps components remain reusable.

Users can interact with components through events such as button presses and text input.

<Pressable
    onPress={() => console.log("Pressed")}
>
    <Text>Press Me</Text>
</Pressable>

The event handler runs JavaScript or TypeScript application logic.

React Native provides mechanisms that allow JavaScript or TypeScript application code to work with native platform functionality.

This allows a mobile application to use platform capabilities while developers work primarily with React Native code.

JavaScript / TypeScript
          ↓
     React Native
          ↓
    Native Platform

Native modules allow React Native applications to access functionality implemented for a specific mobile platform.

They are useful when an application needs functionality that is not available directly through the standard JavaScript API.

React Native provides components that represent mobile user interface elements.

For example, the Text component is used to display text and TextInput is used for text entry.

<View>
    <Text>Student Name</Text>

    <TextInput
        placeholder="Enter name"
    />
</View>

Modern React Native versions use a newer architecture designed to improve communication between JavaScript and native code and provide a more modern foundation for React Native features.

Important technologies associated with the modern architecture include the JavaScript Interface (JSI), Fabric and TurboModules.

JSI, or JavaScript Interface, is an important part of the modern React Native architecture.

It provides a lower-level interface that allows JavaScript to interact with native C++ and platform functionality.

JavaScript
     ↓
    JSI
     ↓
C++ / Native Code
     ↓
Platform APIs

Fabric is the modern rendering system used by React Native.

It is designed to provide a more modern and efficient way for React Native to manage the rendering of native UI components.

React Components
       ↓
     Fabric
       ↓
   Native UI

TurboModules are part of the modern React Native architecture for native modules.

They provide a modern approach for accessing native functionality from React Native applications.

React Native Code
       ↓
  TurboModule
       ↓
Native Functionality

Codegen is associated with the modern React Native architecture and can generate native code based on typed specifications.

This helps connect JavaScript or TypeScript definitions with native implementations in a more structured way.

Older React Native architecture relied heavily on a bridge-based communication model between JavaScript and native code.

The modern architecture reduces reliance on this older communication model and introduces technologies such as JSI, Fabric and TurboModules.

React Components
       ↓
JavaScript / TypeScript
       ↓
       JSI
       ↓
 ┌───────────────┐
 │    Fabric     │
 │      +        │
 │ TurboModules  │
 └───────────────┘
       ↓
Native Platform
       ↓
Android / iOS

This is a simplified conceptual diagram. The actual React Native runtime contains additional implementation details.

The React Native runtime is responsible for executing application JavaScript or TypeScript and coordinating React Native functionality.

The exact runtime details depend on the project's React Native version and configuration.

React Native applications execute JavaScript using a JavaScript engine.

Modern React Native projects commonly use Hermes, although project configuration can determine the JavaScript engine being used.

JavaScript Code
      ↓
JavaScript Engine
      ↓
React Native Runtime
      ↓
Native Platform

Hermes is a JavaScript engine optimized for React Native applications.

It is designed with mobile application requirements in mind and is commonly used in modern React Native projects.

Developers normally do not need to interact directly with the engine for everyday React Native development.

Sometimes Android and iOS require different implementations.

React Native provides APIs and project conventions for handling platform-specific code.

if (Platform.OS === "android") {
    // Android code
} else {
    // iOS code
}

When a React Native application requests data from a backend, the overall application flow can look like this:

Mobile UI
   ↓
React Component
   ↓
JavaScript Logic
   ↓
HTTP API Request
   ↓
Backend Server
   ↓
Database
   ↓
JSON Response
   ↓
React State
   ↓
Updated UI

When an application needs a device capability such as camera, location or notifications, React Native can communicate with suitable native APIs through React Native APIs or native modules.

React Native App
       ↓
React Native API
       ↓
Native Module / Platform API
       ↓
Device Feature

Understanding architecture helps developers understand why React Native applications can combine React-based development with mobile platform capabilities.

It also helps when debugging issues related to rendering, native modules, platform differences and application performance.

        React Application
               ↓
      Components + Hooks
               ↓
      JavaScript / TypeScript
               ↓
      React Native Runtime
               ↓
       JSI / Modern APIs
          ↙          ↘
      Fabric       TurboModules
          ↓          ↓
        Native Platform
               ↓
        Android / iOS

This diagram provides a simplified learning model of the modern React Native architecture.

The complete conceptual flow can be summarized as:

User
 ↓
React Native UI
 ↓
React Components
 ↓
Props / State / Hooks
 ↓
JavaScript or TypeScript
 ↓
React Native Runtime
 ↓
Modern Native Interaction
 ↓
Android / iOS Platform
 ↓
Device Capabilities

The important concepts to remember are React components, the JavaScript or TypeScript layer, the React Native runtime, native platform interaction and the modern architecture technologies such as JSI, Fabric and TurboModules.