@react-native-ohos/react-native-keyboard-controller 1.17.0-beta.2 → 1.17.0

package/lib/typescript/components/KeyboardChatScrollView/types.d.ts

@@ -0,0 +1,113 @@
+import type { AnimatedScrollViewComponent, ScrollViewContentInsets } from "../ScrollViewWithBottomPadding";
+import type { KeyboardLiftBehavior } from "./useChatKeyboard/types";
+import type { ScrollViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+export type KeyboardChatScrollViewProps = {
+    /** Custom component for `ScrollView`. Default is `ScrollView`. */
+    ScrollViewComponent?: AnimatedScrollViewComponent;
+    /** Whether list are using `inverted` prop. Default is `false`. */
+    inverted?: boolean;
+    /**
+     * The distance between the bottom of the screen and the `ScrollView`.
+     * When the keyboard appears, the `ScrollView` will only push content by the effective
+     * distance (`keyboardHeight - offset`) instead of the full keyboard height.
+     *
+     * Useful when the input is not at the very bottom of the screen (e.g., above safe area, above
+     * bottom tabs, etc. - in this case offset should be equal to the height of the elements between
+     * `ScrollView` and bottom of the screen).
+     *
+     * Default is `0`.
+     */
+    offset?: number;
+    /**
+     * Determines how the chat content should behave when the keyboard appears, specifically whether
+     * the scroll view should automatically lift its content to keep it visible above the keyboard.
+     *
+     * Possible values:
+     * - `'always'`: The content always lifts along with the keyboard, ensuring the messages from the bottom part of screen
+     * remain visible regardless of the current scroll position. This is the default behavior for most chat applications (used in Telegram).
+     * - `'whenAtEnd'`: The content lifts only if the scroll view is at the end (i.e., the last message
+     * is visible or near the bottom). This prevents unnecessary adjustments when the user is scrolling
+     * through older messages (ChatGPT mobile app behavior).
+     * - `'persistent'`: The content always lifts when the keyboard appears (similar to `'always'`), but
+     * does not reset (lower) when the keyboard hides. This mimics behaviors where the view remains adjusted
+     * after keyboard dismissal to maintain focus on the latest content without shifting back (Claude mobile app behavior).
+     * - `'never'`: The content does not lift at all when the keyboard appears. Use this for scenarios
+     * when you don't want to disturb user attention with animations (Perplexity mobile app behavior).
+     *
+     * Default is `'always'`.
+     */
+    keyboardLiftBehavior?: KeyboardLiftBehavior;
+    /**
+     * When `true`, freezes all keyboard-driven layout changes (padding, content offset, scroll position).
+     * Useful when dismissing the keyboard to open a bottom sheet — prevents visual disruption
+     * while the sheet is visible.
+     *
+     * Default is `false`.
+     */
+    freeze?: boolean | SharedValue<boolean>;
+    /**
+     * A shared value representing additional padding from external elements
+     * (e.g., a growing multiline `TextInput` in a `KeyboardStickyView`).
+     *
+     * When this value changes:
+     * - The scrollable range is always extended/contracted (via `contentInset`).
+     * - The scroll position is conditionally adjusted based on `keyboardLiftBehavior`.
+     *
+     * Default is `undefined` (no extra padding).
+     */
+    extraContentPadding?: SharedValue<number>;
+    /**
+     * When `true`, applies a runtime workaround for a React Native 0.81+ bug
+     * where the ScrollView's `contentInset` area does not respond to touch/scroll
+     * gestures (facebook/react-native#54123).
+     *
+     * This uses Objective-C runtime method swizzling on the ScrollView's container
+     * view, which is inherently fragile. Only enable if you are affected by the
+     * upstream bug and understand the risks.
+     *
+     * iOS only. Default is `false`.
+     */
+    applyWorkaroundForContentInsetHitTestBug?: boolean;
+    /**
+     * A shared value representing a minimum inset floor (in pixels).
+     *
+     * When set, the total bottom padding is computed as:
+     * `max(blankSpace, keyboardPadding + extraContentPadding)`
+     *
+     * This means the keyboard "absorbs" into the minimum padding rather than adding to it:
+     * - When `blankSpace >= keyboard + extraContentPadding`: content does NOT move on keyboard open/close.
+     * - When `blankSpace < keyboard + extraContentPadding`: content moves, but only by the excess amount.
+     *
+     * Useful in AI chat apps where a sent message needs space below it (to push it to the top
+     * of the viewport) while the AI response streams in, without that space causing extra movement
+     * when the keyboard opens.
+     *
+     * Default is `undefined` (equivalent to `0` — no minimum floor).
+     */
+    blankSpace?: SharedValue<number>;
+    /**
+     * Fires whenever the effective content inset changes — the static `contentInset`
+     * prop combined with the dynamic keyboard-driven padding.
+     *
+     * Useful on Android, where the synthetic content inset is not reflected in the native
+     * `onScroll` event payload. Consumers such as virtualized lists computing their own
+     * `scrollToEnd` target can use this to track the current inset alongside scroll offsets.
+     */
+    onContentInsetChange?: (insets: ScrollViewContentInsets) => void;
+    /**
+     * Fires whenever the visibility of the content "end" changes — both when the user
+     * arrives at the end and when they leave it. The boolean parameter reflects the new state.
+     *
+     * For non-inverted lists, the "end" is the bottom of the content. For inverted lists
+     * (`inverted={true}`), the "end" is the top of the scroll view, where the latest messages
+     * are rendered. The same internal detection drives `keyboardLiftBehavior="whenAtEnd"`.
+     *
+     * The callback can be either a plain JS function or a Reanimated worklet — the type is
+     * detected automatically. Worklets run on the UI thread; plain functions are dispatched
+     * via `runOnJS`.
+     *
+     * Fires once on mount with the initial state (after the scroll view has been measured).
+     */
+    onEndVisible?: (visible: boolean) => void;
+} & ScrollViewProps;

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

@@ -0,0 +1,132 @@
+import type { KeyboardLiftBehavior } from "./types";
+/**
+ * Map the current keyboard height to an effective height that accounts for a
+ * fixed offset (e.g. Bottom safe-area or tab-bar height)..
+ *
+ * @param height - Current keyboard height.
+ * @param targetKeyboardHeight - Full target keyboard height (captured on keyboard open).
+ * @param offset - Fixed distance between the scroll-view bottom and the screen bottom.
+ * @returns Effective height after subtracting the offset proportionally.
+ * @example
+ * ```ts
+ * getEffectiveHeight(300, 300, 50); // 250
+ * getEffectiveHeight(150, 300, 50); // 125
+ * ```
+ */
+export declare const getEffectiveHeight: (height: number, targetKeyboardHeight: number, offset: number) => number;
+/**
+ * Check whether the scroll view is at the end of its content.
+ *
+ * For non-inverted lists the "end" is the bottom of the content.
+ * For inverted lists the "end" is the top (scroll offset near 0),
+ * because that is where the latest messages are displayed.
+ *
+ * @param scrollOffset - Current vertical scroll offset.
+ * @param layoutHeight - Visible height of the scroll view.
+ * @param contentHeight - Total height of the scrollable content.
+ * @param inverted - Whether the list is inverted.
+ * @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)
+ * const atEndInverted = isScrollAtEnd(5, 800, 2000, true); // true (5 <= 20)
+ * ```
+ */
+export declare const isScrollAtEnd: (scrollOffset: number, layoutHeight: number, contentHeight: number, inverted?: boolean) => 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 const shouldShiftContent: (behavior: KeyboardLiftBehavior, isAtEnd: boolean) => boolean;
+/**
+ * Compute the fraction of minimum padding space currently visible in the viewport (0–1).
+ *
+ * The minimum padding space lives in the scroll view's contentInset, NOT in the
+ * content itself.  So `contentHeight` (from onContentSizeChange / scroll
+ * events) does **not** include it.  The visible portion is how far the
+ * viewport extends past the content boundary into the inset area.
+ *
+ * For non-inverted lists the padding is in contentInset.bottom.
+ * For inverted lists the padding is in contentInset.top (negative scroll).
+ *
+ * @param scrollOffset - Current vertical scroll offset.
+ * @param layoutHeight - Visible height of the scroll view.
+ * @param contentHeight - Height of the scroll content (excludes insets).
+ * @param blankSpace - Size of the minimum padding inset area.
+ * @param inverted - Whether the list is inverted.
+ * @returns A value between 0 (padding fully off-screen) and 1 (padding fully visible).
+ * @example
+ * ```ts
+ * // Non-inverted: contentHeight=1500, layout=800, blankSpace=300
+ * getVisibleMinimumPaddingFraction(1500, 800, 1500, 300, false); // 1   (at end, viewport past content)
+ * getVisibleMinimumPaddingFraction(850, 800, 1500, 300, false);  // 0.5 (half padding visible)
+ * getVisibleMinimumPaddingFraction(700, 800, 1500, 300, false);  // 0   (padding off-screen)
+ * ```
+ */
+export declare const getVisibleMinimumPaddingFraction: (scrollOffset: number, layoutHeight: number, contentHeight: number, blankSpace: number, inverted: boolean) => number;
+/**
+ * Compute how much of the minimum content padding absorbs the keyboard + extraContentPadding.
+ *
+ * @param blankSpace - Minimum inset floor.
+ * @param extraContentPadding - Extra content padding from external elements.
+ * @returns The portion of blankSpace that absorbs keyboard displacement.
+ * @example
+ * ```ts
+ * getMinimumPaddingAbsorbed(500, 20); // 480
+ * getMinimumPaddingAbsorbed(0, 20);   // 0
+ * ```
+ */
+export declare const getMinimumPaddingAbsorbed: (blankSpace: number, extraContentPadding: number) => number;
+/**
+ * Compute the effective scroll displacement after minimum padding absorption.
+ *
+ * @param rawEffective - Raw effective keyboard height.
+ * @param minimumPaddingAbsorbed - Amount absorbed by minimum content padding.
+ * @returns The scroll displacement after subtracting the absorbed portion.
+ * @example
+ * ```ts
+ * getScrollEffective(300, 200); // 100
+ * getScrollEffective(300, 400); // 0
+ * ```
+ */
+export declare const getScrollEffective: (rawEffective: number, minimumPaddingAbsorbed: number) => number;
+/**
+ * Compute the clamped scroll target for non-inverted lists.
+ *
+ * @param offsetBeforeScroll - Scroll position before keyboard appeared.
+ * @param keyboardHeight - Current keyboard height (used for scroll displacement).
+ * @param contentHeight - Total height of the scrollable content.
+ * @param layoutHeight - Visible height of the scroll view.
+ * @param totalPaddingForMaxScroll - Total padding to use for maxScroll calculation. When provided, used instead of keyboardHeight for the scrollable range. Defaults to keyboardHeight.
+ * @returns Clamped scroll target between 0 and maxScroll.
+ * @example
+ * ```ts
+ * clampedScrollTarget(100, 300, 1000, 800); // 400
+ * clampedScrollTarget(100, 100, 1000, 800, 500); // 200, maxScroll uses 500
+ * ```
+ */
+export declare const clampedScrollTarget: (offsetBeforeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number, totalPaddingForMaxScroll?: number) => number;
+/**
+ * Compute contentOffset.y for iOS lists.
+ *
+ * @param relativeScroll - Scroll position relative to current inset.
+ * @param keyboardHeight - Target keyboard height (used for scroll displacement).
+ * @param contentHeight - Total height of the scrollable content.
+ * @param layoutHeight - Visible height of the scroll view.
+ * @param inverted - Whether the list is inverted.
+ * @param totalPaddingForMaxScroll - Total padding to use for maxScroll calculation. When provided, used instead of keyboardHeight for the scrollable range. Defaults to keyboardHeight.
+ * @returns The absolute contentOffset.y to set.
+ * @example
+ * ```ts
+ * computeIOSContentOffset(100, 300, 1000, 800, false); // 400
+ * ```
+ */
+export declare const computeIOSContentOffset: (relativeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number, inverted: boolean, totalPaddingForMaxScroll?: number) => number;

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

@@ -0,0 +1,18 @@
+import type { UseChatKeyboardOptions, UseChatKeyboardReturn } from "./types";
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+/**
+ * Hook that manages keyboard-driven scrolling for chat-style scroll views.
+ * Calculates padding (extra scrollable space) and content shift values,
+ * using per-frame scrollTo updates (Android and other platforms).
+ *
+ * @param scrollViewRef - Animated ref to the scroll view.
+ * @param options - Configuration for inverted and keyboardLiftBehavior.
+ * @returns Shared values for padding and contentOffsetY (always `undefined`).
+ * @example
+ * ```tsx
+ * const { padding } = useChatKeyboard(ref, { inverted: false, keyboardLiftBehavior: "always" });
+ * ```
+ */
+declare function useChatKeyboard(scrollViewRef: AnimatedRef<Reanimated.ScrollView>, options: UseChatKeyboardOptions): UseChatKeyboardReturn;
+export { useChatKeyboard };

package/lib/typescript/components/KeyboardChatScrollView/useChatKeyboard/index.ios.d.ts

@@ -0,0 +1,21 @@
+import type { UseChatKeyboardOptions, UseChatKeyboardReturn } from "./types";
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+/**
+ * Hook that manages keyboard-driven scrolling for chat-style scroll views.
+ * Calculates padding (extra scrollable space) and content shift values,
+ * using iOS-specific strategy (contentOffset set once in onStart).
+ *
+ * @param scrollViewRef - Animated ref to the scroll view.
+ * @param options - Configuration for inverted and keyboardLiftBehavior.
+ * @returns Shared values for padding and contentOffsetY.
+ * @example
+ * ```tsx
+ * const { padding, contentOffsetY } = useChatKeyboard(ref, {
+ *   inverted: false,
+ *   keyboardLiftBehavior: "always",
+ * });
+ * ```
+ */
+declare function useChatKeyboard(scrollViewRef: AnimatedRef<Reanimated.ScrollView>, options: UseChatKeyboardOptions): UseChatKeyboardReturn;
+export { useChatKeyboard };

package/lib/typescript/components/KeyboardChatScrollView/useChatKeyboard/types.d.ts

@@ -0,0 +1,37 @@
+import type { LayoutChangeEvent } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
+type UseChatKeyboardOptions = {
+    inverted: boolean;
+    keyboardLiftBehavior: KeyboardLiftBehavior;
+    freeze: SharedValue<boolean>;
+    offset: number;
+    blankSpace: SharedValue<number>;
+    /** Extra content padding shared value — needed on iOS to correctly clamp contentOffset. */
+    extraContentPadding: SharedValue<number>;
+};
+type UseChatKeyboardReturn = {
+    /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom/contentInsetTop on Android. */
+    padding: SharedValue<number>;
+    /** Raw keyboard height updated every frame in onMove. Used to force Reanimated commits on Fabric. */
+    currentHeight: SharedValue<number>;
+    /** Absolute Y content offset for iOS (set once in onStart). `undefined` on Android. */
+    contentOffsetY: SharedValue<number> | undefined;
+    /** Current vertical scroll offset. */
+    scroll: SharedValue<number>;
+    /** Visible viewport dimensions. */
+    layout: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    /** Total content dimensions. */
+    size: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    /** Callback to attach to ScrollView's onLayout prop to capture initial viewport dimensions. */
+    onLayout: (e: LayoutChangeEvent) => void;
+    /** Callback to attach to ScrollView's onContentSizeChange prop to capture initial content dimensions. */
+    onContentSizeChange: (w: number, h: number) => void;
+};
+export type { KeyboardLiftBehavior, UseChatKeyboardOptions, UseChatKeyboardReturn, };

package/lib/typescript/components/KeyboardChatScrollView/useEndVisible.d.ts

@@ -0,0 +1,17 @@
+import type { SharedValue } from "react-native-reanimated";
+type EndVisibleCallback = (visible: boolean) => void;
+type Options = {
+    scroll: SharedValue<number>;
+    layout: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    size: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    inverted: boolean;
+    onEndVisible?: EndVisibleCallback;
+};
+export declare const useEndVisible: ({ scroll, layout, size, inverted, onEndVisible, }: Options) => void;
+export {};

package/lib/typescript/components/KeyboardChatScrollView/useExtraContentPadding/index.d.ts

@@ -0,0 +1,45 @@
+import type { KeyboardLiftBehavior } from "../useChatKeyboard/types";
+import type { AnimatedRef, SharedValue } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+type UseExtraContentPaddingOptions = {
+    scrollViewRef: AnimatedRef<Reanimated.ScrollView>;
+    extraContentPadding: SharedValue<number>;
+    /** Keyboard-only padding from useChatKeyboard — used to compute total padding for clamping. */
+    keyboardPadding: SharedValue<number>;
+    /** Minimum inset floor — used to absorb keyboard and extraContentPadding changes. */
+    blankSpace: SharedValue<number>;
+    /** Current vertical scroll offset. */
+    scroll: SharedValue<number>;
+    /** Visible viewport dimensions. */
+    layout: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    /** Total content dimensions. */
+    size: SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    /** IOS only — when provided, sets contentOffset atomically with contentInset. */
+    contentOffsetY?: SharedValue<number>;
+    inverted: boolean;
+    keyboardLiftBehavior: KeyboardLiftBehavior;
+    freeze: SharedValue<boolean>;
+};
+/**
+ * Hook that reacts to `extraContentPadding` changes and conditionally
+ * adjusts the scroll position using `scrollTo` on both iOS and Android.
+ *
+ * Padding extension (scrollable range) is handled externally via a
+ * `useDerivedValue` that sums keyboard padding + extra content padding.
+ * This hook only handles the scroll correction.
+ *
+ * @param options - Configuration and shared values.
+ * @example
+ * ```tsx
+ * useExtraContentPadding({ scrollViewRef, extraContentPadding, ... });
+ * ```
+ */
+declare function useExtraContentPadding(options: UseExtraContentPaddingOptions): void;
+export { useExtraContentPadding };
+export type { UseExtraContentPaddingOptions };

package/lib/typescript/components/KeyboardToolbar/Button.d.ts

@@ -1,10 +1,10 @@
 import React from "react";
 import type { KeyboardToolbarTheme } from "./types";
 import type { PropsWithChildren } from "react";
-import type { ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 type ButtonProps = {
     disabled?: boolean;
-    onPress: () => void;
+    onPress: (event: GestureResponderEvent) => void;
     accessibilityLabel: string;
     accessibilityHint: string;
     testID: string;

package/lib/typescript/components/KeyboardToolbar/compound/components/Background.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ReactNode } from "react";
+declare const Background: React.FC<{
+    children: ReactNode;
+}>;
+export default Background;

package/lib/typescript/components/KeyboardToolbar/compound/components/Content.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+declare const Content: React.FC<ViewProps & {
+    children?: ReactNode;
+}>;
+export default Content;

package/lib/typescript/components/KeyboardToolbar/compound/components/Done.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+import type { ReactNode } from "react";
+declare const Done: React.FC<Omit<ButtonSubProps, "icon"> & {
+    text?: ReactNode;
+}>;
+export default Done;

package/lib/typescript/components/KeyboardToolbar/compound/components/Next.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+declare const Next: React.FC<ButtonSubProps>;
+export default Next;

package/lib/typescript/components/KeyboardToolbar/compound/components/Prev.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ButtonSubProps } from "./types";
+declare const Prev: React.FC<ButtonSubProps>;
+export default Prev;

package/lib/typescript/components/KeyboardToolbar/compound/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Background } from "./Background";
+export { default as Content } from "./Content";
+export { default as Done } from "./Done";
+export { default as Next } from "./Next";
+export { default as Prev } from "./Prev";

