React Native architecture (bridge, new architecture)

Introduction

React Native lets you build mobile apps using JavaScript. It uses a special system to connect your JavaScript code with native mobile parts so your app feels fast and smooth.

When you want to build a mobile app using JavaScript but still use native phone features.

When you want your app to work on both iPhone and Android with mostly the same code.

When you want to improve app speed by using the new React Native system.

When you want to understand how React Native talks to native phone parts.

When you want to debug or optimize your React Native app's performance.

Syntax

React Native

/* React Native uses a Bridge to connect JavaScript and native code */
// Old architecture:
JavaScript thread <--> Bridge <--> Native thread

// New architecture (Fabric + TurboModules):
JavaScript thread <--> JS Interface <--> Native Modules + Fabric Renderer

The Bridge is like a messenger between JavaScript and native code.

The New Architecture improves speed by reducing the bridge and using direct calls.

Examples

This sends a message over the bridge to the native side to show an alert.

React Native

// Old Bridge example
// JS sends a command to native to show an alert
NativeModules.AlertManager.showAlert('Hello!')

This calls the native module faster using the new system.

React Native

// New Architecture uses TurboModules
// JS calls native module directly without bridge delay
const alertModule = require('AlertModule');
alertModule.showAlert('Hello!')

Sample App

This simple app shows a button. When you press it, it uses React Native's native alert feature. Behind the scenes, React Native uses its architecture to connect the JavaScript button press to the native alert popup.

React Native

import React from 'react';
import {Button, Alert, View} from 'react-native';

export default function App() {
  const showAlert = () => {
    Alert.alert('Hello from React Native!');
  };

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Press me" onPress={showAlert} accessibilityLabel="Show alert button" />
    </View>
  );
}

Important Notes

The old bridge sends messages back and forth, which can slow down complex apps.

The new architecture uses Fabric for UI and TurboModules for faster native calls.

Understanding this helps you write better React Native apps and debug performance issues.

Summary

React Native connects JavaScript and native code using a bridge system.

The new architecture improves speed by reducing bridge overhead.

Knowing this helps you build faster and smoother mobile apps.