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

package/src/components/ScrollViewWithBottomPadding/index.tsx

@@ -0,0 +1,216 @@
+import React, { forwardRef, useState } from "react";
+import { Platform } from "react-native";
+import Reanimated, {
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { ClippingScrollView } from "../../bindings";
+
+import styles from "./styles";
+
+import type { ScrollViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+
+const OS = Platform.OS;
+const ReanimatedClippingScrollView =
+  OS === "android" || (OS as string) === "harmony"
+    ? Reanimated.createAnimatedComponent(ClippingScrollView)
+    : ClippingScrollView;
+
+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;
+};
+
+type ScrollViewWithBottomPaddingProps = {
+  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;
+
+const ScrollViewWithBottomPadding = forwardRef<
+  Reanimated.ScrollView,
+  ScrollViewWithBottomPaddingProps
+>(
+  (
+    {
+      ScrollViewComponent,
+      bottomPadding,
+      scrollIndicatorPadding,
+      contentInset,
+      scrollIndicatorInsets,
+      inverted,
+      contentOffsetY,
+      applyWorkaroundForContentInsetHitTestBug,
+      onContentInsetChange,
+      contentContainerStyle,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const prevContentOffsetY = useSharedValue<number | null>(null);
+
+    // HarmonyOS workaround: ArkUI ScrollView's scrollable range only follows
+    // contentSize (contentInset prop is dropped, padding/scrollToOverflowEnabled
+    // don't extend it). So we mirror the keyboard-driven bottomPadding into the
+    // inner ScrollView's contentContainerStyle.paddingBottom to actually expand
+    // contentSize, letting the worklet's scrollTo reach the keyboard area.
+    const isHarmony = (OS as string) === "harmony";
+    const [harmonyKbPad, setHarmonyKbPad] = useState(0);
+    useAnimatedReaction(
+      () => (isHarmony ? bottomPadding.value : 0),
+      (cur, prev) => {
+        if (isHarmony && cur !== prev) {
+          runOnJS(setHarmonyKbPad)(Math.round(cur));
+        }
+      },
+      [isHarmony],
+    );
+
+    const insets = useDerivedValue(() => {
+      const dynamicTop = inverted ? bottomPadding.value : 0;
+      const dynamicBottom = !inverted ? bottomPadding.value : 0;
+
+      return {
+        dynamic: {
+          top: dynamicTop,
+          bottom: dynamicBottom,
+        },
+        effective: {
+          top: dynamicTop + (contentInset?.top || 0),
+          bottom: dynamicBottom + (contentInset?.bottom || 0),
+          left: contentInset?.left || 0,
+          right: contentInset?.right || 0,
+        } as ScrollViewContentInsets,
+      };
+    }, [
+      inverted,
+      contentInset?.top,
+      contentInset?.bottom,
+      contentInset?.left,
+      contentInset?.right,
+    ]);
+
+    useAnimatedReaction(
+      () => insets.value.effective,
+      (current, previous) => {
+        if (!onContentInsetChange) {
+          return;
+        }
+        if (
+          previous &&
+          current.top === previous.top &&
+          current.bottom === previous.bottom &&
+          current.left === previous.left &&
+          current.right === previous.right
+        ) {
+          return;
+        }
+        runOnJS(onContentInsetChange)(current);
+      },
+      [onContentInsetChange],
+    );
+
+    const animatedProps = useAnimatedProps(() => {
+      const { dynamic, effective } = insets.value;
+
+      const indicatorPadding = scrollIndicatorPadding ?? bottomPadding;
+      const indicatorTop =
+        (inverted ? indicatorPadding.value : 0) +
+        (scrollIndicatorInsets?.top || 0);
+      const indicatorBottom =
+        (!inverted ? indicatorPadding.value : 0) +
+        (scrollIndicatorInsets?.bottom || 0);
+
+      const result: Record<string, unknown> = {
+        // iOS prop
+        contentInset: effective,
+        scrollIndicatorInsets: {
+          bottom: indicatorBottom,
+          top: indicatorTop,
+          right: scrollIndicatorInsets?.right,
+          left: scrollIndicatorInsets?.left,
+        },
+        // Android prop
+        contentInsetBottom: dynamic.bottom,
+        contentInsetTop: dynamic.top,
+      };
+
+      if (contentOffsetY) {
+        const curr = contentOffsetY.value;
+
+        if (curr !== prevContentOffsetY.value) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          prevContentOffsetY.value = curr;
+          result.contentOffset = { x: 0, y: curr };
+        }
+      }
+
+      return result;
+    }, [
+      scrollIndicatorInsets?.bottom,
+      scrollIndicatorInsets?.top,
+      scrollIndicatorInsets?.right,
+      scrollIndicatorInsets?.left,
+      inverted,
+      contentOffsetY,
+    ]);
+
+    return (
+      <ReanimatedClippingScrollView
+        animatedProps={animatedProps}
+        applyWorkaroundForContentInsetHitTestBug={
+          applyWorkaroundForContentInsetHitTestBug
+        }
+        style={styles.container}
+      >
+        <ScrollViewComponent
+          ref={ref}
+          animatedProps={animatedProps}
+          {...rest}
+          contentContainerStyle={
+            isHarmony
+              ? [
+                  contentContainerStyle,
+                  inverted
+                    ? { paddingTop: harmonyKbPad }
+                    : { paddingBottom: harmonyKbPad },
+                ]
+              : contentContainerStyle
+          }
+        >
+          {children}
+        </ScrollViewComponent>
+      </ReanimatedClippingScrollView>
+    );
+  },
+);
+
+export default ScrollViewWithBottomPadding;

package/src/components/ScrollViewWithBottomPadding/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+});
+
+export default styles;

