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

package/src/bindings.ts

@@ -1,38 +1,38 @@
-import { View } from "react-native";
-
-import type {
-  FocusedInputEventsModule,
-  KeyboardControllerModule,
-  KeyboardControllerProps,
-  KeyboardEventsModule,
-  KeyboardGestureAreaProps,
-  WindowDimensionsEventsModule,
-} from "./types";
-import type { EmitterSubscription } from "react-native";
-
-const NOOP = () => {};
-export const KeyboardController: KeyboardControllerModule = {
-  setDefaultMode: NOOP,
-  setInputMode: NOOP,
-  dismiss: NOOP,
-  setFocusTo: NOOP,
-  addListener: NOOP,
-  removeListeners: NOOP,
-};
-export const KeyboardEvents: KeyboardEventsModule = {
-  addListener: () => ({ remove: NOOP } as EmitterSubscription),
-};
-/**
- * This API is not documented, it's for internal usage only (for now), and is a subject to potential breaking changes in future.
- * Use it with cautious.
- */
-export const FocusedInputEvents: FocusedInputEventsModule = {
-  addListener: () => ({ remove: NOOP } as EmitterSubscription),
-};
-export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
-  addListener: () => ({ remove: NOOP } as EmitterSubscription),
-};
-export const KeyboardControllerView =
-  View as unknown as React.FC<KeyboardControllerProps>;
-export const KeyboardGestureArea =
-  View as unknown as React.FC<KeyboardGestureAreaProps>;
+import { View } from "react-native";
+
+import type {
+  FocusedInputEventsModule,
+  KeyboardControllerModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardGestureAreaProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+import type { EmitterSubscription } from "react-native";
+
+const NOOP = () => {};
+export const KeyboardController: KeyboardControllerModule = {
+  setDefaultMode: NOOP,
+  setInputMode: NOOP,
+  dismiss: NOOP,
+  setFocusTo: NOOP,
+  addListener: NOOP,
+  removeListeners: NOOP,
+};
+export const KeyboardEvents: KeyboardEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+/**
+ * This API is not documented, it's for internal usage only (for now), and is a subject to potential breaking changes in future.
+ * Use it with cautious.
+ */
+export const FocusedInputEvents: FocusedInputEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+export const KeyboardControllerView =
+  View as unknown as React.FC<KeyboardControllerProps>;
+export const KeyboardGestureArea =
+  View as unknown as React.FC<KeyboardGestureAreaProps>;

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,58 +1,58 @@
-import { useSharedValue } from "react-native-reanimated";
-
-import {useKeyboardHandler} from "../../hooks";
-import {useKeyboardContext} from "../../context";
-import { Platform } from "react-native";
-
-export const useKeyboardAnimation = () => {
-  const { reanimated } = useKeyboardContext();
-  const heightWhenOpened = useSharedValue(-reanimated.height.value);
-  const height = useSharedValue(-reanimated.height.value);
-  const progress = useSharedValue(reanimated.progress.value);
-  const isClosed = useSharedValue(reanimated.progress.value === 0);
-
-  useKeyboardHandler(
-    {
-      onStart: (e) => {
-        "worklet";
-
-        if (e.height > 0) {
-          // eslint-disable-next-line react-compiler/react-compiler
-          isClosed.value = false;
-          heightWhenOpened.value = e.height;
-        }
-      },
-      onMove: (e) => {
-        "worklet";
-  
-        progress.value = e.progress;
-        height.value = e.height;
-      },
-      onEnd: (e) => {
-        "worklet";
-       if(Platform.OS as string === 'harmony'){
-        heightWhenOpened.value = e.height;
-       }
-  
-        isClosed.value = e.height === 0;
-
-        // `height` update happens in `onMove` handler
-        // in `onEnd` we need to update only if `onMove`
-        // wasn't called (i. e. duration === 0)
-        //
-        // we can not call this code without condition below
-        // because in some corner cases (iOS with `secureTextEntry`)
-        // `onEnd` can be emitted before `onMove` and in this case
-        // it may lead to choppy/glitchy/jumpy UI
-        // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
-        if (e.duration === 0) {
-          progress.value = e.progress;
-          height.value = e.height;
-        }
-      },
-    },
-    [],
-  );
-
-  return { height, progress, heightWhenOpened, isClosed };
-};
+import { useSharedValue } from "react-native-reanimated";
+
+import {useKeyboardHandler} from "../../hooks";
+import {useKeyboardContext} from "../../context";
+import { Platform } from "react-native";
+
+export const useKeyboardAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+  const heightWhenOpened = useSharedValue(-reanimated.height.value);
+  const height = useSharedValue(-reanimated.height.value);
+  const progress = useSharedValue(reanimated.progress.value);
+  const isClosed = useSharedValue(reanimated.progress.value === 0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        if (e.height > 0) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          isClosed.value = false;
+          heightWhenOpened.value = e.height;
+        }
+      },
+      onMove: (e) => {
+        "worklet";
+  
+        progress.value = e.progress;
+        height.value = e.height;
+      },
+      onEnd: (e) => {
+        "worklet";
+       if(Platform.OS as string === 'harmony'){
+        heightWhenOpened.value = e.height;
+       }
+  
+        isClosed.value = e.height === 0;
+
+        // `height` update happens in `onMove` handler
+        // in `onEnd` we need to update only if `onMove`
+        // wasn't called (i. e. duration === 0)
+        //
+        // we can not call this code without condition below
+        // because in some corner cases (iOS with `secureTextEntry`)
+        // `onEnd` can be emitted before `onMove` and in this case
+        // it may lead to choppy/glitchy/jumpy UI
+        // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
+        if (e.duration === 0) {
+          progress.value = e.progress;
+          height.value = e.height;
+        }
+      },
+    },
+    [],
+  );
+
+  return { height, progress, heightWhenOpened, isClosed };
+};

package/src/components/KeyboardAvoidingView/index.tsx

@@ -1,156 +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;
+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;