React Native: What It Is, How Bridge Works, and the JavaScript Environment

What Is React Native

React Native is a framework created by the Facebook team (now Meta) and released as open-source in 2015. Unlike hybrid approaches (Cordova, Ionic), React Native does not use WebView. Instead, JavaScript components map to native UI elements: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

The first version of React Native supported only iOS. Android support arrived in 2016. Version 0.60 (2019) introduced Autolinking — automatic linking of native dependencies. React Native 0.68 (2022) included the new Fabric + TurboModules architecture. The current stable version 0.74 (2024) is fully transitioned to New Architecture with Yoga 3.0 support for Flexbox layout.

According to Statista 2024, React Native is used in 38% of cross-platform projects. The framework is used by Discord, Instagram, Shopify, Pinterest, Skype, and Uber Eats. Meta uses React Native in Facebook and Instagram — the main mobile app with 2 billion users.

History and Evolution of React Native

React Native was announced at React.js Conf in January 2015. The idea was to bring React’s declarative paradigm from the web to mobile platforms. The first commit in the repository appeared in 2013 as an internal Facebook project for creating the Facebook Groups app on iOS.

Version 0.70 (2022) introduced Hermes as the default JavaScript engine. Hermes is an ahead-of-time (AOT) compiled engine optimized for mobile devices. It reduces app startup time by 50% and decreases APK size by 30% compared to JavaScriptCore. Hermes supports ES6 and partially ES2020.

Difference Between React Native and React Web

React Web renders components into DOM elements (div, span, p) via ReactDOM. React Native renders into native platform components. Instead of <div>, use <View>; instead of <span>, use <Text>. Styles are defined via StyleSheet.create(), which translates to platform CSS properties. Flexbox is enabled by default through the Yoga engine.

Navigation in React Native differs from the web. Instead of react-router-dom, React Navigation is used — a native library with support for Stack, Tab, and Drawer navigators. React Navigation 6.x uses native animations (useNativeDriver) and Deep Links integration. For native screen navigation using iOS UINavigationController and Android Fragment, the react-native-navigation library by Wix is used.

React Native Architecture

React Native architecture traditionally revolved around Bridge — an asynchronous JSON channel between the JavaScript environment and native code. Since version 0.68, Meta introduced New Architecture, which replaces Bridge with JSI (JavaScript Interface) and Fabric. Let’s look at both models.

Bridge and Fabric

Bridge is a serialized JSON protocol running on multiple threads: JS Thread (React code interpretation), Main Thread (UI), and Native Modules Thread (API). Each interaction between JS and native code goes through object serialization and deserialization, creating delays with frequent calls. When scrolling a list of 1000 items, Bridge generates up to 10,000 JSON messages per second.

Fabric is a new rendering system in React Native. Instead of Bridge, Fabric uses a C++ Shadow Tree that synchronizes with the UI thread via JSI. This eliminates JSON serialization: native C++ code directly calls functions in the JavaScript environment and vice versa. Fabric reduces rendering latency from 16 ms (Bridge) to 2–4 ms.

TurboModules is the second part of New Architecture. In the old model, all native modules were loaded at app startup. TurboModules load modules lazily (lazy loading) — only when JS code first requests them. This reduces cold start time by 40% in apps with 20+ native modules.

Example React Native App

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Native Modules

Native Modules are a mechanism for calling platform APIs from JavaScript. If functionality is not covered by standard React Native components (camera, Bluetooth, biometrics), developers write a module in Swift/Kotlin and register it via RCTBridgeModule or TurboModule. The native function is called from JS through NativeModules.CameraModule.takePhoto().

React Native provides built-in native modules for accessing the accelerometer (react-native-sensors), geolocation (@react-native-community/geolocation), biometrics (react-native-biometrics), and local notifications (@notifee/react-native). For custom scenarios, Expo offers the Expo Modules API — a simpler interface for creating native modules without Xcode or Android Studio.

Advantages of React Native

Massive community — React Native has the largest community among cross-platform frameworks. On GitHub, the project has 117,000+ stars and 1800+ contributors. npm downloads react-native 3 million+ times weekly. React Native questions account for 5% of all Stack Overflow questions in the mobile development section.

JavaScript ecosystem — React developers use the same tools as on the web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Business logic can be reused between the web version (React) and the mobile app (React Native). Libraries like Redux, Zustand, React Query, and React Hook Form work on both platforms without changes.

Expo is an SDK and toolset that simplifies React Native development. Expo provides ready-made modules (camera, notifications, maps, OAuth), cloud builds (EAS Build), and OTA updates (EAS Update). Expo Go allows running the app on a physical device without Xcode or Android Studio. According to Expo 2024 data, 70% of new React Native projects use Expo.

OTA updates — a feature available through Expo Update and CodePush (Microsoft). Developers can send JavaScript bundle updates directly to users without going through App Store or Google Play review. This speeds up critical bug fixes from 2–5 days (waiting for review) to 1–2 hours.

TypeScript support is included by default since React Native 0.71. The project template includes tsconfig.json, types for all components, and strict mode support. Flow (static typing by Facebook) is also supported, but Meta officially recommends TypeScript. TypeScript template accounts for 85% of new projects according to the State of React Native 2024 survey.

Ecosystem and Popular Libraries

npm is the primary package registry for React Native. Library search is filtered by the react-native keyword. Installation uses npm install or yarn add. React Native CLI automatically links native dependencies (since version 0.60). For Expo projects, installation is managed through expo install, which selects a compatible library version.

Key Libraries

@react-navigation/native — the de facto standard for navigation in React Native. The library includes Stack Navigator (animated transitions), Tab Navigator (bottom menu for iOS/Android), Drawer Navigator (side menu), and Material Top Tab. React Navigation 7.x (2024) introduced static route configuration and full React 18 support with useSyncExternalStore.

react-native-reanimated — a library for high-performance animations. Reanimated 3.x runs animations in the UI thread (worklet), bypassing the JS thread. This guarantees 60 FPS even when animating 100+ elements. useSharedValue, useAnimatedStyle, and withSpring replace the Animated API from the standard library. Reanimated handles touch gestures through react-native-gesture-handler.

@tanstack/react-query — a library for server state management. React Query caches API responses, automatically refetches data on network change (refetchOnReconnect), and supports pagination with useInfiniteQuery. Version 5.x includes optimistic updates for UX — the interface updates before receiving the server response, then adjusts.