package/src/components/hooks/useColorScheme.ts

@@ -1,6 +1,6 @@
-import { useColorScheme as useColorSchemeRN } from "react-native";
-
-const useColorScheme = (): "light" | "dark" =>
-	useColorSchemeRN() === "dark" ? "dark" : "light";
-
-export default useColorScheme;
+import { useColorScheme as useColorSchemeRN } from "react-native";
+
+const useColorScheme = (): "light" | "dark" =>
+  useColorSchemeRN() === "dark" ? "dark" : "light";
+
+export default useColorScheme;

package/src/components/hooks/useCombinedRef.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+
+import type { MutableRefObject, Ref, RefCallback } from "react";
+
+const useCombinedRef = <T>(...refs: Ref<T>[]): RefCallback<T> => {
+  return useCallback((value: T | null) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+
+      if (typeof ref === "function") {
+        ref(value);
+      } else {
+        (ref as MutableRefObject<T | null>).current = value;
+      }
+    }
+    // eslint-disable-next-line react-compiler/react-compiler
+  }, refs);
+};
+
+export default useCombinedRef;

package/src/components/hooks/useScrollState.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect } from "react";
+import { useEvent, useSharedValue } from "react-native-reanimated";
+
+import { useEventHandlerRegistration } from "../../internal";
+
+import type { LayoutChangeEvent } from "react-native";
+import type { AnimatedRef } from "react-native-reanimated";
+import type Reanimated from "react-native-reanimated";
+
+const NATIVE_SCROLL_EVENT_NAMES = [
+  "onScroll",
+  "onScrollBeginDrag",
+  "onScrollEndDrag",
+  "onMomentumScrollBegin",
+  "onMomentumScrollEnd",
+];
+
+type ScrollEvent = {
+  contentOffset: {
+    x: number;
+    y: number;
+  };
+  layoutMeasurement: {
+    width: number;
+    height: number;
+  };
+  contentSize: {
+    width: number;
+    height: number;
+  };
+};
+
+const useScrollState = (ref: AnimatedRef<Reanimated.ScrollView>) => {
+  const offset = useSharedValue(0);
+  const layout = useSharedValue({ width: 0, height: 0 });
+  const size = useSharedValue({ width: 0, height: 0 });
+
+  const register = useEventHandlerRegistration(ref);
+
+  const eventHandler = useEvent((event: ScrollEvent) => {
+    "worklet";
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    offset.value = event.contentOffset.y;
+    layout.value = event.layoutMeasurement;
+    size.value = event.contentSize;
+  }, NATIVE_SCROLL_EVENT_NAMES);
+
+  useEffect(() => {
+    const cleanup = register(eventHandler);
+
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  // `onContentSizeChange` is synthesized in JS (from the content container's
+  // onLayout) and `onLayout` has a different payload shape than scroll events,
+  // so neither can be reliably captured via native event registration.
+  // Instead we expose callbacks for the consumer to attach as props.
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      layout.value = {
+        width: e.nativeEvent.layout.width,
+        height: e.nativeEvent.layout.height,
+      };
+    },
+    [layout],
+  );
+
+  const onContentSizeChange = useCallback(
+    (w: number, h: number) => {
+      size.value = { width: w, height: h };
+    },
+    [size],
+  );
+
+  return { offset, layout, size, onLayout, onContentSizeChange };
+};
+
+export default useScrollState;

