react-native-keyboard-controller 1.21.0-beta.2 → 1.21.0

package/lib/typescript/components/ChatKit/hooks.d.ts

@@ -1,2 +0,0 @@
-export { useChatKeyboard } from "./useChatKeyboard";
-export type { KeyboardLiftBehavior } from "./useChatKeyboard";

package/lib/typescript/components/ChatKit/index.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-import Reanimated from "react-native-reanimated";
-declare const ChatKit: {
-    ScrollView: React.ForwardRefExoticComponent<{
-        ScrollViewComponent: import("../ScrollViewWithBottomPadding").AnimatedScrollViewComponent;
-        inverted?: boolean;
-        offset?: number;
-        keyboardLiftBehavior?: "always" | "never" | "whenAtEnd" | "persistent";
-        freeze?: boolean;
-    } & import("react-native").ScrollViewProps & {
-        children?: React.ReactNode | undefined;
-    } & React.RefAttributes<Reanimated.ScrollView>>;
-};
-export default ChatKit;

package/lib/typescript/components/ChatKit/useChatKeyboard/helpers.d.ts

@@ -1,57 +0,0 @@
-type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
-/**
- * Check whether the scroll view is at the end of its content.
- *
- * @param scrollOffset - Current vertical scroll offset.
- * @param layoutHeight - Visible height of the scroll view.
- * @param contentHeight - Total height of the scrollable content.
- * @returns `true` if the scroll position is within the threshold of the content end.
- * @example
- * ```ts
- * const atEnd = isScrollAtEnd(100, 800, 920); // true (100 + 800 >= 920 - 20)
- * ```
- */
-export declare function isScrollAtEnd(scrollOffset: number, layoutHeight: number, contentHeight: number): boolean;
-/**
- * Decide whether content should be shifted based on the keyboard lift behavior.
- *
- * @param behavior - The configured keyboard lift behavior.
- * @param isAtEnd - Whether the scroll view is currently at the end.
- * @returns `true` if content should be shifted.
- * @example
- * ```ts
- * shouldShiftContent("always", false); // true
- * shouldShiftContent("whenAtEnd", false); // false
- * ```
- */
-export declare function shouldShiftContent(behavior: KeyboardLiftBehavior, isAtEnd: boolean): boolean;
-/**
- * Compute the clamped scroll target for non-inverted lists.
- *
- * @param offsetBeforeScroll - Scroll position before keyboard appeared.
- * @param keyboardHeight - Current keyboard height.
- * @param contentHeight - Total height of the scrollable content.
- * @param layoutHeight - Visible height of the scroll view.
- * @returns Clamped scroll target between 0 and maxScroll.
- * @example
- * ```ts
- * clampedScrollTarget(100, 300, 1000, 800); // 400
- * ```
- */
-export declare function clampedScrollTarget(offsetBeforeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number): number;
-/**
- * Compute contentOffset.y for iOS lists.
- *
- * @param relativeScroll - Scroll position relative to current inset.
- * @param keyboardHeight - Target keyboard height.
- * @param contentHeight - Total height of the scrollable content.
- * @param layoutHeight - Visible height of the scroll view.
- * @param inverted - Whether the list is inverted.
- * @returns The absolute contentOffset.y to set.
- * @example
- * ```ts
- * computeIOSContentOffset(100, 300, 1000, 800, false); // 400
- * ```
- */
-export declare function computeIOSContentOffset(relativeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number, inverted: boolean): number;
-export {};

package/lib/typescript/components/ChatKit/useChatKeyboard/index.d.ts

