react-native-keyboard-controller 1.9.5 → 1.10.1

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,6 +1,6 @@
-import { useSharedValue } from 'react-native-reanimated';
+import { useSharedValue } from "react-native-reanimated";
 
-import { useKeyboardHandler } from '../../hooks';
+import { useKeyboardHandler } from "../../hooks";
 
 export const useKeyboardAnimation = () => {
   const heightWhenOpened = useSharedValue(0);
@@ -11,7 +11,7 @@ export const useKeyboardAnimation = () => {
   useKeyboardHandler(
     {
       onStart: (e) => {
-        'worklet';
+        "worklet";
 
         if (e.height > 0) {
           isClosed.value = false;
@@ -19,18 +19,21 @@ export const useKeyboardAnimation = () => {
         }
       },
       onMove: (e) => {
-        'worklet';
+        "worklet";
 
         progress.value = e.progress;
         height.value = e.height;
       },
       onEnd: (e) => {
-        'worklet';
+        "worklet";
 
         isClosed.value = e.height === 0;
+
+        progress.value = e.progress;
+        height.value = e.height;
       },
     },
-    []
+    [],
   );
 
   return { height, progress, heightWhenOpened, isClosed };

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,28 +1,28 @@
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { View, useWindowDimensions } from 'react-native';
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { View, useWindowDimensions } from "react-native";
 import Reanimated, {
-  interpolate,
   runOnUI,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-  useWorkletCallback,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import { useKeyboardAnimation } from './hooks';
+import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
 
-import type { LayoutRectangle, ViewProps } from 'react-native';
+import { useKeyboardAnimation } from "./hooks";
+
+import type { LayoutRectangle, ViewProps } from "react-native";
 
 type Props = {
   /**
    * Specify how to react to the presence of the keyboard.
    */
-  behavior?: 'height' | 'position' | 'padding';
+  behavior?: "height" | "position" | "padding";
 
   /**
    * Style of the content container when `behavior` is 'position'.
    */
-  contentContainerStyle?: ViewProps['style'];
+  contentContainerStyle?: ViewProps["style"];
 
   /**
    * Controls whether this `KeyboardAvoidingView` instance should take effect.
@@ -60,7 +60,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
       onLayout: onLayoutProps,
       ...props
     },
-    ref
+    ref,
   ) => {
     const initialFrame = useSharedValue<LayoutRectangle | null>(null);
     const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
@@ -68,36 +68,40 @@ 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 { interpolate } = useKeyboardInterpolation();
+
+    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
+      "worklet";
 
-    const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {
       if (keyboard.isClosed.value) {
         initialFrame.value = layout;
       }
-    });
-    const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
+    }, []);
+    const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
       (e) => {
         runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
         onLayoutProps?.(e);
       },
-      [onLayoutProps]
+      [onLayoutProps],
     );
 
     const animatedStyle = useAnimatedStyle(() => {
-      const bottom = interpolate(
-        keyboard.progress.value,
-        [0, 1],
-        [0, relativeKeyboardHeight()]
-      );
+      const bottom = interpolate(keyboard.height.value, [
+        0,
+        relativeKeyboardHeight(),
+      ]);
       const bottomHeight = enabled ? bottom : 0;
 
       switch (behavior) {
-        case 'height':
+        case "height":
           if (!keyboard.isClosed.value) {
             return {
               height: frame.value.height - bottomHeight,
@@ -107,21 +111,21 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
           return {};
 
-        case 'position':
+        case "position":
           return { bottom: bottomHeight };
 
-        case 'padding':
+        case "padding":
           return { paddingBottom: bottomHeight };
 
         default:
           return {};
       }
     }, [behavior, enabled, relativeKeyboardHeight]);
-    const isPositionBehavior = behavior === 'position';
+    const isPositionBehavior = behavior === "position";
     const containerStyle = isPositionBehavior ? contentContainerStyle : style;
     const combinedStyles = useMemo(
       () => [containerStyle, animatedStyle],
-      [containerStyle, animatedStyle]
+      [containerStyle, animatedStyle],
     );
 
     if (isPositionBehavior) {
@@ -134,7 +138,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}
@@ -143,7 +146,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
         {children}
       </Reanimated.View>
     );
-  }
+  },
 );
 
 export default KeyboardAvoidingView;

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

@@ -1,12 +1,10 @@
-import React, { forwardRef, useMemo } from 'react';
-import Reanimated, {
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import React, { forwardRef, useMemo } from "react";
+import Reanimated, { useAnimatedStyle } from "react-native-reanimated";
 
-import { useReanimatedKeyboardAnimation } from '../../hooks';
+import { useReanimatedKeyboardAnimation } from "../../hooks";
+import useKeyboardInterpolation from "../hooks/useKeyboardInterpolation";
 
-import type { View, ViewProps } from 'react-native';
+import type { View, ViewProps } from "react-native";
 
 type KeyboardStickyViewProps = {
   /**
@@ -30,12 +28,13 @@ const KeyboardStickyView = forwardRef<
 >(
   (
     { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
-    ref
+    ref,
   ) => {
-    const { height, progress } = useReanimatedKeyboardAnimation();
+    const { height } = useReanimatedKeyboardAnimation();
+    const { interpolate } = useKeyboardInterpolation();
 
     const stickyViewStyle = useAnimatedStyle(() => {
-      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+      const offset = interpolate(-height.value, [closed, opened]);
 
       return {
         transform: [{ translateY: height.value + offset }],
@@ -44,20 +43,15 @@ const KeyboardStickyView = forwardRef<
 
     const styles = useMemo(
       () => [style, stickyViewStyle],
-      [style, stickyViewStyle]
+      [style, stickyViewStyle],
     );
 
     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>
     );
-  }
+  },
 );
 
 export default KeyboardStickyView;