Fix reanimated freezing Keyboard module

[janicduplessis]

Motivation

Reanimated captures and freezes the whole Keyboard module since we reference it from a worklet. To avoid this we can create the function only once at the top of the module from the JS context. This seems to happen only with reanimated v3.

[suyundukov]

Duplicate #1354?

[janicduplessis]

I think so, just slightly different fixes

[SamuelScheit]

This PR fixes the problem I also had and tried to fix in #1354 (duplicate).
@gorhom can you merge this PR?

[malikzype]

@gorhom When can we expect this to be merged?

[gorhom]

thanks @janicduplessis @SamuelScheit for submitting CRs to address this issue

[RichardLindhout]

@janicduplessis still gives the same error for me?

[computerjazz]

yeah same -- still crashes on 4.4.6.
I ended up patching:

 
-const dismissKeyboardOnJs = runOnJS(Keyboard.dismiss);
 
 export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
   () => {
@@ -46,6 +45,13 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
     } = useBottomSheetInternal();
     //#endregion
 
+    // Fixed in v5 -- see: 
+    // https://github.com/software-mansion/react-native-reanimated/issues/4201
+    // https://github.com/gorhom/react-native-bottom-sheet/pull/1354
+    const dismissKeyboard = () => {
+      Keyboard.dismiss();
+    }
+
     //#region gesture methods
     const handleOnStart: GestureEventHandlerCallbackType<GestureEventContextType> =
       useWorkletCallback(
@@ -298,7 +304,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
                 absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value
               )
             ) {
-              dismissKeyboardOnJs();
+              runOnJS(dismissKeyboard)();
             }
           }

[CarlMenke]

Still getting the error on 4.4.6. I've got : "react-native-reanimated": "~2.14.4" and "@gorhom/bottom-sheet": "^4.4.6".
it seems like commit 94cf11e broke it when he fixed the keyboard freezing issue, that PR may need some review.

[pjk5]

This fix seems to have broken the drag to dismiss functionality of BottomSheetModal when there is a keyboard visible, at least for react-native-reanimated 2.x. I got the following error: "Tried to synchronously call function {dismiss} from a different thread." Likely equally true for regular BottomSheet component as well, but I haven't tested.

Works:
"@gorhom/bottom-sheet": "4.4.5" + "react-native-reanimated": "2.14.4"

Doesn't work:
"@gorhom/bottom-sheet": "4.4.6" + "react-native-reanimated": "2.14.4"

The same is true for the alpha version of the library (5.0.0-alpha.1).

[ansh]

Why has this issue been closed? The problem still exists.

[suyundukov]

@ansh this is pull request and it was merged. You can't reopen same pull request. If the problem still exists, you should open an issue.