React Native 0.80: Stabilizing the JavaScript API – A Migration Guide

By ● min read

<h2>Overview</h2><p>React Native 0.80 introduces two foundational changes aimed at making the JavaScript API more stable and type-safe: the <strong>deprecation of deep imports</strong> and the introduction of an <strong>opt-in Strict TypeScript API</strong>. These updates are part of a long-term effort to define a clear, predictable public API surface for the <code>react-native</code> package, reducing breaking changes and improving developer experience. In this guide, you will learn what these changes mean, why they matter, and how to migrate your existing projects.</p><figure style="margin:20px 0"><img src="https://picsum.photos/seed/4142542237/800/450" alt="React Native 0.80: Stabilizing the JavaScript API – A Migration Guide" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px"></figcaption></figure><h2>Prerequisites</h2><p>Before you begin, ensure you have:</p><ul><li>A React Native project (version 0.80 or later).</li><li>Node.js 18+ installed.</li><li>Basic familiarity with JavaScript/TypeScript and React Native.</li><li>ESLint configured (optional but recommended for detecting deprecated imports).</li></ul><h2>Step-by-Step Migration Instructions</h2><h3>1. Understanding the Changes</h3><p>Historically, React Native allowed <strong>deep imports</strong> from internal paths like <code>react-native/Libraries/Alert/Alert</code>. These imports bypass the public API and depend on implementation details that may change without notice. Starting in 0.80, deep imports trigger deprecation warnings (via ESLint and console). The eventual goal is to remove them entirely in 0.82. Simultaneously, React Native is moving from hand-maintained (Flow‑based) TypeScript types to a <strong>generated, stricter TypeScript API</strong>. This opt‑in feature replaces community‑contributed types with a more accurate and future‑proof baseline.</p><h3>2. Updating Deep Imports to Root Imports</h3><p>Replace any import that uses a subpath under <code>react-native</code> with the equivalent root import. For example:</p><pre><code>// Before (deep import) import { Alert } from 'react-native/Libraries/Alert/Alert'; // After (root import) import { Alert } from 'react-native';</code></pre><p>Common deep imports to look for include:</p><ul><li><code>react-native/Libraries/.../Component</code></li><li><code>react-native/Libraries/Utilities/...</code></li><li><code>react-native/Libraries/Type/...</code></li></ul><p>If a component or utility is not exported at the root, it may be an internal API not intended for public use. In such cases, check the <a href='#feedback'>community feedback thread</a> or consider alternative implementations.</p><p>To help identify all deep imports, run ESLint with the <code>@react-native/eslint-plugin</code> and enable the rule <code>react-native/no-unused-styles</code> or the dedicated deep-import rule (if available). Alternatively, search your codebase for patterns like <code>from 'react-native/Libraries/</code>.</p><h3>3. Opting Into the Strict TypeScript API</h3><p>The Strict TypeScript API is opt‑in in 0.80 and will become the default in a future release. To enable it, modify your <code>tsconfig.json</code>:</p><pre><code>{ "compilerOptions": { "strict": true, "paths": { "react-native": ["./node_modules/react-native/index"], "react-native/*": ["./node_modules/react-native/*"] }, // Additional required settings "moduleResolution": "node", "target": "esnext", "jsx": "react-native" }, "include": ["src"] }</code></pre><p>Note: The exact configuration may evolve. Refer to the <a href='https://reactnative.dev/docs/typescript' target='_blank'>official TypeScript documentation</a> for the most current settings. The key is to enable the <code>path</code> overrides that point to the generated type definitions provided by React Native.</p><p>Once configured, run <code>tsc --noEmit</code> to check for type errors. The new API baseline may surface stricter type requirements, such as correct generic usage or non‑optional props. Update your code to comply.</p><h3>4. Testing the Migration</h3><p>After updating imports and TypeScript settings:</p><ol><li>Clear caches: <code>npx react-native start --reset-cache</code></li><li>Rebuild your app: <code>npx react-native run-android</code> or <code>npx react-native run-ios</code></li><li>Run <code>npx tsc --noEmit</code> to verify type correctness.</li><li>Run your existing test suite.</li></ol><p>Pay close attention to any <strong>TypeScript errors</strong> that appear after enabling the Strict TypeScript API—they indicate either missing type definitions or genuine type mismatches that need fixing.</p><h3>5. Providing Feedback (if a needed API is missing)</h3><p>If you discover that an API you rely on is not exported from the root of <code>react-native</code> after migrating, participate in the <a href='https://github.com/reactwg/react-native-new-architecture/discussions' target='_blank'>community feedback thread</a>. The React Native team is finalizing the public API surface and welcomes input before deep imports are removed.</p><h2 id='common-mistakes'>Common Mistakes</h2><h3>Forgetting to update all deep imports</h3><p>Searching only by <code>react-native/Libraries</code> may miss relative or dynamic imports. Use a comprehensive search tool (e.g., <code>grep -r "from 'react-native/Libraries"</code> in your source directory) and inspect any third‑party libraries that may have deep imports.</p><h3>Misconfiguring tsconfig paths</h3><p>Incorrect path mappings can lead to unresolved modules or type resolution failures. Ensure the <code>paths</code> entries point to the correct location within <code>node_modules/react-native</code>. Always verify by running <code>tsc</code> after changes.</p><h3>Ignoring deprecation warnings</h3><p>In 0.80, deep imports still work but produce warnings. Do not suppress them—they will become errors in 0.82. Fix all warnings now to avoid future breakage.</p><h3>Assuming all types are now automatically accurate</h3><p>The Strict TypeScript API improves type safety but does not guarantee perfect types for all third‑party components or dynamic patterns. You may still need to add type assertions or refine your own types.</p><h2>Summary</h2><p>React Native 0.80 introduces two major changes: deprecation of deep imports (with removal planned for 0.82) and an opt‑in Strict TypeScript API that provides a more accurate, generated type baseline. By migrating now—updating all deep imports to root imports and enabling the new TypeScript configuration—you align your project with a more stable and predictable API. Key steps: replace subpath imports (e.g., <code>from 'react-native/Libraries/…'</code>), modify <code>tsconfig.json</code> to point to the new type definitions, test thoroughly, and provide feedback if needed. These changes lay the groundwork for a future where React Native’s JavaScript API is clearly defined and reliably typed, reducing surprises in upgrades.</p>