package/lib/typescript/components/KeyboardToolbar/compound/components/types.d.ts

@@ -0,0 +1,14 @@
+import type Arrow from "../../Arrow";
+import type Button from "../../Button";
+import type { ReactNode } from "react";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
+export type ButtonSubProps = {
+    children?: ReactNode;
+    onPress?: (event: GestureResponderEvent) => void;
+    disabled?: boolean;
+    testID?: string;
+    rippleRadius?: number;
+    style?: ViewStyle;
+    button?: typeof Button;
+    icon?: typeof Arrow;
+};

package/lib/typescript/components/KeyboardToolbar/compound/context.d.ts

@@ -0,0 +1,9 @@
+import type { KeyboardToolbarTheme } from "../types";
+type ToolbarContextType = {
+    theme: KeyboardToolbarTheme;
+    isPrevDisabled: boolean;
+    isNextDisabled: boolean;
+};
+export declare const ToolbarContext: import("react").Context<ToolbarContextType | undefined>;
+export declare const useToolbarContext: () => ToolbarContextType;
+export {};

package/lib/typescript/components/KeyboardToolbar/constants.d.ts

@@ -0,0 +1,10 @@
+import type { HEX } from "./types";
+export declare const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+export declare const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = "keyboard.toolbar.previous";
+export declare const TEST_ID_KEYBOARD_TOOLBAR_NEXT = "keyboard.toolbar.next";
+export declare const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = "keyboard.toolbar.content";
+export declare const TEST_ID_KEYBOARD_TOOLBAR_DONE = "keyboard.toolbar.done";
+export declare const KEYBOARD_TOOLBAR_HEIGHT = 42;
+export declare const DEFAULT_OPACITY: HEX;
+export declare const KEYBOARD_HAS_ROUNDED_CORNERS: boolean;
+export declare const OPENED_OFFSET: number;

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

