{"id":11817,"library":"react-native","title":"React Native","description":"React Native is an open-source UI software framework for developing cross-platform native mobile applications for iOS and Android using JavaScript and React. It enables developers to write code once and deploy it to multiple platforms, leveraging native UI components for optimal performance and user experience. The current stable version is 0.85.1, with new minor versions typically released every two months and frequent patch releases, indicating an active and rapidly evolving development cycle. Key differentiators include its declarative component-based UI paradigm inherited from React, direct access to native device features through JavaScript Interface (JSI), and a vast ecosystem of third-party libraries. Unlike hybrid webview solutions, React Native renders actual native UI elements, which contributes to a more authentic native look and feel, and starting from 0.82, it exclusively uses the New Architecture, removing the legacy bridge for improved performance and concurrency.","status":"active","version":"0.85.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react-native","tags":["javascript","react","react-native","android","ios","mobile","cross-platform","app-framework","mobile-development","typescript"],"install":[{"cmd":"npm install react-native","lang":"bash","label":"npm"},{"cmd":"yarn add react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library is fundamental for defining components and managing state.","package":"react","optional":false},{"reason":"Provides TypeScript type definitions for the React library.","package":"@types/react","optional":true},{"reason":"Required for Jest testing configuration, extracted to a separate package in 0.85.x.","package":"@react-native/jest-preset","optional":true}],"imports":[{"note":"Standard ES module import syntax is preferred for React Native. CommonJS `require` is generally discouraged in new codebases, especially with modern tooling.","wrong":"const { View, Text, StyleSheet } = require('react-native');","symbol":"{ View, Text, StyleSheet }","correct":"import { View, Text, StyleSheet } from 'react-native';"},{"note":"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.","wrong":"import Platform from 'react-native/Libraries/Utilities/Platform';","symbol":"{ Platform, Dimensions }","correct":"import { Platform, Dimensions } from 'react-native';"},{"note":"Common UI components are named exports from the main 'react-native' package. Direct paths to internal files are brittle.","wrong":"import SafeAreaView from 'react-native/SafeAreaView';","symbol":"SafeAreaView","correct":"import { SafeAreaView } from 'react-native';"}],"quickstart":{"code":"import React from 'react';\nimport { SafeAreaView, StyleSheet, Text, View, Platform, StatusBar } from 'react-native';\n\nconst App = () => {\n  const os = Platform.OS === 'ios' ? 'iOS' : 'Android';\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <StatusBar barStyle=\"dark-content\" />\n      <View style={styles.content}>\n        <Text style={styles.title}>Welcome to React Native!</Text>\n        <Text style={styles.subtitle}>Running on {os} with v0.85.1</Text>\n        <Text style={styles.description}>\n          This is a basic React Native application. It demonstrates using core components\n          like View, Text, and StyleSheet for UI layout and styling.\n          The SafeAreaView ensures content is not obscured by device notches or status bars.\n        </Text>\n      </View>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F8F8F8',\n    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,\n  },\n  content: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  title: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    marginBottom: 10,\n    color: '#333',\n    textAlign: 'center',\n  },\n  subtitle: {\n    fontSize: 18,\n    color: '#666',\n    marginBottom: 20,\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: 16,\n    color: '#555',\n    lineHeight: 24,\n    textAlign: 'center',\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"Basic React Native component demonstrating UI elements, styling, and platform-specific adjustments for a 'Hello World' style application."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=0.82.0"},{"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'`.","message":"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.","severity":"breaking","affected_versions":">=0.85.0"},{"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`.","message":"Support for older Node.js versions has been dropped. React Native 0.85 requires Node.js 20.19.4 or higher.","severity":"breaking","affected_versions":">=0.85.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.85.0-rc.1"},{"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.","message":"Deprecated APIs, such as `StyleSheet.absoluteFillObject`, have been entirely removed in 0.85. Using these will result in runtime errors.","severity":"deprecated","affected_versions":">=0.85.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.60.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"The entry point component of your React Native application was not correctly registered with `AppRegistry`.","error":"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."},{"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.","cause":"Metro bundler cannot find the `react-native` package, usually due to incorrect `node_modules`, cache issues, or symlink problems.","error":"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."},{"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.","cause":"A general Xcode build failure on iOS, often related to CocoaPods, outdated dependencies, or project configuration.","error":"Command failed with exit code 65: xcodebuild ..."},{"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.","cause":"Android SDK licenses have not been accepted, preventing Gradle from installing necessary components.","error":"A problem occurred configuring project ':app'. > Failed to install the following Android SDK packages as some licences have not been accepted."},{"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.","cause":"Your system's Watchman process is trying to watch too many files, exceeding the OS limit, common in large projects on macOS.","error":"Error: EMFILE: too many open files, watch '/path/to/project/node_modules/...' - [Full watchman error message]"}],"ecosystem":"npm"}