[Bug]: BottomSheetTextInput crashes on React Native Web with "currentlyFocusedInput is not a function"

[danoc]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Web

What happened?

BottomSheetTextInput throws a TypeError on React Native Web when the bottom sheet closes after interacting with the text input. I think the error occurs because the component uses TextInput.State.currentlyFocusedInput(), which is an undocumented React Native API that doesn't exist on React Native Web.

Reproduction steps

1. Open the Expo Snack on Web platform
2. Type something in the text input
3. Click "Submit (closes sheet)" button
4. Error occurs when the sheet closes (see DevTools console)

Reproduction sample

https://snack.expo.dev/@danoc/currentlyfocusedinput-bug-in-bottomsheettextinput

Relevant log output

[Error] TypeError: s.TextInput.State.currentlyFocusedInput is not a function. (In 's.TextInput.State.currentlyFocusedInput()', 's.TextInput.State.currentlyFocusedInput' is undefined)
	reportError
	qc (index-8bf6a2bd86940ec62a054dce85973a91.js:40:127466)
	(anonymous function) (index-8bf6a2bd86940ec62a054dce85973a91.js:40:132480)
	Hn (index-8bf6a2bd86940ec62a054dce85973a91.js:40:21047)
	Jc (index-8bf6a2bd86940ec62a054dce85973a91.js:40:128753)
	kd (index-8bf6a2bd86940ec62a054dce85973a91.js:40:159018)
	yd (index-8bf6a2bd86940ec62a054dce85973a91.js:40:158840)

[Error] TypeError: null is not an object (evaluating 'se.apply')
	(anonymous function) (index-8bf6a2bd86940ec62a054dce85973a91.js:2504:12311)
	reportError
	qc (index-8bf6a2bd86940ec62a054dce85973a91.js:40:127466)
	(anonymous function) (index-8bf6a2bd86940ec62a054dce85973a91.js:40:132480)
	Hn (index-8bf6a2bd86940ec62a054dce85973a91.js:40:21047)
	Jc (index-8bf6a2bd86940ec62a054dce85973a91.js:40:128753)
	kd (index-8bf6a2bd86940ec62a054dce85973a91.js:40:159018)
	yd (index-8bf6a2bd86940ec62a054dce85973a91.js:40:158840)

[thalmann-christof]

+1, we are having the same issue!

As a workaround, we are using the BottomSheetTextInput only on .native, and for web we continue to use the TextInput from react-native. We need the BottomSheetTextInput only for its keyboard handling logic, so it is perfectly fine to use the workaround for web. Still, it would be nice if this issue were resolved and we could remove that workaround.

[maciejrrr]

+1

[sintanial]

This is my patch of a problem, you can use it with npx patch-package

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx
index 861d276..f56949d 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx
@@ -44,9 +44,9 @@ const BottomSheetTextInputComponent = forwardRef<
   const handleOnBlur = useCallback(
     (args: NativeSyntheticEvent<TextInputFocusEventData>) => {
       const keyboardState = animatedKeyboardState.get();
-      const currentFocusedInput = findNodeHandle(
-        RNTextInput.State.currentlyFocusedInput()
-      );
+      const currentFocusedInput =
+        typeof RNTextInput.State.currentlyFocusedInput === 'function'
+          ? findNodeHandle(RNTextInput.State.currentlyFocusedInput())
+          : null;
 
       /**
        * we need to make sure that we only remove the target

[github-actions[bot]]

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.

[danoc]

This is still an issue.

[sintanial]

@danoc If it's possible u can make a pr from my patch changes. I don't have enough time to do this my self :(((

[github-actions[bot]]

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.

[danoc]

I'm unable to make the patch at the moment, but this is not stale.