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

React Native's 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 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. 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 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 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.

// 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:

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:

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:

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 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, 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 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 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.

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