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

> Explore the main directories within the packages/react-native folder, including src React ReactAndroid ReactCommon and sdks. Understand the structure of the React Native codebase.

- Repository: [Meta/react-native](https://github.com/facebook/react-native)
- Tags: deep-dive
- Published: 2026-02-25

---

**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`](https://github.com/facebook/react-native/blob/main/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:

```javascript
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`](https://github.com/facebook/react-native/blob/main/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`](https://github.com/facebook/react-native/blob/main/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`](https://github.com/facebook/react-native/blob/main/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`](https://github.com/facebook/react-native/blob/main/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`](https://github.com/facebook/react-native/blob/main/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`](https://github.com/facebook/react-native/blob/main/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.