React Native

Common errors

• Invariant Violation: "main" has not been registered. This can happen if: * Your app's main component is not defined in AppRegistry.registerComponent. * Your app is not running in a development environment.

  cause The entry point component of your React Native application was not correctly registered with `AppRegistry`.
  fix Ensure that your main `App` component is exported as default and registered in your `index.js` (or similar entry file) using `AppRegistry.registerComponent('AppName', () => App);` where 'AppName' matches the name specified in your `app.json`.

• Error: Unable to resolve module react-native from '...' - Ensure that the module exists in the module map or within any of the configured `node_modules` directories.

  cause Metro bundler cannot find the `react-native` package, usually due to incorrect `node_modules`, cache issues, or symlink problems.
  fix Try deleting `node_modules`, `yarn.lock`/`package-lock.json`, and Metro cache (`npm start --reset-cache` or `yarn start --reset-cache`). Then reinstall dependencies (`npm install` or `yarn install`) and run `cd ios && pod install && cd ..` for iOS projects.

• Command failed with exit code 65: xcodebuild ...

  cause A general Xcode build failure on iOS, often related to CocoaPods, outdated dependencies, or project configuration.
  fix Clean the build folder in Xcode (`Product > Clean Build Folder`), then `cd ios && rm -rf build && pod install && cd ..`. Check Xcode logs for specific error messages (e.g., missing headers, linker errors). Update CocoaPods and native dependencies.

• A problem occurred configuring project ':app'. > Failed to install the following Android SDK packages as some licences have not been accepted.

  cause Android SDK licenses have not been accepted, preventing Gradle from installing necessary components.
  fix Run `sdkmanager --licenses` in your Android SDK tools directory (or equivalent for your OS) and accept all licenses. Ensure your `ANDROID_HOME` environment variable is correctly set.

• Error: EMFILE: too many open files, watch '/path/to/project/node_modules/...' - [Full watchman error message]

  cause Your system's Watchman process is trying to watch too many files, exceeding the OS limit, common in large projects on macOS.
  fix Run `watchman watch-del-all` and then `watchman shutdown-server` in your terminal. For persistent issues, consider increasing your system's file watch limits or optimizing your project structure to reduce the number of watched files.

Warnings

• breaking React Native 0.85.x fully removes the legacy bridge and enforces the New Architecture (Fabric, TurboModules, JSI). Projects not yet migrated will face significant breaking changes, especially for custom native modules or older third-party libraries that rely on the old architecture.
  Fix: Migrate your project to the New Architecture. Follow the official React Native upgrade guide, use `npx react-native upgrade`, and update all custom native modules to use TurboModules and JSI. Ensure all third-party libraries are compatible with the New Architecture, checking the React Native Directory.
• breaking The Jest testing preset has been moved from `react-native` to a separate package, `@react-native/jest-preset`. Tests will fail if the configuration is not updated.
  Fix: Install `@react-native/jest-preset` as a dev dependency (`npm install --save-dev @react-native/jest-preset`) and update `jest.config.js` to use `preset: '@react-native/jest-preset'`.
• breaking Support for older Node.js versions has been dropped. React Native 0.85 requires Node.js 20.19.4 or higher.
  Fix: Upgrade your Node.js installation to a supported version (e.g., using `nvm`). The specified `engines.node` is `^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0`.
• breaking The `Animated` module has undergone significant changes in 0.85, including a new C++ animation backend, which allows animating layout properties with the native driver. While generally an improvement, some existing `Animated` code, especially that relying on previous limitations or workarounds, might require adjustments.
  Fix: Review your `Animated` code, particularly interactions with `useNativeDriver`, and test thoroughly. Adopt the new capabilities where applicable for improved performance. The changelog for 0.85.0-rc.1 mentions a fix for 'unsafe rawPointer access in cloneMultiple' in Animated, indicating internal breaking changes.
• deprecated Deprecated APIs, such as `StyleSheet.absoluteFillObject`, have been entirely removed in 0.85. Using these will result in runtime errors.
  Fix: Update your codebase to remove calls to `StyleSheet.absoluteFillObject` and other removed APIs. Consult the release notes and migration guides for suitable modern replacements.
• gotcha Upgrading React Native versions, particularly minor versions (e.g., 0.84 to 0.85), often involves manual reconciliation of native project files (Xcode `.xcodeproj`, `.xcworkspace`, `Podfile`, `build.gradle`, `AndroidManifest.xml`). Simply updating `package.json` is insufficient.
  Fix: Use the `npx react-native upgrade` command and carefully review the diffs for native project files. It is recommended to back up your `ios/` and `android/` directories before upgrading. Manual merging is frequently required.

Install

• npm install react-native npm
• yarn add react-native yarn
• pnpm add react-native pnpm

Imports

• { View, Text, StyleSheet }
  wrong:

  const { View, Text, StyleSheet } = require('react-native');

  correct:

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

  Standard ES module import syntax is preferred for React Native. CommonJS `require` is generally discouraged in new codebases, especially with modern tooling.
• { Platform, Dimensions }
  wrong:

  import Platform from 'react-native/Libraries/Utilities/Platform';

  correct:

  import { Platform, Dimensions } from 'react-native';

  Utility modules like Platform and Dimensions are imported directly from 'react-native'. Avoid direct imports from internal `Libraries` paths as they are subject to change.
• SafeAreaView
  wrong:

  import SafeAreaView from 'react-native/SafeAreaView';

  correct:

  import { SafeAreaView } from 'react-native';

  Common UI components are named exports from the main 'react-native' package. Direct paths to internal files are brittle.

Quickstart

Basic React Native component demonstrating UI elements, styling, and platform-specific adjustments for a 'Hello World' style application.

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View, Platform, StatusBar } from 'react-native';

const App = () => {
  const os = Platform.OS === 'ios' ? 'iOS' : 'Android';

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <View style={styles.content}>
        <Text style={styles.title}>Welcome to React Native!</Text>
        <Text style={styles.subtitle}>Running on {os} with v0.85.1</Text>
        <Text style={styles.description}>
          This is a basic React Native application. It demonstrates using core components
          like View, Text, and StyleSheet for UI layout and styling.
          The SafeAreaView ensures content is not obscured by device notches or status bars.
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F8F8',
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
    marginBottom: 20,
    textAlign: 'center',
  },
  description: {
    fontSize: 16,
    color: '#555',
    lineHeight: 24,
    textAlign: 'center',
  },
});

export default App;