# Main Modules Exported by React Native's index.js: Complete API Reference

> Explore React Native's index.js exports, including UI components and native APIs. Discover the complete API reference and optimize your app's bundle size.

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

---

**React Native's [`index.js`](https://github.com/facebook/react-native/blob/main/index.js) file exports a single `ReactNativePublicAPI` object containing lazy-loaded getters for all UI components, native APIs, and utilities, ensuring that only code actually used by your app gets bundled.**

The [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js) file serves as the **runtime entry point** for the entire React Native framework. Located at the root of the `react-native` npm package, this file orchestrates the public API surface through a sophisticated lazy-loading pattern that minimizes initial bundle size while providing access to dozens of components and native modules.

## UI Components

The first major category of exports includes all core React Native components, defined between **lines 33–60** of [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js). Each component is exposed via a getter that defers `require()` calls until the property is first accessed.

### Core Component Exports

- **ActivityIndicator** – Loads from `./Libraries/Components/ActivityIndicator/ActivityIndicator`
- **Button** – Loads from `./Libraries/Components/Button`
- **FlatList** – Loads from `./Libraries/Lists/FlatList`
- **Image** and **ImageBackground** – Load from `./Libraries/Image/Image` and `./Libraries/Image/ImageBackground` respectively
- **Modal** – Loads from `./Libraries/Modal/Modal`
- **Pressable** – Loads from `./Libraries/Components/Pressable/Pressable`
- **ScrollView** and **SectionList** – Load from `./Libraries/Components/ScrollView/ScrollView` and `./Libraries/Lists/SectionList`
- **Text**, **TextInput**, and **TextAncestorContext** – Load from `./Libraries/Text/Text`, `./Libraries/Components/TextInput/TextInput`, and `./Libraries/Text/TextAncestorContext`
- **Touchable** family – Includes `TouchableHighlight`, `TouchableNativeFeedback`, `TouchableOpacity`, and `TouchableWithoutFeedback` from `./Libraries/Components/Touchable/`
- **View** – Loads from `./Libraries/Components/View/View`
- **VirtualizedList** and **VirtualizedSectionList** – Load from `./Libraries/Lists/VirtualizedList` and `./Libraries/Lists/VirtualizedSectionList`

Platform-specific components like `DrawerLayoutAndroid`, `ProgressBarAndroid`, and `SafeAreaView` (deprecated) are also available through this same lazy-loading mechanism.

## Native APIs and Utilities

