react-native-safe-area-context/jest/mock incompat with RN 0.88

[leotm]

Description

The template relies on

template/template/package.json

Line 16 in 56b77ae

"react-native-safe-area-context": "^5.5.2"

external consumers likely rely on it as a devDep too for the jest mock when unit testing

RN 0.88 Strict TS API breaks the lib types on both TS 6 and TS 7

spotted this upgrading RN 0.87 nightly to 0.88 nightly

• React Native 0.88.0-nightly leotm/react-native-template-new-architecture#2031
• Upgrade React Native from 0.87.0-nightly to 0.88.0-nightly leotm/react-native-template-new-architecture#2040
• react-native-safe-area-context types incompat with 0.88.0-nightly leotm/react-native-template-new-architecture#2041

and tracking upstream

• React Native 0.88 Strict TS API Incompatibility AppAndFlow/react-native-safe-area-context#741
  • [RN 0.88] Add modern exports field to package.json AppAndFlow/react-native-safe-area-context#742
    • feat: add modern package.json exports field AppAndFlow/react-native-safe-area-context#740
  • [RN 0.88] Replace deep RN imports with public API AppAndFlow/react-native-safe-area-context#743
    • fix: replace deep RN imports with public API AppAndFlow/react-native-safe-area-context#744

once either change lands and new ver published, this will be fixed
(optionally bump template ^5.5.2 to ^5.x.x)

otherwise for time being users can opt out via tsconfig

// tsconfig.json
{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    ...
    "customConditions": ["react-native-legacy-deep-imports"]
  }
}

Steps to reproduce

1. npx @react-native-community/cli@latest init MyApp --version nightly
2. add setupFiles: ['./jest/setup.ts'], to jest.config.js
3. add import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock' to setup.ts
4. yarn tsc

optional: bump TS 6 to TS 7 for the tsgo compiler

React Native Community Template Version

0.88.0-nightly

Affected Platforms

Build - Linux, Build - Windows, Build - MacOS

Output of npx @react-native-community/cli@latest info

System:
  OS: Windows 11 10.0.26200
  CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
  Memory: 5.50 GB / 31.79 GB
Binaries:
  Node:
    version: 24.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 11.16.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "34"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
    Android NDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java:
    version: 26.0.1
    path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  Ruby:
    version: 3.4.9
    path: C:\Ruby34-x64\bin\ruby.EXE
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: 20.2.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.88.0-nightly-20260721-7bb31ff7b
    wanted: nightly
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

yarn run tsc
node_modules/react-native-safe-area-context/src/SafeArea.types.ts:46:3 - error TS2344: Type 'HostComponent<NativeProps>' does not satisfy the constraint 'abstract new (...args: any) => any'.
  Type 'HostComponent<NativeProps>' provides no match for the signature 'new (...args: any): any'.

46   typeof NativeSafeAreaView
     ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/react-native-safe-area-context/src/SafeAreaContext.tsx:122:24 - error TS7006: Parameter 'e' implicitly has an 'any' type.

122       onInsetsChange={(e) => {
                           ~

node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaProvider.ts:4:8 - error TS2307: Cannot find module 'react-native/Libraries/Types/CodegenTypes' or its corresponding type declarations.

4 } from 'react-native/Libraries/Types/CodegenTypes';
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaProvider.ts:5:36 - error TS2307: Cannot find module 'react-native/Libraries/Utilities/codegenNativeComponent' or its corresponding type declarations.

5 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaView.ts:1:36 - error TS2307: Cannot find module 'react-native/Libraries/Utilities/codegenNativeComponent' or its corresponding type declarations.

1 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaView.ts:2:34 - error TS2307: Cannot find module 'react-native/Libraries/Types/CodegenTypes' or its corresponding type declarations.

2 import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 6 errors in 4 files.

Errors  Files
     1  node_modules/react-native-safe-area-context/src/SafeArea.types.ts:46
     1  node_modules/react-native-safe-area-context/src/SafeAreaContext.tsx:122
     2  node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaProvider.ts:4
     2  node_modules/react-native-safe-area-context/src/specs/NativeSafeAreaView.ts:1

Reproducer

https://github.com/leotm/react-native-template-new-architecture, disable react-native-legacy-deep-imports

Screenshots and Videos

No response

[cortinico]

RN 0.88 Strict TS API breaks the lib types on both TS 6 and TS 7

cc @huntie

[huntie]

Coming in with a fix for this soon hopefully. Thanks for raising 🙏🏻