[Bug]: BottomSheetTextInput crashes with NativeViewGestureHandler on React Native 0.85 Fabric

[ogawaryu]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

Version

v5 (@gorhom/bottom-sheet@5.2.14)

Reanimated Version

v4 (react-native-reanimated@4.4.0)

Note: the current issue form only offers Reanimated up to v3.

Gesture Handler Version

v2 (react-native-gesture-handler@2.31.2)

Platforms

Android

What happened?

Rendering and mounting BottomSheetTextInput on a bare React Native 0.85.3
application using Fabric crashes with:

Error: [Gesture Handler] Failed to obtain view for NativeViewGestureHandler. Note that old API doesn't support functional components.

The crash happens when the bottom sheet containing the input is presented.

BottomSheetTextInput currently imports TextInput from
react-native-gesture-handler. That component uses the legacy
createNativeWrapper / NativeViewGestureHandler API, which fails to obtain
the native view in this setup.

Replacing only the internal rendered input with React Native's native
TextInput, while preserving the existing Bottom Sheet focus, blur, keyboard
state, and node registration logic, fixes the crash:

-import { TextInput } from 'react-native-gesture-handler';
+import type { TextInput as RNTextInputType } from 'react-native';
 import { TextInput as RNTextInput } from 'react-native';

-const ref = useRef<TextInput>(null);
+const ref = useRef<RNTextInputType>(null);

-<TextInput
+<RNTextInput

The application also uses nativewind@4.1.21. A similar previously closed
issue, #2480, contains reports that updating NativeWind resolved the error for
some users. However, replacing the internal Gesture Handler input with the
native React Native input is the workaround that was verified in this React
Native 0.85.3 application.

Related issues:

• [Bug]: Error occurs in Gesture Handler when using BottomSheetTextInput #2480
• [Bug]: BottomSheetTexInput causing a gesture handler error #2254

Reproduction steps

Reproduction steps

1. Create a bare React Native 0.85.3 application with the New Architecture/Fabric enabled.

2. Install:

   {
     "@gorhom/bottom-sheet": "5.2.14",
     "react-native": "0.85.3",
     "react-native-gesture-handler": "2.31.2",
     "react-native-reanimated": "4.4.0",
     "react-native-worklets": "0.9.1",
     "nativewind": "4.1.21"
   }

3. Wrap the application with GestureHandlerRootView and BottomSheetModalProvider.

4. Render a BottomSheetModal containing BottomSheetTextInput.

5. Present the modal.

6. Observe the NativeViewGestureHandler error.

Minimal usage:

import React, { useEffect, useRef } from 'react';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetTextInput,
} from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function Example() {
  const ref = useRef<BottomSheetModal>(null);

  useEffect(() => {
    ref.current?.present();
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <BottomSheetModal ref={ref} snapPoints={['50%']}>
          <BottomSheetTextInput placeholder="Address" />
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

Reproduction sample

The issue form requires an Expo Snack, but this was reproduced in a bare React
Native 0.85.3/Fabric application. A Snack may not reproduce the same native
configuration.

Previous reproduction from the related issue:

https://snack.expo.dev/@seongmin.park/moody-blue-cookie

Relevant log output

Error: [Gesture Handler] Failed to obtain view for NativeViewGestureHandler. Note that old API doesn't support functional components.
    at componentDidMount (createHandler.tsx:245:24)
    at react_stack_bottom_frame (ReactFabric-dev.js:17153:39)
    at run (native)

Environment

React Native: 0.85.3
React: 19.2.3
@gorhom/bottom-sheet: 5.2.14
react-native-gesture-handler: 2.31.2
react-native-reanimated: 4.4.0
react-native-worklets: 0.9.1
nativewind: 4.1.21
Architecture: New Architecture / Fabric
Platform: Android
App type: Bare React Native

Reproduction sample

https://snack.expo.dev/@ryuichi.ogawa/bottom-sheet---issue-reproduction-template

Relevant log output

[github-actions]

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