Main Directories Within the packages/react-native Directory: Complete Guide

The packages/react-native directory contains nine primary folders including src for JavaScript source code, React and ReactAndroid for platform-specific native implementations, ReactCommon for shared C++ core logic, and sdks for the Hermes JavaScript engine.

The packages/react-native directory serves as the central framework package within the Facebook/react-native monorepo, housing the complete React Native SDK from JavaScript APIs to native platform code. Understanding the main directories within the packages/react-native directory is essential for developers contributing to the framework, debugging native modules, or building custom libraries. This guide breaks down each top-level folder based on the actual source structure of the repository.

Core JavaScript Source (src)

The src directory contains the JavaScript and Flow-typed source code that gets published to the NPM registry. This folder includes the public API entry point, core components, utilities, and private web-API implementations.

Key files within this directory include:

• src/index.js – The main public entry point that re-exports all JavaScript APIs
• Core component implementations (View, Text, ScrollView, etc.)
• Utility modules for styling, networking, and animations

When you import from react-native in your application, you are consuming modules from this directory:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello from packages/react-native/src</Text>
    </View>
  );
}

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

Native Platform Implementations

The framework maintains separate directories for each platform's native code, plus shared C++ core logic that powers both iOS and Android.

iOS Native Code (React)

The React directory houses the native iOS implementation written in Objective-C and Swift. This folder contains the bridge infrastructure, UI component managers, and the Fabric renderer implementation.

Key implementation files include:

• React/Views/ScrollView/RCTScrollViewManager.m – Manager for the ScrollView component
• Bridge modules that facilitate JavaScript-to-native communication
• Fabric renderer components for the new architecture

Android Native Code (ReactAndroid)

The ReactAndroid directory contains the native Android implementation using Java, Kotlin, and C++. This folder mirrors the iOS functionality while providing Android-specific optimizations and the TurboModule infrastructure.

Notable source files include:

• ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManagersHelper.java – Helper for managing native view hierarchies
• TurboModule and Fabric implementations for the new architecture
• JNI bindings for C++ interop

Shared C++ Core (ReactCommon)

The ReactCommon directory contains platform-agnostic C++ code shared by both iOS and Android. This includes the JavaScript Interface (JSI), TurboModules core, and the Fabric renderer.

Critical files in this directory:

• ReactCommon/react/renderer/components/view/ConcreteViewShadowNode.cpp – Core Fabric rendering logic for view components
• JSI implementation for direct JavaScript engine communication
• Shared native module infrastructure

Apple-Specific Glue (ReactApple)

The ReactApple directory provides Apple-specific glue code written in Swift and Objective-C. This folder ties the core C++ library to iOS and macOS platforms.

Key contents include:

• ReactApple/React-Apple.podspec – CocoaPods specification for Apple platforms
• Platform-specific initialization code

Build Tools and SDKs

Several directories manage the build process, third-party dependencies, and bundled SDKs required for compilation.

Pre-Built SDKs (sdks)

The sdks directory contains pre-built SDKs shipped with the repository, most notably the Hermes JavaScript engine and its compiler.

Important files:

• sdks/hermes-engine/hermes-engine.podspec – Podspec for integrating Hermes
• Pre-compiled Hermes binaries for iOS and Android

Build Scripts (scripts)

The scripts directory houses helper scripts for bundling, code generation, podspec generation, and other build-time tasks.

Key scripts include:

• scripts/bundle.js – CLI script used by react-native bundle to generate JavaScript bundles
• Codegen scripts for generating native module bindings

Third-Party Dependencies (third-party-podspecs)

The third-party-podspecs directory contains CocoaPods specifications for external native dependencies required at build time.

Examples include:

• third-party-podspecs/glog.podspec – Podspec for the Google logging library
• Podspecs for fmt and Boost libraries

Type Definitions (types)

The types directory contains TypeScript declaration files that provide IntelliSense and type checking for the JavaScript API. These files power the TypeScript development experience for React Native.

Key files:

• types/public/ReactNativeTypes.d.ts – Public type definitions for core APIs
• Declaration files for component props and native module interfaces

Summary

The packages/react-native directory organizes the complete React Native framework into distinct functional areas:

• src: JavaScript source code and public APIs published to NPM
• React: Native iOS implementation (Objective-C/Swift) with bridge and Fabric renderer
• ReactAndroid: Native Android implementation (Java/Kotlin/C++) with TurboModule support
• ReactCommon: Shared C++ core (JSI, TurboModules, Fabric) used by both platforms
• ReactApple: Apple-specific glue code connecting C++ core to iOS/macOS
• sdks: Pre-built SDKs including the Hermes JavaScript engine
• scripts: Build-time helpers for bundling and code generation
• third-party-podspecs: CocoaPods specifications for external native dependencies
• types: TypeScript declaration files for editor IntelliSense

Frequently Asked Questions

What is the purpose of the src directory in packages/react-native?

The src directory contains the JavaScript and Flow-typed source code that gets published to the NPM registry. It includes the public API entry point (src/index.js), core React Native components like View and Text, styling utilities, and private web-API implementations. When developers import from react-native in their applications, they are consuming modules from this directory.

How do React, ReactAndroid, and ReactCommon differ?

These three directories separate platform-specific native code from shared core logic. React contains the iOS-specific implementation written in Objective-C and Swift, including the bridge and Fabric renderer. ReactAndroid houses the Android-specific Java, Kotlin, and C++ code with TurboModule infrastructure. ReactCommon holds platform-agnostic C++ code—including JSI, TurboModules core, and Fabric rendering logic—that both iOS and Android share.

What is stored in the sdks directory?

The sdks directory contains pre-built SDKs shipped with the React Native repository, most notably the Hermes JavaScript engine and its compiler. It includes the hermes-engine.podspec file for iOS integration and pre-compiled binaries for both iOS and Android platforms. This directory ensures that React Native applications have access to a consistent, optimized JavaScript runtime without requiring separate installations.

Where are TypeScript definitions located in packages/react-native?

TypeScript declaration files are located in the types directory, specifically under paths like types/public/ReactNativeTypes.d.ts. These files provide IntelliSense and type checking for the JavaScript API, powering the TypeScript development experience for React Native. They declare types for component props, native modules, and core APIs that correspond to the JavaScript implementation in the src directory.

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