@@ -1,52 +1,19 @@
 import React from "react";
-import Arrow from "./Arrow";
-import Button from "./Button";
+import { RCTKeyboardToolbarGroupView } from "../../bindings";
 import { colors } from "./colors";
-import type { HEX, KeyboardToolbarTheme } from "./types";
-import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
-import type { ReactNode } from "react";
-import type { ViewProps } from "react-native";
-export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "children"> & {
-    /** An element that is shown in the middle of the toolbar. */
-    content?: JSX.Element | null;
-    /** A set of dark/light colors consumed by toolbar component. */
-    theme?: KeyboardToolbarTheme;
-    /** Custom text for done button. */
-    doneText?: ReactNode;
-    /** Custom touchable component for toolbar (used for prev/next/done buttons). */
-    button?: typeof Button;
-    /** Custom icon component used to display next/prev buttons. */
-    icon?: typeof Arrow;
-    /**
-     * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
-     * and want to show only `Done` button. Default to `true`.
-     */
-    showArrows?: boolean;
-    /**
-     * A callback that is called when the user presses the next button along with the default action.
-     */
-    onNextCallback?: () => void;
-    /**
-     * A callback that is called when the user presses the previous button along with the default action.
-     */
-    onPrevCallback?: () => void;
-    /**
-     * A callback that is called when the user presses the done button along with the default action.
-     */
-    onDoneCallback?: () => void;
-    /**
-     * A component that applies blur effect to the toolbar.
-     */
-    blur?: JSX.Element | null;
-    /**
-     * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
-     */
-    opacity?: HEX;
-} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
+import { Background, Content, Done, Next, Prev } from "./compound/components";
+import type { KeyboardToolbarProps } from "./types";
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
  * `Done` buttons.
  */
