@react-native-ohos/react-native-keyboard-controller 1.16.8 → 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,5 +1,6 @@
 import { useColorScheme as useColorSchemeRN } from "react-native";
 
-const useColorScheme = () => useColorSchemeRN() || "light";
+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,6 +1,7 @@
 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,
@@ -8,4 +9,6 @@ export {
 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,3 +1,5 @@
+import { KeyboardControllerNative } from "./bindings";
+
 // copied from `android.view.WindowManager.LayoutParams`
 export enum AndroidSoftInputModes {
   SOFT_INPUT_ADJUST_NOTHING = 48,
@@ -17,3 +19,5 @@ export enum AndroidSoftInputModes {
   SOFT_INPUT_STATE_UNSPECIFIED = 0,
   SOFT_INPUT_STATE_VISIBLE = 4,
 }
+export const KEYBOARD_BORDER_RADIUS =
+  KeyboardControllerNative.getConstants().keyboardBorderRadius;

package/src/context.ts

@@ -22,6 +22,7 @@ export type KeyboardAnimationContext = {
   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>>;
@@ -51,6 +52,7 @@ const defaultContext: KeyboardAnimationContext = {
     height: DEFAULT_SHARED_VALUE,
   },
   layout: DEFAULT_LAYOUT,
+  update: () => Promise.resolve(),
   setKeyboardHandlers: NESTED_NOOP,
   setInputHandlers: NESTED_NOOP,
   setEnabled: NOOP,

package/src/hooks/index.ts

@@ -67,7 +67,7 @@ export function useKeyboardController() {
 export function useReanimatedFocusedInput() {
   const context = useKeyboardContext();
 
-  return { input: context.layout };
+  return { input: context.layout, update: context.update };
 }
 
 export function useFocusedInputHandler(
@@ -88,3 +88,4 @@ export function useFocusedInputHandler(
 }
 
 export * from "./useWindowDimensions";
+export * from "./useKeyboardState";

package/src/hooks/useKeyboardState/index.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+
+import { KeyboardEvents } from "../../bindings";
+import { KeyboardController } from "../../module";
+
+import type { IKeyboardState } from "../../types";
+
+const EVENTS = ["keyboardDidShow", "keyboardDidHide"] as const;
+
+const getLatestState = () => ({
+  ...KeyboardController.state(),
+  isVisible: KeyboardController.isVisible(),
+});
+
+type KeyboardStateSelector<T> = (state: IKeyboardState) => T;
+
+const defaultSelector: KeyboardStateSelector<IKeyboardState> = (state) => state;
+
+export function useKeyboardState<T = IKeyboardState>(
+  selector: KeyboardStateSelector<T> = defaultSelector as KeyboardStateSelector<T>,
+): T {
+  const [state, setState] = useState<T>(() => selector(getLatestState()));
+
+  useEffect(() => {
+    const subscriptions = EVENTS.map((event) =>
+      KeyboardEvents.addListener(event, () =>
+        // state will be updated by global listener first,
+        // so we simply read it and don't derive data from the event
+        setState(selector(getLatestState())),
+      ),
+    );
+    const willShowSubscription = KeyboardEvents.addListener(
+      "keyboardWillShow",
+      (event) =>
+        setState(
+          selector({ ...getLatestState(), appearance: event.appearance }),
+        ),
+    );
+
+    // we might have missed an update between reading a value in render and
+    // `addListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setState(selector(getLatestState()));
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+      willShowSubscription.remove();
+    };
+  }, []);
+
+  return state;
+}

package/src/index.ts

@@ -5,8 +5,10 @@ export * from "./hooks";
 export * from "./constants";
 export * from "./module";
 export * from "./types";
+export * from "./compat";
 
 export {
+  KeyboardChatScrollView,
   KeyboardAvoidingView,
   KeyboardStickyView,
   KeyboardAwareScrollView,
@@ -15,9 +17,11 @@ export {
   DefaultKeyboardToolbarTheme,
 } from "./components";
 export type {
+  KeyboardChatScrollViewProps,
   KeyboardAvoidingViewProps,
   KeyboardStickyViewProps,
   KeyboardAwareScrollViewProps,
+  KeyboardAwareScrollViewRef,
   KeyboardToolbarProps,
 } from "./components";
-export { OverKeyboardView } from "./views";
+export { OverKeyboardView, KeyboardExtender } from "./views";

package/src/internal.ts

@@ -2,8 +2,70 @@ import { useCallback, useRef } from "react";
 import { Animated } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 
+import { findNodeHandle } from "./utils/findNodeHandle";
+
+import type { EventHandlerProcessed } from "react-native-reanimated";
 import type { Handlers } from "./types";
 
+type ComponentOrHandle = Parameters<typeof findNodeHandle>[0];
+
+type WorkletHandler = {
+  registerForEvents: (viewTag: number) => void;
+  unregisterFromEvents: (viewTag: number) => void;
+};
+
+type WorkletHandlerOrWorkletHandlerObject =
+  | WorkletHandler
+  | {
+      workletEventHandler: WorkletHandler;
+    };
+
+export function useEventHandlerRegistration(
+  viewTagRef: React.MutableRefObject<ComponentOrHandle>,
+) {
+  const onRegisterHandler = (handler: EventHandlerProcessed<never, never>) => {
+    const currentHandler =
+      handler as unknown as WorkletHandlerOrWorkletHandlerObject;
+    const attachWorkletHandlers = () => {
+      const viewTag = findNodeHandle(viewTagRef.current);
+
+      if (__DEV__ && !viewTag) {
+        console.warn(
+          "Can not attach worklet handlers for `react-native-keyboard-controller` because view tag can not be resolved. Be sure that `KeyboardProvider` is fully mounted before registering handlers. If you think it is a bug in library, please open an issue.",
+        );
+      }
+
+      if (viewTag) {
+        if ("workletEventHandler" in currentHandler) {
+          currentHandler.workletEventHandler.registerForEvents(viewTag);
+        } else {
+          currentHandler.registerForEvents(viewTag);
+        }
+      }
+    };
+
+    if (viewTagRef.current) {
+      attachWorkletHandlers();
+    } else {
+      queueMicrotask(attachWorkletHandlers);
+    }
+
+    return () => {
+      const viewTag = findNodeHandle(viewTagRef.current);
+
+      if (viewTag) {
+        if ("workletEventHandler" in currentHandler) {
+          currentHandler.workletEventHandler.unregisterFromEvents(viewTag);
+        } else {
+          currentHandler.unregisterFromEvents(viewTag);
+        }
+      }
+    };
+  };
+
+  return onRegisterHandler;
+}
+
 type UntypedHandler = Record<string, (event: never) => void>;
 type SharedHandlersReturnType<T extends UntypedHandler> = [
   (handler: Handlers<T>) => void,

package/src/module.ts

@@ -6,22 +6,31 @@ import type {
   KeyboardEventData,
 } from "./types";
 
-let isClosed = false;
-let lastEvent: KeyboardEventData | null = null;
+let isClosed = true;
+let lastState: KeyboardEventData = {
+  height: 0,
+  tag: -1,
+  duration: 0,
+  timestamp: new Date().getTime(),
+  target: -1,
+  type: "default",
+  appearance: "light",
+};
 
 KeyboardEvents.addListener("keyboardDidHide", (e) => {
   isClosed = true;
-  lastEvent = e;
+  lastState = e;
 });
 
 KeyboardEvents.addListener("keyboardDidShow", (e) => {
   isClosed = false;
-  lastEvent = e;
+  lastState = e;
 });
 
-const dismiss = async (
-  { keepFocus }: DismissOptions = { keepFocus: false },
-): Promise<void> => {
+const dismiss = async (options?: Partial<DismissOptions>): Promise<void> => {
+  const keepFocus = options?.keepFocus ?? false;
+  const animated = options?.animated ?? true;
+
   return new Promise((resolve) => {
     if (isClosed) {
       resolve();
@@ -34,19 +43,22 @@ const dismiss = async (
       subscription.remove();
     });
 
-    KeyboardControllerNative.dismiss(keepFocus);
+    KeyboardControllerNative.dismiss(keepFocus, animated);
   });
 };
 const isVisible = () => !isClosed;
-const state = () => lastEvent;
+const state = () => lastState;
+const preload = KeyboardControllerNative.preload ?? (() => {});
 
 export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: KeyboardControllerNative.setDefaultMode,
   setInputMode: KeyboardControllerNative.setInputMode,
   setFocusTo: KeyboardControllerNative.setFocusTo,
+  preload,
   dismiss,
   isVisible,
   state,
   addListener: KeyboardControllerNative.addListener,
   removeListeners: KeyboardControllerNative.removeListeners,
+  getConstants: KeyboardControllerNative.getConstants,
 };

package/src/specs/ClippingScrollViewDecoratorViewNativeComponent.ts

@@ -0,0 +1,19 @@
+import { codegenNativeComponent } from "react-native";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native";
+import type { Double } from "react-native/Libraries/Types/CodegenTypes";
+
+export interface NativeProps extends ViewProps {
+  contentInsetBottom: Double;
+  contentInsetTop: Double;
+  applyWorkaroundForContentInsetHitTestBug?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "ClippingScrollViewDecoratorView",
+  {
+    interfaceOnly: true,
+    excludedPlatforms: ["iOS"],
+  },
+) as HostComponent<NativeProps>;

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -1,3 +1,4 @@
+import codegenNativeCommands from "react-native/Libraries/Utilities/codegenNativeCommands";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
 
 import type { HostComponent } from "react-native";
@@ -66,6 +67,16 @@ export interface NativeProps extends ViewProps {
   onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
 }
 
-export default codegenNativeComponent<NativeProps>(
-  "RNKeyboardControllerView",
-) as HostComponent<NativeProps>;
+interface NativeCommands {
+  synchronizeFocusedInputLayout: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ["synchronizeFocusedInputLayout"],
+});
+
+export default codegenNativeComponent<NativeProps>("RNKeyboardControllerView", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -17,4 +17,5 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>("RNKeyboardGestureArea", {
   excludedPlatforms: ["iOS"],
+  interfaceOnly: true,
 }) as HostComponent<NativeProps>;

package/src/specs/KeyboardToolbarGroupViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>("KeyboardToolbarGroupView", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;