package/src/components/index.ts

@@ -1,11 +1,14 @@
-export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
-export { default as KeyboardStickyView } from "./KeyboardStickyView";
-export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
-export {
-  default as KeyboardToolbar,
-  DefaultKeyboardToolbarTheme,
-} from "./KeyboardToolbar";
-export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
-export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
-export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
-export type { KeyboardToolbarProps } from "./KeyboardToolbar";
+export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { default as KeyboardStickyView } from "./KeyboardStickyView";
+export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
+export { default as KeyboardChatScrollView } from "./KeyboardChatScrollView";
+export {
+  default as KeyboardToolbar,
+  DefaultKeyboardToolbarTheme,
+} from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
+export type { KeyboardAwareScrollViewRef } from "./KeyboardAwareScrollView";
+export type { KeyboardChatScrollViewProps } from "./KeyboardChatScrollView/types";
+export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/constants.ts

@@ -1,19 +1,23 @@
-// copied from `android.view.WindowManager.LayoutParams`
-export enum AndroidSoftInputModes {
-  SOFT_INPUT_ADJUST_NOTHING = 48,
-  SOFT_INPUT_ADJUST_PAN = 32,
-  SOFT_INPUT_ADJUST_RESIZE = 16,
-  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
-  SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
-  SOFT_INPUT_MASK_ADJUST = 240,
-  SOFT_INPUT_MASK_STATE = 15,
-  SOFT_INPUT_MODE_CHANGED = 512,
-  SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
-  SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
-  SOFT_INPUT_STATE_HIDDEN = 2,
-  SOFT_INPUT_STATE_UNCHANGED = 1,
-  // temporarily disable this rule to avoid breaking changes.
-  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
-  SOFT_INPUT_STATE_UNSPECIFIED = 0,
-  SOFT_INPUT_STATE_VISIBLE = 4,
-}
+import { KeyboardControllerNative } from "./bindings";
+
+// copied from `android.view.WindowManager.LayoutParams`
+export enum AndroidSoftInputModes {
+  SOFT_INPUT_ADJUST_NOTHING = 48,
+  SOFT_INPUT_ADJUST_PAN = 32,
+  SOFT_INPUT_ADJUST_RESIZE = 16,
+  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
+  SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
+  SOFT_INPUT_MASK_ADJUST = 240,
+  SOFT_INPUT_MASK_STATE = 15,
+  SOFT_INPUT_MODE_CHANGED = 512,
+  SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
+  SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
+  SOFT_INPUT_STATE_HIDDEN = 2,
+  SOFT_INPUT_STATE_UNCHANGED = 1,
+  // temporarily disable this rule to avoid breaking changes.
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  SOFT_INPUT_STATE_UNSPECIFIED = 0,
+  SOFT_INPUT_STATE_VISIBLE = 4,
+}
+export const KEYBOARD_BORDER_RADIUS =
+  KeyboardControllerNative.getConstants().keyboardBorderRadius;

package/src/context.ts

