How to Migrate to React Native 0.80's New JavaScript API: Deep Imports Deprecation & Strict TypeScript

Introduction

React Native 0.80 introduces two major changes to its JavaScript API: the deprecation of deep imports and an opt-in Strict TypeScript API. 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.

What You Need

• A React Native project upgraded to version 0.80 or later.
• Basic knowledge of JavaScript/TypeScript and React Native imports.
• A code editor with ESLint (optional but helpful for detecting deep imports).
• If using TypeScript, a tsconfig.json file in your project.

Step-by-Step Guide

Step 1: Understand the Changes

React Native 0.80 deprecates deep imports — importing directly from internal paths like react-native/Libraries/Alert/Alert. Instead, all public exports must come from the root react-native package. Additionally, a new Strict TypeScript API is available, which generates types from source rather than relying on manually maintained definitions. This improves type accuracy and future-proofs your code.

Step 2: Identify Deep Imports in Your Code

Search your project for any import statements that include subpaths from react-native. Common patterns include:

• import { ... } from 'react-native/Libraries/...';
• import type { ... } from 'react-native/Libraries/...';

You can run ESLint with the latest React Native rules, or manually grep your codebase. Look for strings like from 'react-native/Libraries. Also check third-party libraries; they may need updating separately.

Step 3: Replace Deep Imports with Root Imports

For each deep import you find, change it to import the same export from react-native directly. For example:

// Before (deep import)
import { Alert } from 'react-native/Libraries/Alert/Alert';

// After (root import)
import { Alert } from 'react-native';

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 feedback section for how to report missing APIs.

Repeat this for all files, including type imports:

// Before
import type { SomeType } from 'react-native/Libraries/SomeModule/SomeType';

// After
import type { SomeType } from 'react-native';

Step 4: Handle Warnings and Errors

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.

Step 5: Opt in to the Strict TypeScript API (Optional but Recommended)

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.

To opt in, update your tsconfig.json file as follows:

{
  "compilerOptions": {
    "types": ["react-native"]
  }
}

Add or modify the types field under compilerOptions. If you have other type definitions, include them too. This tells TypeScript to use the new generated API baseline for react-native.

Step 6: Verify and Test

Run TypeScript compilation (npx tsc --noEmit) 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.

Tips for a Smooth Migration

• Start early: Deep imports will be removed entirely in React Native 0.82. Begin migrating now to avoid last-minute pressure.
• Use the feedback thread: If an export you need is missing from the root, share your feedback to help the community finalize the public API.
• Double-check third-party libraries: Some packages may still use deep imports. Consider updating them or filing issues with their maintainers.
• Gradual adoption: You can enable Strict TypeScript API on a per-file basis by using @ts-strict-ignore comments temporarily, but aim for full adoption.
• Stay informed: Follow React Native release notes for any further changes to the API stability.

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.