Where is the iOS Native Code Located in the React Native Repository?

The iOS native code in React Native is located primarily under packages/react-native/React/ with platform-specific implementations in ReactApple/ and ReactCommon/react/runtime/platform/ios/.

React Native bridges JavaScript and native platform APIs through a sophisticated native layer written in Objective-C and C++. Understanding the exact file structure helps developers debug native modules, contribute to the framework, or implement custom iOS-specific functionality.

Core iOS Native Directory Structure

All iOS-specific source files reside within the packages/react-native directory. This location houses the Objective-C++ bridge, UIKit view managers, and the new Fabric renderer implementation.

The repository organizes iOS code into logical groups based on functionality:

• View Infrastructure: UIKit component bindings
• Bridge Infrastructure: JavaScript-to-native communication
• Native Modules: Device API access (geolocation, camera, etc.)
• Fabric Renderer: New architecture components
• Platform Runtime: Low-level iOS-specific runtime helpers

View Infrastructure: React/Views

The packages/react-native/React/Views/ directory contains the UIKit view subclasses and view managers that map JavaScript components to native iOS views.

Key files in this directory include:

• RCTViewManager.m: Base class for all view managers, handling prop conversion and event dispatch
• RCTScrollView.m: Implementation of the ScrollView component using UIScrollView
• RCTModalHostView.m: Native modal presentation using UIViewController

These files implement the RCTViewManager protocol, exposing JavaScript-configurable properties through the RCT_EXPORT_VIEW_PROPERTY macro.

Bridge and Base Infrastructure

The packages/react-native/React/Base/ directory houses the core bridge implementation that initializes the JavaScript runtime and manages the communication queue.

Critical components include:

• RCTBridge.m: Main entry point for the bridge, handling module loading and batching of native calls
• RCTCxxBridge.mm: Objective-C++ implementation that creates the JavaScriptCore context or Hermes runtime

This directory also contains threading utilities and the event dispatcher that queues JavaScript-to-native method invocations.

Native Modules: React/Modules

Platform-specific APIs live in packages/react-native/React/Modules/. These Objective-C classes implement the RCTBridgeModule protocol to expose device capabilities to JavaScript.

Notable implementations:

• RCTUIManager.m: Manages the view hierarchy and shadow tree calculations
• RCTAppState.m: Tracks application foreground/background state
• RCTDeviceInfo.m: Provides screen dimensions and device characteristics

Fabric Renderer Architecture

The new Fabric renderer (enabled via the New Architecture) resides in packages/react-native/React/Fabric/. This directory contains the platform-specific implementation of the cross-platform C++ Fabric layer.

Key files:

• RCTSurfacePresenter.h: Coordinates surface mounting and the component view registry
• RCTComponentViewProtocol.h: Defines the interface for platform-specific component views

Fabric uses a C++ core with Objective-C++ bindings, differing from the legacy architecture's pure Objective-C approach.

Platform-Specific Implementations

ReactApple for SwiftUI Integration

The packages/react-native/ReactApple/ directory contains Apple-specific extensions, including SwiftUI integration helpers.

• RCTSwiftUIContainerViewWrapper.h: Wraps React Native views for use within SwiftUI hierarchies

Low-Level Runtime in ReactCommon

Low-level iOS runtime helpers shared between the old and new renderers live in packages/react-native/ReactCommon/react/runtime/platform/ios/.

• RCTInstance.h: Manages the native instance lifecycle
• ObjCTimerRegistry.h: Implements timer functionality using NSTimer and CADisplayLink

Example Applications

The repository includes sample iOS applications demonstrating native module usage:

• packages/rn-tester/: Comprehensive test application showing all native components and APIs
• private/helloworld/ios/: Minimal "Hello World" iOS app for sanity testing

These projects reference the native code via CocoaPods, linking against the React and React-Core pods defined in the main package.

Creating Custom Native Modules

To extend React Native with custom iOS functionality, create files in the appropriate subdirectories of packages/react-native/React/.

Header File

Create MyCustomModule.h in packages/react-native/React/Modules/:

#import <React/RCTBridgeModule.h>

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

Implementation File

Create MyCustomModule.m in the same directory:

#import "MyCustomModule.h"
#import <React/RCTLog.h>

@implementation MyCustomModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(getGreeting:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
  NSString *greeting = @"Hello from iOS native code!";
  resolve(greeting);
}

RCT_EXPORT_METHOD(showAlert:(NSString *)message)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"ReactNative"
                                   message:message
                                   preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil]];
    UIViewController *root = RCTSharedApplication().keyWindow.rootViewController;
    [root presentViewController:alert animated:YES completion:nil];
  });
}

@end

JavaScript Usage

import {NativeModules} from 'react-native';

const {MyCustomModule} = NativeModules;

MyCustomModule.getGreeting().then(greeting => console.log(greeting));

MyCustomModule.showAlert('Hello from JavaScript');

Summary

• The iOS native code in React Native resides primarily under packages/react-native/React/ with subdirectories for Views, Modules, Base, and Fabric.
• Platform-specific implementations for SwiftUI and low-level runtime helpers live in ReactApple/ and ReactCommon/react/runtime/platform/ios/ respectively.
• Key architectural components include RCTBridge.m for JavaScript communication, RCTViewManager.m for UI components, and RCTSurfacePresenter.h for the new Fabric renderer.
• Sample applications in packages/rn-tester/ demonstrate practical usage of the native iOS APIs.

Frequently Asked Questions

Where is the main bridge implementation for iOS in React Native?

The main bridge implementation is located at packages/react-native/React/Base/RCTBridge.m. This file handles the initialization of the JavaScript runtime, module loading, and the queuing of native method calls from JavaScript. The Objective-C++ variant RCTCxxBridge.mm manages Hermes or JavaScriptCore contexts.

What is the difference between React/Views and React/Fabric directories?

packages/react-native/React/Views/ contains the legacy renderer's UIKit view managers written in Objective-C, such as RCTViewManager.m and RCTScrollView.m. packages/react-native/React/Fabric/ contains the new Fabric renderer's platform-specific implementation, which uses a mix of C++ core logic and Objective-C++ bindings via RCTSurfacePresenter.h and component view protocols.

How do I add a custom native module to the React Native iOS codebase?

Create an Objective-C class implementing the RCTBridgeModule protocol in packages/react-native/React/Modules/. Use the RCT_EXPORT_MODULE() macro to register the module and RCT_EXPORT_METHOD() to expose methods to JavaScript. The module automatically becomes available via NativeModules in JavaScript when the app is rebuilt with the React and React-Core CocoaPods.

Where are the sample iOS applications located in the React Native repository?

Sample applications demonstrating native module usage are located in packages/rn-tester/ and private/helloworld/ios/. The RNTester app provides comprehensive examples of all native components and APIs, while the HelloWorld app serves as a minimal sanity check for the build system. Both reference the native iOS code through CocoaPods integration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}