@@ -1,68 +1,70 @@
-import { createContext, useContext } from "react";
-import { Animated } from "react-native";
-
-import type {
-  FocusedInputHandlers,
-  FocusedInputLayoutChangedEvent,
-  KeyboardHandlers,
-} from "./types";
-import type React from "react";
-import type { SharedValue } from "react-native-reanimated";
-
-export type AnimatedContext = {
-  progress: Animated.Value;
-  height: Animated.AnimatedMultiplication<number>;
-};
-export type ReanimatedContext = {
-  progress: SharedValue<number>;
-  height: SharedValue<number>;
-};
-export type KeyboardAnimationContext = {
-  enabled: boolean;
-  animated: AnimatedContext;
-  reanimated: ReanimatedContext;
-  layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
-  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
-  setInputHandlers: (handlers: FocusedInputHandlers) => void;
-  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
-};
-const NOOP = () => {};
-const NESTED_NOOP = () => NOOP;
-const withSharedValue = <T>(value: T): SharedValue<T> => ({
-  value,
-  addListener: NOOP,
-  removeListener: NOOP,
-  modify: NOOP,
-  get: () => value,
-  set: NOOP,
-});
-const DEFAULT_SHARED_VALUE = withSharedValue(0);
-const DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(
-  null,
-);
-const defaultContext: KeyboardAnimationContext = {
-  enabled: true,
-  animated: {
-    progress: new Animated.Value(0),
-    height: new Animated.Value(0),
-  },
-  reanimated: {
-    progress: DEFAULT_SHARED_VALUE,
-    height: DEFAULT_SHARED_VALUE,
-  },
-  layout: DEFAULT_LAYOUT,
-  setKeyboardHandlers: NESTED_NOOP,
-  setInputHandlers: NESTED_NOOP,
-  setEnabled: NOOP,
-};
-export const KeyboardContext = createContext(defaultContext);
-export const useKeyboardContext = () => {
-  const context = useContext(KeyboardContext);
-  if (__DEV__ && context === defaultContext) {
-    console.warn(
-      "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work.",
-    );
-  }
-
-  return context;
-};
+import { createContext, useContext } from "react";
+import { Animated } from "react-native";
+
+import type {
+  FocusedInputHandlers,
+  FocusedInputLayoutChangedEvent,
+  KeyboardHandlers,
+} from "./types";
+import type React from "react";
+import type { SharedValue } from "react-native-reanimated";
+
+export type AnimatedContext = {
+  progress: Animated.Value;
+  height: Animated.AnimatedMultiplication<number>;
+};
+export type ReanimatedContext = {
+  progress: SharedValue<number>;
+  height: SharedValue<number>;
+};
+export type KeyboardAnimationContext = {
+  enabled: boolean;
+  animated: AnimatedContext;
+  reanimated: ReanimatedContext;
+  layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
+  update: () => Promise<void>;
+  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
+  setInputHandlers: (handlers: FocusedInputHandlers) => void;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const NOOP = () => {};
+const NESTED_NOOP = () => NOOP;
+const withSharedValue = <T>(value: T): SharedValue<T> => ({
+  value,
+  addListener: NOOP,
+  removeListener: NOOP,
+  modify: NOOP,
+  get: () => value,
+  set: NOOP,
+});
+const DEFAULT_SHARED_VALUE = withSharedValue(0);
+const DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(
+  null,
+);
+const defaultContext: KeyboardAnimationContext = {
+  enabled: true,
+  animated: {
+    progress: new Animated.Value(0),
+    height: new Animated.Value(0),
+  },
+  reanimated: {
+    progress: DEFAULT_SHARED_VALUE,
+    height: DEFAULT_SHARED_VALUE,
+  },
+  layout: DEFAULT_LAYOUT,
+  update: () => Promise.resolve(),
+  setKeyboardHandlers: NESTED_NOOP,
+  setInputHandlers: NESTED_NOOP,
+  setEnabled: NOOP,
+};
+export const KeyboardContext = createContext(defaultContext);
+export const useKeyboardContext = () => {
+  const context = useContext(KeyboardContext);
+  if (__DEV__ && context === defaultContext) {
+    console.warn(
+      "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work.",
+    );
+  }
+
+  return context;
+};