@@ -1,36 +0,0 @@
-import type { AnimatedRef, SharedValue } from "react-native-reanimated";
-import type Reanimated from "react-native-reanimated";
-type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
-type UseChatKeyboardOptions = {
-    inverted: boolean;
-    keyboardLiftBehavior: KeyboardLiftBehavior;
-    freeze: boolean;
-    offset: number;
-};
-type UseChatKeyboardReturn = {
-    /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom on Android. */
-    padding: SharedValue<number>;
-    /** Absolute Y content offset for iOS (set once in onStart). `undefined` on Android. */
-    contentOffsetY: SharedValue<number> | undefined;
-    /** TranslateY for the container wrapper on Android inverted lists. 0 otherwise. */
-    containerTranslateY: SharedValue<number>;
-};
-/**
- * Hook that manages keyboard-driven scrolling for chat-style scroll views.
- * Calculates padding (extra scrollable space) and content shift values,
- * using the optimal strategy per platform.
- *
- * @param scrollViewRef - Animated ref to the scroll view.
- * @param options - Configuration for inverted and keyboardLiftBehavior.
- * @returns Shared values for padding, contentOffsetY (iOS), and containerTranslateY (Android inverted).
- * @example
- * ```tsx
- * const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(ref, {
- *   inverted: false,
- *   keyboardLiftBehavior: "always",
- * });
- * ```
- */
-declare function useChatKeyboard(scrollViewRef: AnimatedRef<Reanimated.ScrollView>, options: UseChatKeyboardOptions): UseChatKeyboardReturn;
-export { useChatKeyboard };
-export type { KeyboardLiftBehavior };

package/src/components/ChatKit/TODO.md

