fix: fixed the multiline issue on BottomSheetTextInput #411

gorhom · Aug 6, 2021 · e21d676 · e21d676
1 parent d421f09
commit e21d676
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx b/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx
@@ -1,6 +1,5 @@
 import React, { memo, useCallback, forwardRef } from 'react';
 import { TextInput } from 'react-native-gesture-handler';
-import { runOnUI } from 'react-native-reanimated';
 import { useBottomSheetInternal } from '../../hooks';
 import type { BottomSheetTextInputProps } from './types';
 
@@ -15,9 +14,7 @@ const BottomSheetTextInputComponent = forwardRef<
   //#region callbacks
   const handleOnFocus = useCallback(
     args => {
-      runOnUI(() => {
-        shouldHandleKeyboardEvents.value = true;
-      })();
+      shouldHandleKeyboardEvents.value = true;
       if (onFocus) {
         onFocus(args);
       }
@@ -26,9 +23,7 @@ const BottomSheetTextInputComponent = forwardRef<
   );
   const handleOnBlur = useCallback(
     args => {
-      runOnUI(() => {
-        shouldHandleKeyboardEvents.value = false;
-      })();
+      shouldHandleKeyboardEvents.value = false;
       if (onBlur) {
         onBlur(args);
       }

diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import {
   runOnUI,
+  useAnimatedReaction,
   useSharedValue,
   useWorkletCallback,
 } from 'react-native-reanimated';
@@ -36,12 +37,19 @@ export const useKeyboard = () => {
   const keyboardAnimationEasing =
     useSharedValue<KeyboardEventEasing>('keyboard');
   const keyboardAnimationDuration = useSharedValue(500);
+  const temporaryCachedKeyboardEvent = useSharedValue<any>([]);
   //#endregion
 
   //#region worklets
   const handleKeyboardEvent = useWorkletCallback(
     (state, height, duration, easing) => {
       if (state === KEYBOARD_STATE.SHOWN && !shouldHandleKeyboardEvents.value) {
+        /**
+         * if the keyboard event was fired before the `onFocus` on TextInput,
+         * then we cache the input, and wait till the `shouldHandleKeyboardEvents`
+         * to be updated then fire this function again.
+         */
+        temporaryCachedKeyboardEvent.value = [state, height, duration, easing];
         return;
       }
       keyboardHeight.value =
@@ -53,6 +61,7 @@ export const useKeyboard = () => {
       keyboardAnimationDuration.value = duration;
       keyboardAnimationEasing.value = easing;
       keyboardState.value = state;
+      temporaryCachedKeyboardEvent.value = [];
     },
     []
   );
@@ -99,6 +108,21 @@ export const useKeyboard = () => {
       );
     };
   }, [handleKeyboardEvent]);
+
+  /**
+   * This reaction is needed to handle the issue with multiline text input.
+   *
+   * @link https://github.com/gorhom/react-native-bottom-sheet/issues/411
+   */
+  useAnimatedReaction(
+    () => shouldHandleKeyboardEvents.value,
+    result => {
+      const params = temporaryCachedKeyboardEvent.value;
+      if (result && params.length > 0) {
+        handleKeyboardEvent(params[0], params[1], params[2], params[3]);
+      }
+    }
+  );
   //#endregion
 
   return {