Skip to content

fix(web): React 19 compatibility and type safety for findNodeHandle#2595

Merged
gorhom merged 1 commit intogorhom:masterfrom
YevheniiKotyrlo:fix/react-19-findnodehandle-web
Apr 8, 2026
Merged

fix(web): React 19 compatibility and type safety for findNodeHandle#2595
gorhom merged 1 commit intogorhom:masterfrom
YevheniiKotyrlo:fix/react-19-findnodehandle-web

Conversation

@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor

Summary

Fixes React 19 compatibility issue and improves type safety in the web findNodeHandle utility.

Problem

React 19 Crash (#2366)

React 19 removed findHostInstance_DEPRECATED and changed when findNodeHandle can return null. With Expo SDK 53+ and React 19, the function crashes when componentOrHandle is null or undefined during component lifecycle transitions (mount/unmount).

Web Platform Crash (#2237)

On web, accessing componentOrHandle.getNativeScrollRef() or componentOrHandle._scrollRef without null checks can crash when the component is unmounted or during hot reload.

Type Safety

The existing code used @ts-ignore to access undocumented React Native scroll component internals, hiding potential type errors.

Solution

  1. Early null check - Return null immediately if componentOrHandle is nullish, preventing crashes in React 19

  2. Proper TypeScript interface - Replace @ts-ignore with a documented type bridge:

    interface ScrollComponentInternals {
      getNativeScrollRef?: () => NodeHandle | null;
      _scrollRef?: NodeHandle | null;
    }
  3. Runtime type checking - Use typeof scrollable.getNativeScrollRef === 'function' before calling, rather than relying on try/catch for flow control

  4. Explicit return type - Add proper return type annotation for better type inference

Related Issues

Testing

Tested with:

  • React 19 + Expo SDK 53
  • Web platform (React Native Web)
  • Hot reload scenarios

@github-actions
Copy link
Copy Markdown

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor Author

up

@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor Author

Friendly bump — this PR is still relevant with the latest @gorhom/bottom-sheet v5.2.8. The findNodeHandle null check prevents a crash on React 19 + Expo SDK 53+, and the web platform guard prevents crashes during hot reload. Happy to rebase if needed.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 2, 2026

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor Author

up

TwanLuttik added a commit to TwanLuttik/react-native-bottom-sheet that referenced this pull request Apr 8, 2026
- Fix gorhom#2642: isLayoutCalculated logic bug (|| should be &&) causing incorrect detent positions
- Fix gorhom#2498: prevent closing two modals at once by guarding splice with sheetIndex !== -1
- Fix gorhom#2342: use Math.floor on animatedIndex to fix Android freeze with reduced animations
- Fix gorhom#2595: React 19 compatibility and type safety for findNodeHandle web utility
@gorhom gorhom self-assigned this Apr 8, 2026
- Add early null check for componentOrHandle (React 19 fix)
- Replace @ts-ignore with proper TypeScript interface for scroll internals
- Add explicit return type annotation
- Use runtime type checking instead of relying on try/catch for flow control

Fixes gorhom#2366, gorhom#2237
@gorhom gorhom force-pushed the fix/react-19-findnodehandle-web branch from 583e598 to a1f25fe Compare April 8, 2026 19:56
@gorhom gorhom merged commit 3d6c2da into gorhom:master Apr 8, 2026
@gorhom
Copy link
Copy Markdown
Owner

gorhom commented Apr 8, 2026

thanks @YevheniiKotyrlo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants