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

package/src/bindings.native.ts

@@ -1,62 +1,97 @@
-import { NativeEventEmitter, Platform } from "react-native";
-
-import type {
-  FocusedInputEventsModule,
-  KeyboardControllerNativeModule,
-  KeyboardControllerProps,
-  KeyboardEventsModule,
-  KeyboardGestureAreaProps,
-  OverKeyboardViewProps,
-  WindowDimensionsEventsModule,
-} from "./types";
-
-const LINKING_ERROR =
-  `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
-  "- You rebuilt the app after installing the package\n" +
-  "- You are not using Expo Go\n";
-
-const RCTKeyboardController =
-  require("./specs/NativeKeyboardController").default;
-
-export const KeyboardControllerNative = (
-  RCTKeyboardController
-    ? RCTKeyboardController
-    : new Proxy(
-        {},
-        {
-          get() {
-            throw new Error(LINKING_ERROR);
-          },
-        },
-      )
-) as KeyboardControllerNativeModule;
-
-const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
-const eventEmitter = new NativeEventEmitter(KeyboardControllerNative);
-
-export const KeyboardEvents: KeyboardEventsModule = {
-  addListener: (name, cb) =>
-    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
-};
-
-/**
- * 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: (name, cb) =>
-    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
-};
-export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
-  addListener: (name, cb) =>
-    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
-};
-export const KeyboardControllerView: React.FC<KeyboardControllerProps> =
-  require("./specs/KeyboardControllerViewNativeComponent").default;
-export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
-  (Platform.OS === "android" && Platform.Version >= 30) || Platform.OS === "ios"
-    ? require("./specs/KeyboardGestureAreaNativeComponent").default
-    : ({ children }: KeyboardGestureAreaProps) => children;
-export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
-  require("./specs/OverKeyboardViewNativeComponent").default;
+import React from "react";
+import {
+  NativeEventEmitter,
+  Platform,
+  useColorScheme,
+  View,
+} from "react-native";
+
+import type {
+  ClippingScrollViewProps,
+  FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
+  KeyboardControllerNativeModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardExtenderProps,
+  KeyboardGestureAreaProps,
+  KeyboardToolbarGroupViewProps,
+  OverKeyboardViewProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+import type { View as RNView } from "react-native";
+
+const LINKING_ERROR =
+  `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
+  "- You rebuilt the app after installing the package\n" +
+  "- You are not using Expo Go\n";
+
+const KeyboardControllerViewNativeComponentModule = require("./specs/KeyboardControllerViewNativeComponent");
+const RCTKeyboardController =
+  require("./specs/NativeKeyboardController").default;
+
+export const KeyboardControllerNative = (
+  RCTKeyboardController
+    ? RCTKeyboardController
+    : new Proxy(
+        {},
+        {
+          get() {
+            throw new Error(LINKING_ERROR);
+          },
+        },
+      )
+) as KeyboardControllerNativeModule;
+
+const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
+const eventEmitter = new NativeEventEmitter(KeyboardControllerNative);
+
+export const KeyboardEvents: KeyboardEventsModule = {
+  addListener: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+
+/**
+ * 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: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
+  addListener: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+export const KeyboardControllerView: React.FC<KeyboardControllerProps> =
+  KeyboardControllerViewNativeComponentModule.default;
+export const KeyboardControllerViewCommands =
+  KeyboardControllerViewNativeComponentModule.Commands;
+export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
+  (Platform.OS === "android" && Platform.Version >= 30) || Platform.OS === "ios"
+    ? require("./specs/KeyboardGestureAreaNativeComponent").default
+    : ({ children }: KeyboardGestureAreaProps) => children;
+export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
+  require("./specs/OverKeyboardViewNativeComponent").default;
+export const ClippingScrollView: React.FC<ClippingScrollViewProps> =
+  Platform.OS === "android" || (Platform.OS as string) === "harmony"
+    ? require("./specs/ClippingScrollViewDecoratorViewNativeComponent").default
+    : ({ children }: ClippingScrollViewProps) => children;
+export const KeyboardBackgroundView = React.forwardRef<
+  RNView,
+  KeyboardBackgroundViewProps
+>(({ style, ...props }, ref) => {
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === "dark" ? "#2c2c2e" : "#eceff3";
+
+  return React.createElement(View, {
+    ref,
+    style: [{ backgroundColor }, style],
+    ...props,
+  });
+});
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;
+export const RCTKeyboardToolbarGroupView: React.FC<KeyboardToolbarGroupViewProps> =
+  require("./specs/KeyboardToolbarGroupViewNativeComponent").default;

package/src/bindings.ts

@@ -1,42 +1,81 @@
-import { View } from "react-native";
-
-import type {
-  FocusedInputEventsModule,
-  KeyboardControllerNativeModule,
-  KeyboardControllerProps,
-  KeyboardEventsModule,
-  KeyboardGestureAreaProps,
-  OverKeyboardViewProps,
-  WindowDimensionsEventsModule,
-} from "./types";
-import type { EmitterSubscription } from "react-native";
-
-const NOOP = () => {};
-
-export const KeyboardControllerNative: KeyboardControllerNativeModule = {
-  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>;
-export const RCTOverKeyboardView =
-  View as unknown as React.FC<OverKeyboardViewProps>;
+import React from "react";
+import { useColorScheme, View } from "react-native";
+
+import type {
+  ClippingScrollViewProps,
+  FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
+  KeyboardControllerNativeModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardExtenderProps,
+  KeyboardGestureAreaProps,
+  KeyboardToolbarGroupViewProps,
+  OverKeyboardViewProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+import type { EmitterSubscription } from "react-native";
+import type { View as RNView } from "react-native";
+
+const NOOP = () => {};
+
+export const KeyboardControllerNative: KeyboardControllerNativeModule = {
+  setDefaultMode: NOOP,
+  setInputMode: NOOP,
+  preload: NOOP,
+  dismiss: NOOP,
+  setFocusTo: NOOP,
+  viewPositionInWindow: () =>
+    Promise.resolve({ x: 0, y: 0, width: 0, height: 0 }),
+  addListener: NOOP,
+  removeListeners: NOOP,
+  getConstants: () => ({
+    keyboardBorderRadius: 0,
+  }),
+};
+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 KeyboardControllerViewCommands = {
+  synchronizeFocusedInputLayout: (
+    _ref: React.Component<KeyboardControllerProps> | null,
+  ) => {},
+};
+export const KeyboardGestureArea =
+  View as unknown as React.FC<KeyboardGestureAreaProps>;
+export const RCTOverKeyboardView =
+  View as unknown as React.FC<OverKeyboardViewProps>;
+export const ClippingScrollView =
+  View as unknown as React.FC<ClippingScrollViewProps>;
+export const KeyboardBackgroundView = React.forwardRef<
+  RNView,
+  KeyboardBackgroundViewProps
+>(({ style, ...props }, ref) => {
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === "dark" ? "#2c2c2e" : "#eceff3";
+
+  return React.createElement(View, {
+    ref,
+    style: [{ backgroundColor }, style],
+    ...props,
+  });
+});
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;
+/**
+ * A View that defines a group of `TextInput`s for toolbar navigation.
+ */
+export const RCTKeyboardToolbarGroupView =
+  View as unknown as React.FC<KeyboardToolbarGroupViewProps>;

package/src/compat.ts

@@ -0,0 +1,44 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { useKeyboardHandler } from "./hooks";
+
+export const KeyboardState = {
+  UNKNOWN: 0,
+  OPENING: 1,
+  OPEN: 2,
+  CLOSING: 3,
+  CLOSED: 4,
+};
+
+/** Compatibility layer for migrating from Reanimated's useAnimatedKeyboard. */
+export const useAnimatedKeyboard = () => {
+  const height = useSharedValue(0);
+  const state = useSharedValue(KeyboardState.UNKNOWN);
+
+  useKeyboardHandler(
+    {
+      onStart: (event) => {
+        "worklet";
+        state.value =
+          event.height > 0 ? KeyboardState.OPENING : KeyboardState.CLOSING;
+      },
+      onMove: (event) => {
+        "worklet";
+        height.value = event.height;
+      },
+      onInteractive: (event) => {
+        "worklet";
+        height.value = event.height;
+      },
+      onEnd: (event) => {
+        "worklet";
+        state.value =
+          event.height > 0 ? KeyboardState.OPEN : KeyboardState.CLOSED;
+        height.value = event.height;
+      },
+    },
+    [],
+  );
+
+  return { height, state };
+};

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -1,123 +1,130 @@
-import { useSharedValue } from "react-native-reanimated";
-
-import {useKeyboardHandler} from "../../hooks";
-import {useKeyboardContext} from "../../context";
-import { useState } from "react";
-import { Platform } from "react-native";
-
-const OS = Platform.OS;
-
-export const useKeyboardAnimation = () => {
-  const { reanimated } = useKeyboardContext();
-  // calculate it only once on mount, to avoid `SharedValue` reads during a render
-  const [initialHeight] = useState(() => -reanimated.height.value);
-  const [initialProgress] = useState(() => reanimated.progress.value);
-
-  const heightWhenOpened = useSharedValue(initialHeight);
-  const height = useSharedValue(initialHeight);
-  const progress = useSharedValue(initialProgress);
-  const isClosed = useSharedValue(initialProgress === 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;
-      },
-      onInteractive: (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 };
-};
-
-export const useTranslateAnimation = () => {
-  const { reanimated } = useKeyboardContext();
-
-  // calculate it only once on mount, to avoid `SharedValue` reads during a render
-  const [initialProgress] = useState(() => reanimated.progress.value);
-
-  const padding = useSharedValue(initialProgress);
-  const translate = useSharedValue(0);
-
-  useKeyboardHandler(
-    {
-      onStart: (e) => {
-        "worklet";
-
-        if (e.height === 0) {
-          // eslint-disable-next-line react-compiler/react-compiler
-          padding.value = 0;
-        }
-        if (OS === "ios") {
-          translate.value = e.progress;
-        }
-      },
-      onMove: (e) => {
-        "worklet";
-
-        if (OS === "android") {
-          translate.value = e.progress;
-        }
-      },
-      onInteractive: (e) => {
-        "worklet";
-
-        padding.value = 0;
-
-        translate.value = e.progress;
-      },
-      onEnd: (e) => {
-        "worklet";
-
-        padding.value = e.progress;
-
-        if (OS === "android") {
-          translate.value = e.progress;
-        }
-      },
-    },
-    [],
-  );
-
-  return { translate, padding };
-};
+import { useSharedValue } from "react-native-reanimated";
+
+import {useKeyboardHandler} from "../../hooks";
+import {useKeyboardContext} from "../../context";
+import { useLayoutEffect } from "react";
+import { Platform } from "react-native";
+
+const OS = Platform.OS;
+
+export const useKeyboardAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+  const heightWhenOpened = useSharedValue(0);
+  const height = useSharedValue(0);
+  const progress = useSharedValue(0);
+  const isClosed = useSharedValue(true);
+
+  useLayoutEffect(() => {
+    const initialHeight = -reanimated.height.value;
+    const initialProgress = reanimated.progress.value;
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    heightWhenOpened.value = initialHeight;
+    height.value = initialHeight;
+    progress.value = initialProgress;
+    isClosed.value = initialProgress === 0;
+  }, []);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        if (e.height > 0) {
+          isClosed.value = false;
+          heightWhenOpened.value = e.height;
+        }
+      },
+      onMove: (e) => {
+        "worklet";
+  
+        progress.value = e.progress;
+        height.value = e.height;
+      },
+      onInteractive: (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 };
+};
+
+export const useTranslateAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+
+  const padding = useSharedValue(0);
+  const translate = useSharedValue(0);
+
+  useLayoutEffect(() => {
+    // eslint-disable-next-line react-compiler/react-compiler
+    padding.value = reanimated.progress.value;
+  }, []);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        if (e.height === 0) {
+          padding.value = 0;
+        }
+        if (OS === "ios") {
+          translate.value = e.progress;
+        }
+      },
+      onMove: (e) => {
+        "worklet";
+
+        if (OS !== "ios") {
+          translate.value = e.progress;
+        }
+      },
+      onInteractive: (e) => {
+        "worklet";
+
+        padding.value = 0;
+
+        translate.value = e.progress;
+      },
+      onEnd: (e) => {
+        "worklet";
+
+        padding.value = e.progress;
+
+        if (OS !== "ios") {
+          translate.value = e.progress;
+        }
+      },
+    },
+    [],
+  );
+
+  return { translate, padding };
+};