-declare const KeyboardToolbar: React.FC<KeyboardToolbarProps>;
-export { colors as DefaultKeyboardToolbarTheme };
+declare const KeyboardToolbar: React.FC<KeyboardToolbarProps> & {
+    Background: typeof Background;
+    Content: typeof Content;
+    Prev: typeof Prev;
+    Next: typeof Next;
+    Done: typeof Done;
+    Group: typeof RCTKeyboardToolbarGroupView;
+};
+export { colors as DefaultKeyboardToolbarTheme, KeyboardToolbarProps };
 export default KeyboardToolbar;

package/lib/typescript/components/KeyboardToolbar/types.d.ts

@@ -1,4 +1,8 @@
-import type { ColorValue } from "react-native";
+import type Arrow from "./Arrow";
+import type Button from "./Button";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { ReactNode } from "react";
+import type { ColorValue, GestureResponderEvent, ViewProps } from "react-native";
 type Theme = {
     /** Color for arrow when it's enabled */
     primary: ColorValue;
@@ -15,4 +19,23 @@ export type KeyboardToolbarTheme = {
 };
 type HexSymbol = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "A" | "B" | "C" | "D" | "E" | "F" | "a" | "b" | "c" | "d" | "e" | "f";
 export type HEX = `${HexSymbol}${HexSymbol}`;
+type SafeAreaInsets = {
+    left: number;
+    right: number;
+};
+export type KeyboardToolbarProps = Omit<ViewProps, "style" | "testID" | "children"> & {
+    content?: React.JSX.Element | null;
+    theme?: KeyboardToolbarTheme;
+    doneText?: ReactNode;
+    button?: typeof Button;
+    icon?: typeof Arrow;
+    showArrows?: boolean;
+    onNextCallback?: (event: GestureResponderEvent) => void;
+    onPrevCallback?: (event: GestureResponderEvent) => void;
+    onDoneCallback?: (event: GestureResponderEvent) => void;
+    blur?: React.JSX.Element | null;
+    opacity?: HEX;
+    insets?: SafeAreaInsets;
+    children?: ReactNode;
+} & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 export {};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Reanimated from "react-native-reanimated";
+import type { ScrollViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+type AnimatedScrollViewProps = React.ComponentProps<typeof Reanimated.ScrollView>;
+export type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>>;
+export type ScrollViewContentInsets = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+declare const ScrollViewWithBottomPadding: React.ForwardRefExoticComponent<{
+    ScrollViewComponent: AnimatedScrollViewComponent;
+    children?: React.ReactNode;
+    inverted?: boolean;
+    bottomPadding: SharedValue<number>;
+    /** Padding for scroll indicator insets (excludes blankSpace). Falls back to bottomPadding when not provided. */
+    scrollIndicatorPadding?: SharedValue<number>;
+    /** Absolute Y content offset (iOS only, for KeyboardChatScrollView). */
+    contentOffsetY?: SharedValue<number>;
+    applyWorkaroundForContentInsetHitTestBug?: boolean;
+    /**
+     * Fires whenever the effective content inset changes (combines the static `contentInset`
+     * prop with the dynamic keyboard-driven padding). Useful on Android where the synthetic
+     * inset is not reflected in `onScroll` events.
+     */
+    onContentInsetChange?: (insets: ScrollViewContentInsets) => void;
+} & ScrollViewProps & React.RefAttributes<Reanimated.ScrollView>>;
+export default ScrollViewWithBottomPadding;

package/lib/typescript/components/ScrollViewWithBottomPadding/styles.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+    container: {
+        flexGrow: number;
+        flexShrink: number;
+    };
+};
+export default styles;

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

@@ -0,0 +1,3 @@
+import type { Ref, RefCallback } from "react";
+declare const useCombinedRef: <T>(...refs: Ref<T>[]) => RefCallback<T>;
+export default useCombinedRef;

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

@@ -0,0 +1,17 @@
+import type { LayoutChangeEvent } from "react-native";
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+declare const useScrollState: (ref: AnimatedRef<Reanimated.ScrollView>) => {
+    offset: import("react-native-reanimated").SharedValue<number>;
+    layout: import("react-native-reanimated").SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    size: import("react-native-reanimated").SharedValue<{
+        width: number;
+        height: number;
+    }>;
+    onLayout: (e: LayoutChangeEvent) => void;
+    onContentSizeChange: (w: number, h: number) => void;
+};
+export default useScrollState;