@@ -1,20 +0,0 @@
-# Findings
-
-1. We can not translate whole `ScrollView` because interactive dismissal will have double scroll if we move it by `translateY` or content will be truncated if we don't do it (same with external container).
-2. So we need to move only content inside `ScrollView`.
-3. If we use a separate `scrollTo` we still may have a random jump. The only one way is to use `contentOffset` + `padding` on `ScrollView`.
-4. Input must be always in `KeyboardStickyView` because it's always pushing above the keyboard (unlike content, which may stay in place).
-5. Changing `contentOffset` on `ScrollView` will not work. On iOS it works, but on Android sometimes it doesn't scroll to correct position (when you scroll list to the end) and on paper architecture it is flickering.
-6. Next idea is to use `contentInset` on iOS and create custom `ClippingScrollView` on Android (with polyfill `contentInsetBottom` prop).
-
-## To Do
-
-- [x] check how `ClippingScrollView` works in `KeyboardAwareScrollView` on Android (seems to be working well)
-- [x] introduce `useCombinedRef` hook in separate PR
-- [x] make sure, that style property doesn't affect the behavior with/without `ClippingScrollView` (test on a ScrollView that doesn't tke full screen?) <-- tested by comparing iOS with Android + `ClippingScrollView` (`contentInsetBottom` never override `paddingBottom` from `style`/`contentContainerStyle` even if ScrollView has `maxHeight=150` and we have only 2 inputs limitation + also tested `ScrollView` without height restrictions, in this case `paddingBottom` on `style` is not getting applied (it doesn't have an effect on both iOS/Android), but `contentContainerStyle` + `paddingBottom` works as expected and if I add `contentInsetBottom` to `ClippingScrollView` it doesn't overwrite a padding and increases scrollable area)
-- [x] `ClippingScrollView` + `KeyboardAwareScrollView` check by e2e tests (seems to be working, though on Android emulator + e2e tests sometimes when keyboard disappear we still have keyboard space)
-- [x] introduce `ClippingScrollView` in separate PR
-- [x] create a polyfill-version of ScrollView `that` can add scrollable padding in the bottom of the content? How to wrap custom `ScrollView` with it (cause we may pass one from react-native-gesture-handler)? Should just adjust `contentInset` (scroll management should belong to `KeyboardAwareScrollView`) (ScrollViewWithKeyboardPadding/ScrollViewWithKeyboardSpace)
-- [x] use `ClippingScrollView` in `KeyboardAwareScrollView` in separate PR
-- [-] introduce `ChatKit`
-- [] create issue in reanimated repo about `scrollTo` performance regression

package/src/components/ChatKit/hooks.ts

@@ -1,2 +0,0 @@
-export { useChatKeyboard } from "./useChatKeyboard";
-export type { KeyboardLiftBehavior } from "./useChatKeyboard";

package/src/components/ChatKit/index.tsx

@@ -1,63 +0,0 @@
-import React, { forwardRef } from "react";
-import { useAnimatedRef, useAnimatedStyle } from "react-native-reanimated";
-import Reanimated from "react-native-reanimated";
-
-import useCombinedRef from "../hooks/useCombinedRef";
-import ScrollViewWithBottomPadding from "../ScrollViewWithBottomPadding";
-
-import { useChatKeyboard } from "./useChatKeyboard";
-
-import type { ChatKitScrollViewProps } from "./types";
-
-const ChatScrollView = forwardRef<
-  Reanimated.ScrollView,
-  React.PropsWithChildren<ChatKitScrollViewProps>
->(
-  (
-    {
-      children,
-      ScrollViewComponent = Reanimated.ScrollView,
-      inverted = false,
-      keyboardLiftBehavior = "always",
-      freeze = false,
-      offset = 0,
-      ...rest
-    },
-    ref,
-  ) => {
-    const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>();
-    const onRef = useCombinedRef(ref, scrollViewRef);
-
-    const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(
-      scrollViewRef,
-      { inverted, keyboardLiftBehavior, freeze, offset },
-    );
-
-    const containerStyle = useAnimatedStyle(
-      () => ({
-        transform: [{ translateY: containerTranslateY.value }],
-      }),
-      [],
-    );
-
-    return (
-      <ScrollViewWithBottomPadding
-        ref={onRef}
-        {...rest}
-        bottomPadding={padding}
-        containerStyle={containerStyle}
-        contentOffsetY={contentOffsetY}
-        inverted={inverted}
-        ScrollViewComponent={ScrollViewComponent}
-      >
-        {children}
-      </ScrollViewWithBottomPadding>
-    );
-  },
-);
-
-const ChatKit = {
-  ScrollView: ChatScrollView,
-};
-
-export default ChatKit;

package/src/components/ChatKit/useChatKeyboard/helpers.ts

@@ -1,118 +0,0 @@
-type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
-
-const AT_END_THRESHOLD = 20;
-
-/**
- * Check whether the scroll view is at the end of its content.
- *
- * @param scrollOffset - Current vertical scroll offset.
- * @param layoutHeight - Visible height of the scroll view.
- * @param contentHeight - Total height of the scrollable content.
- * @returns `true` if the scroll position is within the threshold of the content end.
- * @example
- * ```ts
- * const atEnd = isScrollAtEnd(100, 800, 920); // true (100 + 800 >= 920 - 20)
- * ```
- */
-export function isScrollAtEnd(
-  scrollOffset: number,
-  layoutHeight: number,
-  contentHeight: number,
-): boolean {
-  "worklet";
-
-  return scrollOffset + layoutHeight >= contentHeight - AT_END_THRESHOLD;
-}
-
-/**
- * Decide whether content should be shifted based on the keyboard lift behavior.
- *
- * @param behavior - The configured keyboard lift behavior.
- * @param isAtEnd - Whether the scroll view is currently at the end.
- * @returns `true` if content should be shifted.
- * @example
- * ```ts
- * shouldShiftContent("always", false); // true
- * shouldShiftContent("whenAtEnd", false); // false
- * ```
- */
-export function shouldShiftContent(
-  behavior: KeyboardLiftBehavior,
-  isAtEnd: boolean,
-): boolean {
-  "worklet";
-
-  switch (behavior) {
-    case "always":
-      return true;
-    case "never":
-      return false;
-    case "whenAtEnd":
-      return isAtEnd;
-    case "persistent":
-      return true;
-  }
-}
-
-/**
- * Compute the clamped scroll target for non-inverted lists.
- *
- * @param offsetBeforeScroll - Scroll position before keyboard appeared.
- * @param keyboardHeight - Current keyboard height.
- * @param contentHeight - Total height of the scrollable content.
- * @param layoutHeight - Visible height of the scroll view.
- * @returns Clamped scroll target between 0 and maxScroll.
- * @example
- * ```ts
- * clampedScrollTarget(100, 300, 1000, 800); // 400
- * ```
- */
-export function clampedScrollTarget(
-  offsetBeforeScroll: number,
-  keyboardHeight: number,
-  contentHeight: number,
-  layoutHeight: number,
-): number {
-  "worklet";
-
-  const maxScroll = Math.max(contentHeight - layoutHeight + keyboardHeight, 0);
-
-  return Math.min(Math.max(offsetBeforeScroll + keyboardHeight, 0), maxScroll);
-}
-
-/**
- * Compute contentOffset.y for iOS lists.
- *
- * @param relativeScroll - Scroll position relative to current inset.
- * @param keyboardHeight - Target keyboard height.
- * @param contentHeight - Total height of the scrollable content.
- * @param layoutHeight - Visible height of the scroll view.
- * @param inverted - Whether the list is inverted.
- * @returns The absolute contentOffset.y to set.
- * @example
- * ```ts
- * computeIOSContentOffset(100, 300, 1000, 800, false); // 400
- * ```
- */
-export function computeIOSContentOffset(
-  relativeScroll: number,
-  keyboardHeight: number,
-  contentHeight: number,
-  layoutHeight: number,
-  inverted: boolean,
-): number {
-  "worklet";
-
-  if (inverted) {
-    const maxScroll = Math.max(contentHeight - layoutHeight, 0);
-
-    return Math.max(
-      Math.min(relativeScroll - keyboardHeight, maxScroll),
-      -keyboardHeight,
-    );
-  }
-
-  const maxScroll = Math.max(contentHeight - layoutHeight + keyboardHeight, 0);
-
-  return Math.min(Math.max(keyboardHeight + relativeScroll, 0), maxScroll);
-}

package/src/components/ChatKit/useChatKeyboard/index.ts

@@ -1,228 +0,0 @@
-import { Platform } from "react-native";
-import { interpolate, scrollTo, useSharedValue } from "react-native-reanimated";
-
-import { useKeyboardHandler } from "../../../hooks";
-import useScrollState from "../../hooks/useScrollState";
-
-import {
-  clampedScrollTarget,
-  computeIOSContentOffset,
-  isScrollAtEnd,
-  shouldShiftContent,
-} from "./helpers";
-
-import type { AnimatedRef, SharedValue } from "react-native-reanimated";
-import type Reanimated from "react-native-reanimated";
-
-const OS = Platform.OS;
-
-type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
-
-type UseChatKeyboardOptions = {
-  inverted: boolean;
-  keyboardLiftBehavior: KeyboardLiftBehavior;
-  freeze: boolean;
-  offset: number;
-};
-
-type UseChatKeyboardReturn = {
-  /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom on Android. */
-  padding: SharedValue<number>;
-  /** Absolute Y content offset for iOS (set once in onStart). `undefined` on Android. */
-  contentOffsetY: SharedValue<number> | undefined;
-  /** TranslateY for the container wrapper on Android inverted lists. 0 otherwise. */
-  containerTranslateY: SharedValue<number>;
-};
-
-/**
- * Hook that manages keyboard-driven scrolling for chat-style scroll views.
- * Calculates padding (extra scrollable space) and content shift values,
- * using the optimal strategy per platform.
- *
- * @param scrollViewRef - Animated ref to the scroll view.
- * @param options - Configuration for inverted and keyboardLiftBehavior.
- * @returns Shared values for padding, contentOffsetY (iOS), and containerTranslateY (Android inverted).
- * @example
- * ```tsx
- * const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(ref, {
- *   inverted: false,
- *   keyboardLiftBehavior: "always",
- * });
- * ```
- */
-function useChatKeyboard(
-  scrollViewRef: AnimatedRef<Reanimated.ScrollView>,
-  options: UseChatKeyboardOptions,
-): UseChatKeyboardReturn {
-  const { inverted, keyboardLiftBehavior, freeze, offset } = options;
-
-  const padding = useSharedValue(0);
-  const contentOffsetY = useSharedValue(0);
-  const containerTranslateY = useSharedValue(0);
-  const offsetBeforeScroll = useSharedValue(0);
-  const targetKeyboardHeight = useSharedValue(0);
-
-  const { layout, size, offset: scroll } = useScrollState(scrollViewRef);
-
-  const getEffectiveHeight = (height: number): number => {
-    "worklet";
-
-    if (offset === 0 || targetKeyboardHeight.value === 0) {
-      return height;
-    }
-
-    return interpolate(
-      height,
-      [0, targetKeyboardHeight.value],
-      [0, Math.max(targetKeyboardHeight.value - offset, 0)],
-    );
-  };
-
-  useKeyboardHandler(
-    {
-      onStart: (e) => {
-        "worklet";
-
-        if (freeze) {
-          return;
-        }
-
-        if (e.height > 0) {
-          // eslint-disable-next-line react-compiler/react-compiler
-          targetKeyboardHeight.value = e.height;
-        }
-
-        const effective = getEffectiveHeight(e.height);
-
-        const atEnd = isScrollAtEnd(
-          scroll.value,
-          layout.value.height,
-          size.value.height,
-        );
-
-        if (OS === "ios") {
-          // iOS: set padding + contentOffset once in onStart
-          const relativeScroll = inverted
-            ? scroll.value + padding.value
-            : scroll.value - padding.value;
-
-          padding.value = effective;
-
-          if (!shouldShiftContent(keyboardLiftBehavior, atEnd)) {
-            return;
-          }
-
-          if (
-            keyboardLiftBehavior === "persistent" &&
-            effective < padding.value
-          ) {
-            return;
-          }
-
-          contentOffsetY.value = computeIOSContentOffset(
-            relativeScroll,
-            effective,
-            size.value.height,
-            layout.value.height,
-            inverted,
-          );
-        } else if (e.height > 0) {
-          // Android: keyboard opening — set padding + capture scroll position
-          padding.value = effective;
-          offsetBeforeScroll.value = scroll.value;
-
-          if (keyboardLiftBehavior === "whenAtEnd" && !atEnd) {
-            // Sentinel: don't scroll in onMove
-            offsetBeforeScroll.value = -1;
-          }
-        } else {
-          // Android: keyboard closing — re-capture from current position
-          // so onMove smoothly scrolls back from where the user is now
-          offsetBeforeScroll.value = scroll.value - padding.value;
-        }
-      },
-      onMove: (e) => {
-        "worklet";
-
-        if (freeze) {
-          return;
-        }
-
-        // iOS doesn't need per-frame updates (contentOffset handles it)
-        if (OS === "ios") {
-          return;
-        }
-
-        if (!shouldShiftContent(keyboardLiftBehavior, true)) {
-          return;
-        }
-
-        // "whenAtEnd" sentinel check
-        if (offsetBeforeScroll.value === -1) {
-          return;
-        }
-
-        const effective = getEffectiveHeight(e.height);
-
-        if (inverted) {
-          // Android inverted: translateY on container
-          if (
-            keyboardLiftBehavior === "persistent" &&
-            effective < Math.abs(containerTranslateY.value)
-          ) {
-            return;
-          }
-
-          containerTranslateY.value = -effective;
-        } else {
-          // Android non-inverted: scrollTo per-frame
-          if (
-            keyboardLiftBehavior === "persistent" &&
-            effective < scroll.value - offsetBeforeScroll.value
-          ) {
-            return;
-          }
-
-          const target = clampedScrollTarget(
-            offsetBeforeScroll.value,
-            effective,
-            size.value.height,
-            layout.value.height,
-          );
-
-          scrollTo(scrollViewRef, 0, target, false);
-        }
-      },
-      onEnd: (e) => {
-        "worklet";
-
-        if (freeze) {
-          return;
-        }
-
-        const effective = getEffectiveHeight(e.height);
-
-        padding.value = effective;
-
-        if (
-          OS !== "ios" &&
-          inverted &&
-          e.height === 0 &&
-          keyboardLiftBehavior !== "persistent"
-        ) {
-          containerTranslateY.value = 0;
-        }
-      },
-    },
-    [inverted, keyboardLiftBehavior, freeze, offset],
-  );
-
-  return {
-    padding,
-    contentOffsetY: OS === "ios" ? contentOffsetY : undefined,
-    containerTranslateY,
-  };
-}
-
-export { useChatKeyboard };
-export type { KeyboardLiftBehavior };