react-native-keyboard-controller 1.9.5 → 1.10.0

package/lib/typescript/types.d.ts

@@ -16,20 +16,25 @@ export type FocusedInputLayoutChangedEvent = {
         absoluteY: number;
     };
 };
+export type FocusedInputTextChangedEvent = {
+    text: string;
+};
 export type EventWithName<T> = {
     eventName: string;
 } & T;
 export type KeyboardControllerProps = {
-    enabled?: boolean;
     onKeyboardMoveStart?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onKeyboardMove?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onKeyboardMoveEnd?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onKeyboardMoveInteractive?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
+    onFocusedInputTextChanged?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
     onKeyboardMoveReanimated?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onFocusedInputLayoutChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>) => void;
+    onFocusedInputTextChangedReanimated?: (e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>) => void;
     statusBarTranslucent?: boolean;
     navigationBarTranslucent?: boolean;
+    enabled?: boolean;
 } & ViewProps;
 export type KeyboardGestureAreaProps = {
     interpolator: 'ios' | 'linear';
@@ -48,6 +53,7 @@ export type KeyboardGestureAreaProps = {
 export type KeyboardControllerModule = {
     setDefaultMode: () => void;
     setInputMode: (mode: number) => void;
+    dismiss: () => void;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
 };
@@ -67,9 +73,12 @@ export type KeyboardHandlerHook<TContext, Event> = (handlers: {
     onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;
     onKeyboardMoveInteractive?: (e: NativeEvent, context: TContext) => void;
 }, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
-export type FocusedInputHandlerHook<TContext, Event> = (handlers: {
+export type FocusedInputLayoutHandlerHook<TContext, Event> = (handlers: {
     onFocusedInputLayoutChanged?: (e: FocusedInputLayoutChangedEvent, context: TContext) => void;
 }, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputTextHandlerHook<TContext, Event> = (handlers: {
+    onFocusedInputTextChanged?: (e: FocusedInputTextChangedEvent, context: TContext) => void;
+}, dependencies?: unknown[]) => (e: NativeSyntheticEvent<Event>) => void;
 export type Handlers<T> = Record<string, T | undefined>;
 export type KeyboardHandler = Partial<{
     onStart: (e: NativeEvent) => void;
@@ -78,3 +87,7 @@ export type KeyboardHandler = Partial<{
     onInteractive: (e: NativeEvent) => void;
 }>;
 export type KeyboardHandlers = Handlers<KeyboardHandler>;
+export type FocusedInputHandler = Partial<{
+    onChangeText: (e: FocusedInputTextChangedEvent) => void;
+}>;
+export type FocusedInputHandlers = Handlers<FocusedInputHandler>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.9.5",
+  "version": "1.10.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,9 +41,12 @@
     "react-native",
     "keyboard",
     "animation",
+    "dismiss",
     "focused input",
+    "text changed",
     "avoiding view",
     "sticky view",
+    "keyboard aware scroll view",
     "ios",
     "android"
   ],
@@ -80,7 +83,7 @@
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.6.1",
     "release-it": "^14.2.2",
     "typescript": "^4.8.4"
   },

package/react-native-keyboard-controller.podspec

@@ -24,7 +24,7 @@ Pod::Spec.new do |s|
   if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
     s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
     s.pod_target_xcconfig    = {
-      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+      "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"${PODS_ROOT}/Headers/Private/Yoga\"",
       "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
       "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
       # This is handy when we want to detect if new arch is enabled in Swift code

package/src/animated.tsx

@@ -8,11 +8,13 @@ import { useAnimatedValue, useSharedHandlers } from './internal';
 import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
 import {
   useAnimatedKeyboardHandler,
-  useFocusedInputHandler,
+  useFocusedInputLayoutHandler,
+  useFocusedInputTextHandler,
 } from './reanimated';
 
 import type { KeyboardAnimationContext } from './context';
 import type {
+  FocusedInputHandler,
   FocusedInputLayoutChangedEvent,
   KeyboardControllerProps,
   KeyboardHandler,
@@ -76,6 +78,7 @@ export const KeyboardProvider = ({
   navigationBarTranslucent,
   enabled: initiallyEnabled = true,
 }: KeyboardProviderProps) => {
+  // state
   const [enabled, setEnabled] = useState(initiallyEnabled);
   // animated values
   const progress = useAnimatedValue(0);
@@ -84,7 +87,10 @@ export const KeyboardProvider = ({
   const progressSV = useSharedValue(0);
   const heightSV = useSharedValue(0);
   const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
-  const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();
+  const [setKeyboardHandlers, broadcastKeyboardEvents] =
+    useSharedHandlers<KeyboardHandler>();
+  const [setInputHandlers, broadcastInputEvents] =
+    useSharedHandlers<FocusedInputHandler>();
   // memo
   const context = useMemo<KeyboardAnimationContext>(
     () => ({
@@ -92,7 +98,8 @@ export const KeyboardProvider = ({
       animated: { progress: progress, height: Animated.multiply(height, -1) },
       reanimated: { progress: progressSV, height: heightSV },
       layout,
-      setHandlers,
+      setKeyboardHandlers,
+      setInputHandlers,
       setEnabled,
     }),
     [enabled]
@@ -133,30 +140,30 @@ export const KeyboardProvider = ({
       onKeyboardMoveStart: (event: NativeEvent) => {
         'worklet';
 
-        broadcast('onStart', event);
+        broadcastKeyboardEvents('onStart', event);
         updateSharedValues(event, ['ios']);
       },
       onKeyboardMove: (event: NativeEvent) => {
         'worklet';
 
-        broadcast('onMove', event);
+        broadcastKeyboardEvents('onMove', event);
         updateSharedValues(event, ['android']);
       },
       onKeyboardMoveEnd: (event: NativeEvent) => {
         'worklet';
 
-        broadcast('onEnd', event);
+        broadcastKeyboardEvents('onEnd', event);
       },
       onKeyboardMoveInteractive: (event: NativeEvent) => {
         'worklet';
 
         updateSharedValues(event, ['android', 'ios']);
-        broadcast('onInteractive', event);
+        broadcastKeyboardEvents('onInteractive', event);
       },
     },
     []
   );
-  const inputHandler = useFocusedInputHandler(
+  const inputLayoutHandler = useFocusedInputLayoutHandler(
     {
       onFocusedInputLayoutChanged: (e) => {
         'worklet';
@@ -170,6 +177,16 @@ export const KeyboardProvider = ({
     },
     []
   );
+  const inputTextHandler = useFocusedInputTextHandler(
+    {
+      onFocusedInputTextChanged: (e) => {
+        'worklet';
+
+        broadcastInputEvents('onChangeText', e);
+      },
+    },
+    []
+  );
   // effects
   useEffect(() => {
     if (enabled) {
@@ -187,10 +204,10 @@ export const KeyboardProvider = ({
         onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
         onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}
         onKeyboardMoveInteractive={onKeyboardMove}
-        onFocusedInputLayoutChangedReanimated={inputHandler}
+        onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
+        onFocusedInputTextChangedReanimated={inputTextHandler}
         navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
-        // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923
         style={styles.container}
       >
         {children}

package/src/bindings.ts

@@ -12,6 +12,7 @@ const NOOP = () => {};
 export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,
+  dismiss: NOOP,
   addListener: NOOP,
   removeListeners: NOOP,
 };

package/src/components/KeyboardAvoidingView/index.tsx

@@ -6,7 +6,6 @@ import Reanimated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 
 import { useKeyboardAnimation } from './hooks';
@@ -68,18 +67,22 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
     const keyboard = useKeyboardAnimation();
     const { height: screenHeight } = useWindowDimensions();
 
-    const relativeKeyboardHeight = useWorkletCallback(() => {
+    const relativeKeyboardHeight = useCallback(() => {
+      'worklet';
+
       const keyboardY =
         screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
 
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
 
-    const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {
+    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
+      'worklet';
+
       if (keyboard.isClosed.value) {
         initialFrame.value = layout;
       }
-    });
+    }, []);
     const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
       (e) => {
         runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
@@ -134,7 +137,6 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
     return (
       <Reanimated.View
-        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
         ref={ref}
         onLayout={onLayout}
         style={combinedStyles}

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -0,0 +1,262 @@
+import React, { useCallback, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import Reanimated, {
+  interpolate,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import {
+  useFocusedInputHandler,
+  useReanimatedFocusedInput,
+} from 'react-native-keyboard-controller';
+
+import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
+import { debounce } from './utils';
+
+import type { FC } from 'react';
+import type { ScrollViewProps } from 'react-native';
+import type { FocusedInputLayoutChangedEvent } from 'react-native-keyboard-controller';
+
+type KeyboardAwareScrollViewProps = {
+  bottomOffset?: number;
+} & ScrollViewProps;
+
+/**
+ * Everything begins from `onStart` handler. This handler is called every time,
+ * when keyboard changes its size or when focused `TextInput` was changed. In
+ * this handler we are calculating/memoizing values which later will be used
+ * during layout movement. For that we calculate:
+ * - layout of focused field (`layout`) - to understand whether there will be overlap
+ * - initial keyboard size (`initialKeyboardSize`) - used in scroll interpolation
+ * - future keyboard height (`keyboardHeight`) - used in scroll interpolation
+ * - current scroll position (`scrollPosition`) - used to scroll from this point
+ *
+ * Once we've calculated all necessary variables - we can actually start to use them.
+ * It happens in `onMove` handler - this function simply calls `maybeScroll` with
+ * current keyboard frame height. This functions makes the smooth transition.
+ *
+ * When the transition has finished we go to `onEnd` handler. In this handler
+ * we verify, that the current field is not overlapped within a keyboard frame.
+ * For full `onStart`/`onMove`/`onEnd` flow it may look like a redundant thing,
+ * however there could be some cases, when `onMove` is not called:
+ * - on iOS when TextInput was changed - keyboard transition is instant
+ * - on Android when TextInput was changed and keyboard size wasn't changed
+ * So `onEnd` handler handle the case, when `onMove` wasn't triggered.
+ *
+ * ====================================================================================================================+
+ * -----------------------------------------------------Flow chart-----------------------------------------------------+
+ * ====================================================================================================================+
+ *
+ * +============================+       +============================+        +==================================+
+ * +  User Press on TextInput   +   =>  +  Keyboard starts showing   +   =>   + As keyboard moves frame by frame +  =>
+ * +                            +       +       (run `onStart`)      +        +    `onMove` is getting called    +
+ * +============================+       +============================+        +==================================+
+ *
+ *
+ * +============================+       +============================+        +=====================================+
+ * + Keyboard is shown and we   +   =>  +    User moved focus to     +   =>   + Only `onStart`/`onEnd` maybe called +
+ * +    call `onEnd` handler    +       +     another `TextInput`    +        +    (without involving `onMove`)     +
+ * +============================+       +============================+        +=====================================+
+ *
+ */
+const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
+  children,
+  bottomOffset = 0,
+  ...rest
+}) => {
+  const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
+  const scrollPosition = useSharedValue(0);
+  const position = useSharedValue(0);
+  const keyboardHeight = useSharedValue(0);
+  const tag = useSharedValue(-1);
+  const initialKeyboardSize = useSharedValue(0);
+  const scrollBeforeKeyboardMovement = useSharedValue(0);
+  const { input } = useReanimatedFocusedInput();
+  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+
+  const { height } = useWindowDimensions();
+
+  const onScroll = useAnimatedScrollHandler(
+    {
+      onScroll: (e) => {
+        position.value = e.contentOffset.y;
+      },
+    },
+    []
+  );
+
+  /**
+   * Function that will scroll a ScrollView as keyboard gets moving
+   */
+  const maybeScroll = useCallback(
+    (e: number, animated: boolean = false) => {
+      'worklet';
+
+      const visibleRect = height - keyboardHeight.value;
+      const absoluteY = layout.value?.layout.absoluteY || 0;
+      const inputHeight = layout.value?.layout.height || 0;
+      const point = absoluteY + inputHeight;
+
+      if (visibleRect - point <= bottomOffset) {
+        const interpolatedScrollTo = interpolate(
+          e,
+          [initialKeyboardSize.value, keyboardHeight.value],
+          [0, keyboardHeight.value - (height - point) + bottomOffset]
+        );
+        const targetScrollY =
+          Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
+        scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
+
+        return interpolatedScrollTo;
+      }
+
+      if (absoluteY < 0) {
+        const positionOnScreen = visibleRect - inputHeight - bottomOffset;
+        const topOfScreen = scrollPosition.value + absoluteY;
+
+        scrollTo(
+          scrollViewAnimatedRef,
+          0,
+          topOfScreen - positionOnScreen,
+          animated
+        );
+      }
+
+      return 0;
+    },
+    [bottomOffset]
+  );
+
+  const onChangeText = useCallback(() => {
+    'worklet';
+
+    // if typing a text caused layout shift, then we need to ignore this handler
+    // because this event will be handled in `useAnimatedReaction` below
+    if (layout.value?.layout.height !== input.value?.layout.height) {
+      return;
+    }
+
+    const prevScrollPosition = scrollPosition.value;
+    const prevLayout = layout.value;
+
+    scrollPosition.value = position.value;
+    layout.value = input.value;
+    maybeScroll(keyboardHeight.value, true);
+    scrollPosition.value = prevScrollPosition;
+    layout.value = prevLayout;
+  }, [maybeScroll]);
+  const onChangeTextHandler = useMemo(
+    () => debounce(onChangeText, 200),
+    [onChangeText]
+  );
+
+  useFocusedInputHandler(
+    {
+      onChangeText: onChangeTextHandler,
+    },
+    [onChangeTextHandler]
+  );
+
+  useSmoothKeyboardHandler(
+    {
+      onStart: (e) => {
+        'worklet';
+
+        const keyboardWillChangeSize =
+          keyboardHeight.value !== e.height && e.height > 0;
+        const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
+        const keyboardWillHide = e.height === 0;
+        const focusWasChanged =
+          (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;
+
+        if (keyboardWillChangeSize) {
+          initialKeyboardSize.value = keyboardHeight.value;
+        }
+
+        if (keyboardWillHide) {
+          // on back transition need to interpolate as [0, keyboardHeight]
+          initialKeyboardSize.value = 0;
+          scrollPosition.value = scrollBeforeKeyboardMovement.value;
+        }
+
+        if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
+          // persist scroll value
+          scrollPosition.value = position.value;
+          // just persist height - later will be used in interpolation
+          keyboardHeight.value = e.height;
+        }
+
+        // focus was changed
+        if (focusWasChanged) {
+          tag.value = e.target;
+
+          // save position of focused text input when keyboard starts to move
+          layout.value = input.value;
+          // save current scroll position - when keyboard will hide we'll reuse
+          // this value to achieve smooth hide effect
+          scrollBeforeKeyboardMovement.value = position.value;
+        }
+
+        if (focusWasChanged && !keyboardWillAppear) {
+          // update position on scroll value, so `onEnd` handler
+          // will pick up correct values
+          position.value += maybeScroll(e.height, true);
+        }
+      },
+      onMove: (e) => {
+        'worklet';
+
+        maybeScroll(e.height);
+      },
+      onEnd: (e) => {
+        'worklet';
+
+        keyboardHeight.value = e.height;
+        scrollPosition.value = position.value;
+      },
+    },
+    [height, maybeScroll]
+  );
+
+  useAnimatedReaction(
+    () => input.value,
+    (current, previous) => {
+      if (
+        current?.target === previous?.target &&
+        current?.layout.height !== previous?.layout.height
+      ) {
+        const prevLayout = layout.value;
+
+        layout.value = input.value;
+        scrollPosition.value += maybeScroll(keyboardHeight.value, true);
+        layout.value = prevLayout;
+      }
+    },
+    []
+  );
+
+  const view = useAnimatedStyle(
+    () => ({
+      paddingBottom: keyboardHeight.value,
+    }),
+    []
+  );
+
+  return (
+    <Reanimated.ScrollView
+      ref={scrollViewAnimatedRef}
+      {...rest}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+    >
+      <Reanimated.View style={view}>{children}</Reanimated.View>
+    </Reanimated.ScrollView>
+  );
+};
+
+export default KeyboardAwareScrollView;

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -0,0 +1,123 @@
+import { Platform } from 'react-native';
+import {
+  Easing,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useKeyboardHandler } from 'react-native-keyboard-controller';
+
+const IS_ANDROID_ELEVEN_OR_HIGHER =
+  Platform.OS === 'android' && Platform.Version >= 30;
+// on these platforms keyboard transitions will be smooth
+const IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =
+  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === 'ios';
+// on Android Telegram is not using androidx.core values and uses custom interpolation
+// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
+// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+const TELEGRAM_ANDROID_TIMING_CONFIG = {
+  duration: 250,
+  easing: Easing.bezier(
+    0.19919472913616398,
+    0.010644531250000006,
+    0.27920937042459737,
+    0.91025390625
+  ),
+};
+
+/**
+ * Hook that uses default transitions for iOS and Android > 11, and uses
+ * custom interpolation on Android < 11 to achieve more smooth animation
+ */
+export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
+  handler,
+  deps
+) => {
+  const target = useSharedValue(-1);
+  const persistedHeight = useSharedValue(0);
+  const animatedKeyboardHeight = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
+      const event = {
+        // it'll be always 250, since we're running animation via `withTiming` where
+        // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
+        duration: 250,
+        target: target.value,
+        height: animatedKeyboardHeight.value,
+        progress: animatedKeyboardHeight.value / persistedHeight.value,
+      };
+      return event;
+    },
+    (evt) => {
+      if (!evt) {
+        return;
+      }
+      handler.onMove?.(evt);
+
+      // dispatch `onEnd`
+      if (evt.height === persistedHeight.value) {
+        handler.onEnd?.(evt);
+      }
+    },
+    [handler]
+  );
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        'worklet';
+
+        // immediately dispatch onStart/onEnd events if onStart dispatched with the same height
+        // and don't wait for animation 250ms
+        if (
+          !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&
+          e.height === persistedHeight.value
+        ) {
+          handler.onStart?.(e);
+          handler.onEnd?.(e);
+
+          return;
+        }
+
+        target.value = e.target;
+
+        if (e.height > 0) {
+          persistedHeight.value = e.height;
+        }
+        // if we are running on Android < 9, then we are using custom interpolation
+        // to achieve smoother animation and use `animatedKeyboardHeight` as animation
+        // driver
+        if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          animatedKeyboardHeight.value = withTiming(
+            e.height,
+            TELEGRAM_ANDROID_TIMING_CONFIG
+          );
+        }
+
+        handler.onStart?.(e);
+      },
+      onMove: (e) => {
+        'worklet';
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onMove?.(e);
+        }
+      },
+      onEnd: (e) => {
+        'worklet';
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onEnd?.(e);
+        }
+
+        persistedHeight.value = e.height;
+      },
+    },
+    deps
+  );
+};

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -0,0 +1,26 @@
+export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
+  worklet: F,
+  wait = 0
+) => {
+  'worklet';
+
+  const value = {
+    time: 0,
+  };
+
+  return (...args: Parameters<F>): ReturnType<F> | void => {
+    'worklet';
+
+    const t = Date.now();
+    const now = t - value.time;
+
+    if (now < wait) {
+      value.time = t;
+      return;
+    }
+
+    value.time = t;
+
+    return worklet(...args);
+  };
+};

package/src/components/KeyboardStickyView/index.tsx

@@ -48,12 +48,7 @@ const KeyboardStickyView = forwardRef<
     );
 
     return (
-      <Reanimated.View
-        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
-        ref={ref}
-        style={styles}
-        {...props}
-      >
+      <Reanimated.View ref={ref} style={styles} {...props}>
         {children}
       </Reanimated.View>
     );

package/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as KeyboardAvoidingView } from './KeyboardAvoidingView';
 export { default as KeyboardStickyView } from './KeyboardStickyView';
+export { default as KeyboardAwareScrollView } from './KeyboardAwareScrollView';