Beginning at **line 61**, the [`index.js`](https://github.com/facebook/react-native/blob/main/index.js) file exports core APIs that bridge JavaScript to native platform code. These modules provide access to device capabilities, styling utilities, and React Native's native module registry.

### Essential API Categories

**Platform and Device Information:**
- **Platform**, **PlatformColor**, **Dimensions**, **PixelRatio**, and **DeviceInfo** – Located in `./Libraries/Utilities/`
- **Appearance** and **useColorScheme** – Provide theme detection capabilities

**Native Module Access:**
- **NativeModules** – Access to custom native modules
- **UIManager** – Direct interface to the native view manager
- **TurboModuleRegistry** – New architecture module registration system

**Application Lifecycle:**
- **AppRegistry** – Entry point for app registration from `./Libraries/ReactNative/AppRegistry`
- **AppState** – Background/foreground state monitoring from `./Libraries/AppState/AppState`
- **BackHandler** – Hardware back button handling from `./Libraries/Utilities/BackHandler`

**User Interaction APIs:**
- **Alert** – Cross-platform alerting from `./Libraries/Alert/Alert`
- **ActionSheetIOS** – iOS-specific action sheets from `./Libraries/ActionSheetIOS/ActionSheetIOS`
- **AccessibilityInfo** – Screen reader and accessibility status from `./Libraries/Components/AccessibilityInfo/AccessibilityInfo`
- **Share**, **Vibration**, and **ToastAndroid** – System interaction utilities

**Animation and Styling:**
- **Animated** – Comprehensive animation library with both default and named type exports from `./Libraries/Animated/Animated`
- **StyleSheet** – Performance-optimized styling utility from `./Libraries/StyleSheet/StyleSheet`

**Development and Debugging:**
- **DevSettings**, **DevMenu**, and **LogBox** – Development tooling interfaces
- **Linking** – Deep linking and URL handling from `./Libraries/Linking/Linking`

## Lazy Loading Architecture

The [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js) file implements a **lazy-loading facade** that significantly impacts bundle performance. Rather than statically importing all modules at the top of the file, each export is defined as a getter property on the `module.exports` object.

```javascript
// Conceptual representation of the pattern used in index.js
module.exports = {
  get View() {
    return require('./Libraries/Components/View/View').default;
  },
  get Text() {
    return require('./Libraries/Text/Text').default;
  },
  // ... additional getters
} as ReactNativePublicAPI;

```

This architectural decision ensures that importing `react-native` does not immediately load every component into memory. Instead, Metro (or your chosen bundler) includes only the modules actually referenced in your source code, supporting effective tree-shaking and reducing startup time.

## Handling of Deprecated and Removed Modules

During development mode (`__DEV__`), the entry point includes special accessor definitions for modules that have been extracted from core React Native. When you attempt to import removed modules like `AsyncStorage`, `ImagePickerIOS`, or `Slider`, the getter throws an informative error directing you to the appropriate community package.

This mechanism maintains API stability while guiding developers toward the modularized ecosystem, preventing silent failures when upgrading React Native versions.

## Practical Usage Examples

### Basic Component Import

Importing standard UI components triggers lazy loading automatically:

```tsx
import { View, Text, Button, Image } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Hello, React Native!</Text>
      <Image 
        source={{uri: 'https://reactnative.dev/img/header_logo.svg'}} 
        style={{width: 100, height: 100}}
      />
      <Button 
        title="Press me" 
        onPress={() => console.log('Button pressed')} 
      />
    </View>
  );
}

```

### Platform-Specific API Usage

Access native APIs for device interaction:

```tsx
import { Platform, Alert, StyleSheet } from 'react-native';

export function showDeviceInfo() {
  const operatingSystem = Platform.OS === 'ios' ? 'iOS' : 'Android';
  const version = Platform.Version;
  
  Alert.alert(
    'Platform Information',
    `Running on ${operatingSystem} version ${version}`
  );
}

```

### Using React Native Hooks

Import hooks directly from the main entry point:

```tsx
import { useColorScheme, useWindowDimensions } from 'react-native';
import { Text, View, StyleSheet } from 'react-native';

export function ResponsiveComponent() {
  const colorScheme = useColorScheme(); // Returns 'light' | 'dark' | null
  const { width, height } = useWindowDimensions();
  
  return (
    <View style={[
      styles.container, 
      { backgroundColor: colorScheme === 'dark' ? '#000' : '#fff' }
    ]}>
      <Text style={{ color: colorScheme === 'dark' ? '#fff' : '#000' }}>
        Window dimensions: {width}x{height}
      </Text>
    </View>
  );
}

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

```

## Summary

- **Entry Point Location**: [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js) serves as the runtime gateway for the React Native package, exporting a `ReactNativePublicAPI` typed object.
- **Lazy Loading Pattern**: All exports utilize getter-based lazy loading (lines 33–60 for components, line 61+ for APIs) to optimize bundle size and startup performance.
- **UI Components**: Includes essential views like `View`, `Text`, `Image`, `FlatList`, `ScrollView`, and the `Touchable` family loaded on-demand from `Libraries/Components/` and `Libraries/Lists/`.
- **Native APIs**: Provides access to `Platform`, `Dimensions`, `Animated`, `AppRegistry`, `Alert`, `NativeModules`, and `TurboModuleRegistry` among dozens of utility modules.
- **Developer Experience**: Development builds include helpful error messages for removed modules like `AsyncStorage` and `Slider`, directing users to community replacements.

## Frequently Asked Questions

### How does React Native's index.js improve bundle size?

The file implements **lazy-loaded getters** rather than static imports. When you write `import { View } from 'react-native'`, only the `View` component and its dependencies get included in your bundle. Unused components remain unrequired, allowing Metro and other bundlers to effectively eliminate dead code through tree-shaking.

### What is the difference between ReactNativePublicAPI and index.js.flow?

`ReactNativePublicAPI` is the runtime type annotation used in [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js), while `index.js.flow` (line 27 import) provides static type definitions for Flow type checkers. Both files mirror the same public API surface, ensuring consistency between runtime behavior and static analysis.

### Where are the actual component implementations located?

While [`index.js`](https://github.com/facebook/react-native/blob/main/index.js) exports the public API, actual implementations reside in the `Libraries/` directory. For example, the `Button` component loads from `./Libraries/Components/Button`, and `FlatList` loads from `./Libraries/Lists/FlatList`. This separation allows the entry point to remain a lightweight facade.

### Why do I get errors about AsyncStorage or other removed modules?

In development mode (`__DEV__`), [`packages/react-native/index.js`](https://github.com/facebook/react-native/blob/main/packages/react-native/index.js) defines special accessors for extracted modules. If you attempt to import `AsyncStorage`, `ImagePickerIOS`, or `Slider`, the getter throws an error explaining that these modules moved to community packages (e.g., `@react-native-async-storage/async-storage`). This prevents silent failures during migration to newer React Native versions.