@react-native-ohos/react-native-keyboard-controller 1.12.8-rc.1

package/src/components/KeyboardAvoidingView/index.tsx

@@ -0,0 +1,156 @@
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import Reanimated, {
+  interpolate,
+  runOnUI,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { useWindowDimensions } from "../../hooks";
+
+import { useKeyboardAnimation } from "./hooks";
+
+import type { LayoutRectangle, ViewProps } from "react-native";
+
+export type KeyboardAvoidingViewProps = {
+  /**
+   * Specify how to react to the presence of the keyboard.
+   */
+  behavior?: "height" | "position" | "padding";
+
+  /**
+   * Style of the content container when `behavior` is 'position'.
+   */
+  contentContainerStyle?: ViewProps["style"];
+
+  /**
+   * Controls whether this `KeyboardAvoidingView` instance should take effect.
+   * This is useful when more than one is on the screen. Defaults to true.
+   */
+  enabled?: boolean;
+
+  /**
+   * Distance between the top of the user screen and the React Native view. This
+   * may be non-zero in some cases. Defaults to 0.
+   */
+  keyboardVerticalOffset?: number;
+} & ViewProps;
+
+const defaultLayout: LayoutRectangle = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+const KeyboardAvoidingView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardAvoidingViewProps>
+>(
+  (
+    {
+      behavior,
+      children,
+      contentContainerStyle,
+      enabled = true,
+      keyboardVerticalOffset = 0,
+      style,
+      onLayout: onLayoutProps,
+      ...props
+    },
+    ref,
+  ) => {
+    const initialFrame = useSharedValue<LayoutRectangle | null>(null);
+    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
+
+    const keyboard = useKeyboardAnimation();
+    const { height: screenHeight } = useWindowDimensions();
+
+    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 = useCallback((layout: LayoutRectangle) => {
+      "worklet";
+
+      if (keyboard.isClosed.value || initialFrame.value === null) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        initialFrame.value = layout;
+      }
+    }, []);
+    const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
+      (e) => {
+        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
+        onLayoutProps?.(e);
+      },
+      [onLayoutProps],
+    );
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const bottom = interpolate(
+        keyboard.progress.value,
+        [0, 1],
+        [0, relativeKeyboardHeight()],
+      );
+      const bottomHeight = enabled ? bottom : 0;
+
+      switch (behavior)  {
+        case "height":
+          if (!keyboard.isClosed.value) {
+            return {
+              height: frame.value.height - bottomHeight,
+              flex: 0,
+            };
+          }
+
+          return {};
+
+        case "position":
+          return { bottom: bottomHeight };
+
+        case "padding":
+          return { paddingBottom: bottomHeight };
+        default:
+          return {};
+      }
+    }, [behavior, enabled, relativeKeyboardHeight]);
+    const isPositionBehavior = behavior === "position";
+    const containerStyle = isPositionBehavior ? contentContainerStyle : style;
+    const combinedStyles = useMemo(
+      () => [containerStyle, animatedStyle],
+      [containerStyle, animatedStyle],
+    );
+
+    if (isPositionBehavior) {
+      return (
+        <View ref={ref} style={style} onLayout={onLayout} {...props}>
+          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>
+        </View>
+      );
+    }
+
+    return (
+      <Reanimated.View
+        ref={ref}
+        onLayout={onLayout}
+        style={combinedStyles}
+        {...props}
+      >
+        {children}
+      </Reanimated.View>
+    );
+  },
+);
+
+export default KeyboardAvoidingView;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -0,0 +1,373 @@
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { findNodeHandle } from "react-native";
+import Reanimated, {
+  interpolate,
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollViewOffset,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import {
+  useFocusedInputHandler,
+  useReanimatedFocusedInput,
+  useWindowDimensions,
+} from "../../hooks";
+
+import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
+import { debounce, scrollDistanceWithRespectToSnapPoints } from "./utils";
+
+import type {
+  LayoutChangeEvent,
+  ScrollView,
+  ScrollViewProps,
+} from "react-native";
+import type {
+  FocusedInputLayoutChangedEvent,
+  FocusedInputSelectionChangedEvent,
+} from "..//../types";
+
+export type KeyboardAwareScrollViewProps = {
+  /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
+  bottomOffset?: number;
+  /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
+  disableScrollOnKeyboardHide?: boolean;
+  /** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true` */
+  enabled?: boolean;
+  /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
+  extraKeyboardSpace?: 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 = forwardRef<
+  ScrollView,
+  React.PropsWithChildren<KeyboardAwareScrollViewProps>
+>(
+  (
+    {
+      children,
+      onLayout,
+      bottomOffset = 0,
+      disableScrollOnKeyboardHide = false,
+      enabled = true,
+      extraKeyboardSpace = 0,
+      ...rest
+    },
+    ref,
+  ) => {
+    const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
+    const scrollViewTarget = useSharedValue<number | null>(null);
+    const scrollPosition = useSharedValue(0);
+    const position = useScrollViewOffset(scrollViewAnimatedRef);
+    const currentKeyboardFrameHeight = useSharedValue(0);
+    const keyboardHeight = useSharedValue(0);
+    const keyboardWillAppear = useSharedValue(false);
+    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 onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
+      if (typeof ref === "function") {
+        ref(assignedRef);
+      } else if (ref) {
+        ref.current = assignedRef;
+      }
+
+      scrollViewAnimatedRef(assignedRef);
+    }, []);
+    const onScrollViewLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        scrollViewTarget.value = findNodeHandle(scrollViewAnimatedRef.current);
+
+        onLayout?.(e);
+      },
+      [onLayout],
+    );
+
+    /**
+     * Function that will scroll a ScrollView as keyboard gets moving
+     */
+    const maybeScroll = useCallback(
+      (e: number, animated: boolean = false) => {
+        "worklet";
+
+        if (!enabled) {
+          return 0;
+        }
+
+        // input belongs to ScrollView
+        if (layout.value?.parentScrollViewTarget !== scrollViewTarget.value) {
+          return 0;
+        }
+
+        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 relativeScrollTo =
+            keyboardHeight.value - (height - point) + bottomOffset;
+          const interpolatedScrollTo = interpolate(
+            e,
+            [initialKeyboardSize.value, keyboardHeight.value],
+            [
+              0,
+              scrollDistanceWithRespectToSnapPoints(
+                relativeScrollTo + scrollPosition.value,
+                rest.snapToOffsets,
+              ) - scrollPosition.value,
+            ],
+          );
+          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, enabled, height, rest.snapToOffsets],
+    );
+
+    const scrollFromCurrentPosition = useCallback(
+      (customHeight?: number) => {
+        "worklet";
+
+        const prevScrollPosition = scrollPosition.value;
+        const prevLayout = layout.value;
+
+        if (!input.value?.layout) {
+          return;
+        }
+
+        // eslint-disable-next-line react-compiler/react-compiler
+        layout.value = {
+          ...input.value,
+          layout: {
+            ...input.value.layout,
+            height: customHeight ?? input.value.layout.height,
+          },
+        };
+        scrollPosition.value = position.value;
+        maybeScroll(keyboardHeight.value, true);
+        scrollPosition.value = prevScrollPosition;
+        layout.value = prevLayout;
+      },
+      [maybeScroll],
+    );
+    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;
+      }
+
+      scrollFromCurrentPosition();
+    }, [scrollFromCurrentPosition]);
+    const onSelectionChange = useCallback(
+      (e: FocusedInputSelectionChangedEvent) => {
+        "worklet";
+
+        if (e.selection.start.position !== e.selection.end.position) {
+          scrollFromCurrentPosition(e.selection.end.y);
+        }
+      },
+      [scrollFromCurrentPosition],
+    );
+
+    const onChangeTextHandler = useMemo(
+      () => debounce(onChangeText, 200),
+      [onChangeText],
+    );
+
+    useFocusedInputHandler(
+      {
+        onChangeText: onChangeTextHandler,
+        onSelectionChange: onSelectionChange,
+      },
+      [onChangeTextHandler, onSelectionChange],
+    );
+
+    useSmoothKeyboardHandler(
+      {
+        onStart: (e) => {
+          "worklet";
+
+          const keyboardWillChangeSize =
+            keyboardHeight.value !== e.height && e.height > 0;
+          keyboardWillAppear.value = 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.value ||
+            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.value) {
+            // update position on scroll value, so `onEnd` handler
+            // will pick up correct values
+            position.value += maybeScroll(e.height, true);
+          }
+        },
+        onMove: (e) => {
+          "worklet";
+
+          const keyboardFrame = interpolate(
+            e.height,
+            [0, keyboardHeight.value],
+            [0, keyboardHeight.value + extraKeyboardSpace],
+          );
+          currentKeyboardFrameHeight.value = keyboardFrame;
+
+          // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
+          if (!disableScrollOnKeyboardHide || keyboardWillAppear.value) {
+            maybeScroll(e.height);
+          }
+        },
+        onEnd: (e) => {
+          "worklet";
+
+          keyboardHeight.value = e.height;
+          scrollPosition.value = position.value;
+        },
+      },
+      [maybeScroll, disableScrollOnKeyboardHide, extraKeyboardSpace],
+    );
+
+    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(
+      () =>
+        enabled
+          ? {
+            // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused)
+            // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
+            // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
+            // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
+            // re-calculation on every animation frame and it helps to achieve smooth animation.
+            // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
+            paddingBottom: currentKeyboardFrameHeight.value + 1,
+          }
+          : {},
+      [enabled],
+    );
+
+    return (
+      <Reanimated.ScrollView
+        ref={onRef}
+        {...rest}
+        onLayout={onScrollViewLayout}
+        scrollEventThrottle={16}
+      >
+        {children}
+        <Reanimated.View style={view} />
+      </Reanimated.ScrollView>
+    );
+  },
+);
+
+export default KeyboardAwareScrollView;

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -0,0 +1,133 @@
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useKeyboardHandler } from "../../hooks";
+
+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" || Platform.OS as string === 'harmony';
+// 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 height = useSharedValue(0);
+  const persistedHeight = useSharedValue(0);
+  const animatedKeyboardHeight = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
+      if (persistedHeight.value === 0) {
+        return;
+      }
+      const event = {
+        // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
+        duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        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 === height.value) {
+        handler.onEnd?.(evt);
+        // eslint-disable-next-line react-compiler/react-compiler
+        persistedHeight.value = height.value;
+      }
+    },
+    // REA uses own version of `DependencyList` and it's not compatible with the same type from React
+    deps as unknown[],
+  );
+
+  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;
+        height.value = e.height;
+
+        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,
+          duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS
+            ? e.duration
+            : TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        });
+      },
+      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);
+        }
+      },
+    },
+    deps,
+  );
+};

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -0,0 +1,41 @@
+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);
+  };
+};
+
+export const scrollDistanceWithRespectToSnapPoints = (
+  defaultScrollValue: number,
+  snapPoints?: number[],
+) => {
+  "worklet";
+
+  let snapPoint: number | undefined;
+
+  if (snapPoints) {
+    snapPoint = snapPoints.find((offset) => offset >= defaultScrollValue);
+  }
+
+  return snapPoint ?? defaultScrollValue;
+};