How to Migrate to React Native 0.80's New JavaScript API: Deep Imports Deprecation & Strict TypeScript
By • min read
<h2>Introduction</h2><p>React Native 0.80 introduces two major changes to its JavaScript API: the deprecation of deep imports and an opt-in <strong>Strict TypeScript API</strong>. This step-by-step guide will help you update your codebase to comply with these changes, ensuring a smoother migration path and future stability. By the end, you'll have eliminated deep import warnings and, if you use TypeScript, activated a stricter, more accurate type system.</p><figure style="margin:20px 0"><img src="https://picsum.photos/seed/1803059258/800/450" alt="How to Migrate to React Native 0.80's New JavaScript API: Deep Imports Deprecation & Strict TypeScript" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px"></figcaption></figure><h2>What You Need</h2><ul><li>A React Native project upgraded to version 0.80 or later.</li><li>Basic knowledge of JavaScript/TypeScript and React Native imports.</li><li>A code editor with ESLint (optional but helpful for detecting deep imports).</li><li>If using TypeScript, a <code>tsconfig.json</code> file in your project.</li></ul><h2>Step-by-Step Guide</h2><h3 id="step1">Step 1: Understand the Changes</h3><p>React Native 0.80 deprecates <em>deep imports</em> — importing directly from internal paths like <code>react-native/Libraries/Alert/Alert</code>. Instead, all public exports must come from the root <code>react-native</code> package. Additionally, a new <strong>Strict TypeScript API</strong> is available, which generates types from source rather than relying on manually maintained definitions. This improves type accuracy and future-proofs your code.</p><h3 id="step2">Step 2: Identify Deep Imports in Your Code</h3><p>Search your project for any import statements that include subpaths from <code>react-native</code>. Common patterns include:</p><ul><li><code>import { ... } from 'react-native/Libraries/...';</code></li><li><code>import type { ... } from 'react-native/Libraries/...';</code></li></ul><p>You can run ESLint with the latest React Native rules, or manually grep your codebase. Look for strings like <code>from 'react-native/Libraries</code>. Also check third-party libraries; they may need updating separately.</p><h3 id="step3">Step 3: Replace Deep Imports with Root Imports</h3><p>For each deep import you find, change it to import the same export from <code>react-native</code> directly. 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>If a specific export is not available at the root, you may need to wait for it to be exposed or use an alternative. Check the <a href="#step6">feedback section</a> for how to report missing APIs.</p><p>Repeat this for all files, including type imports:</p><pre><code>// Before
import type { SomeType } from 'react-native/Libraries/SomeModule/SomeType';
// After
import type { SomeType } from 'react-native';</code></pre><h3 id="step4">Step 4: Handle Warnings and Errors</h3><p>After updating imports, run your app and observe the console. React Native 0.80 will print deprecation warnings for any remaining deep imports. Also run ESLint to catch any that you missed. Fix all warnings until none remain.</p><h3 id="step5">Step 5: Opt in to the Strict TypeScript API (Optional but Recommended)</h3><p>If your project uses TypeScript, you can enable stricter type checking that aligns with React Native's source types. This is a one-time breaking change that will become default in a future version.</p><p>To opt in, update your <code>tsconfig.json</code> file as follows:</p><pre><code>{
"compilerOptions": {
"types": ["react-native"]
}
}</code></pre><p>Add or modify the <code>types</code> field under <code>compilerOptions</code>. If you have other type definitions, include them too. This tells TypeScript to use the new generated API baseline for <code>react-native</code>.</p><h3 id="step6">Step 6: Verify and Test</h3><p>Run TypeScript compilation (<code>npx tsc --noEmit</code>) to check for type errors. The new API may flag previously undetected issues. Fix any type mismatches according to the updated definitions. Run your app's full test suite to ensure no runtime regressions.</p><h2>Tips for a Smooth Migration</h2><ul><li><strong>Start early:</strong> Deep imports will be removed entirely in React Native 0.82. Begin migrating now to avoid last-minute pressure.</li><li><strong>Use the feedback thread:</strong> If an export you need is missing from the root, <a href="https://github.com/react-native-community/discussions-and-proposals/discussions/608" target="_blank">share your feedback</a> to help the community finalize the public API.</li><li><strong>Double-check third-party libraries:</strong> Some packages may still use deep imports. Consider updating them or filing issues with their maintainers.</li><li><strong>Gradual adoption:</strong> You can enable Strict TypeScript API on a per-file basis by using <code>@ts-strict-ignore</code> comments temporarily, but aim for full adoption.</li><li><strong>Stay informed:</strong> Follow React Native release notes for any further changes to the API stability.</li></ul><p>By following these steps, you'll align your project with React Native's evolving best practices, ensuring better maintainability and type safety for the future.</p>