@react-native-ohos/react-native-keyboard-controller 1.12.8-rc.7 → 1.12.9

package/src/animated.tsx

@@ -1,253 +1,246 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Animated, Platform, StyleSheet } from "react-native";
-import Reanimated, { useSharedValue, Easing, withTiming } from "react-native-reanimated";
-
-import { KeyboardControllerView } from "./bindings";
-import { KeyboardContext } from "./context";
-import { useAnimatedValue, useSharedHandlers } from "./internal";
-import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
-import {
-  useAnimatedKeyboardHandler,
-  useFocusedInputLayoutHandler,
-  useFocusedInputSelectionHandler,
-  useFocusedInputTextHandler,
-} from "./reanimated";
-
-import type { KeyboardAnimationContext } from "./context";
-import type {
-  FocusedInputHandler,
-  FocusedInputLayoutChangedEvent,
-  KeyboardControllerProps,
-  KeyboardHandler,
-  NativeEvent,
-} from "./types";
-import type { ViewStyle } from "react-native";
-
-const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
-  Animated.createAnimatedComponent(
-    KeyboardControllerView,
-  ) as React.FC<KeyboardControllerProps>,
-);
-
-type Styles = {
-  container: ViewStyle;
-  hidden: ViewStyle;
-};
-
-const styles = StyleSheet.create<Styles>({
-  container: {
-    flex: 1,
-  },
-  hidden: {
-    display: "none",
-    position: "absolute",
-  },
-});
-
-type KeyboardProviderProps = {
-  children: React.ReactNode;
-  /**
-   * Set the value to `true`, if you use translucent status bar on Android.
-   * If you already control status bar translucency via `react-native-screens`
-   * or `StatusBar` component from `react-native`, you can ignore it.
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
-   * @platform android
-   */
-  statusBarTranslucent?: boolean;
-  /**
-   * Set the value to `true`, if you use translucent navigation bar on Android.
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
-   * @platform android
-   */
-  navigationBarTranslucent?: boolean;
-  /**
-   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
-   * i. e. if you try to change this prop after component mount it will not have any effect.
-   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
-   * Defaults to `true`.
-   */
-  enabled?: boolean;
-};
-
-// capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
-// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/393 and https://github.com/kirillzyusko/react-native-keyboard-controller/issues/294 for more details
-const OS = Platform.OS;
-
-export const KeyboardProvider = ({
-  children,
-  statusBarTranslucent,
-  navigationBarTranslucent,
-  enabled: initiallyEnabled = true,
-}: KeyboardProviderProps) => {
-  // state
-  const [enabled, setEnabled] = useState(initiallyEnabled);
-  // animated values
-  const progress = useAnimatedValue(0);
-  const height = useAnimatedValue(0);
-  // shared values
-  const progressSV = useSharedValue(0);
-  const heightSV = useSharedValue(0);
-  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
-  const [setKeyboardHandlers, broadcastKeyboardEvents] =
-    useSharedHandlers<KeyboardHandler>();
-  const [setInputHandlers, broadcastInputEvents] =
-    useSharedHandlers<FocusedInputHandler>();
-  // memo
-  const context = useMemo<KeyboardAnimationContext>(
-    () => ({
-      enabled,
-      animated: { progress: progress, height: Animated.multiply(height, -1) },
-      reanimated: { progress: progressSV, height: heightSV },
-      layout,
-      setKeyboardHandlers,
-      setInputHandlers,
-      setEnabled,
-    }),
-    [enabled],
-  );
-  const style = useMemo(
-    () => [
-      styles.hidden,
-      { transform: [{ translateX: height }, { translateY: progress }] },
-    ],
-    [],
-  );
-  const onKeyboardMove = useMemo(
-    () =>
-      Animated.event(
-        [
-          {
-            nativeEvent: {
-              progress,
-              height,
-            },
-          },
-        ],
-        { useNativeDriver: Platform.OS as string == 'harmony' ? false : true },
-      ),
-    [],
-  );
-  // handlers
-  const updateSharedValues = (event: NativeEvent, platforms: string[]) => {
-    "worklet";
-
-    if (platforms.includes(OS)) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      if (Platform.OS as string == 'harmony') {
-        const dur = 460
-        progressSV.value = withTiming(event.progress, { duration: dur, easing: Easing.out(Easing.exp) });
-        heightSV.value = withTiming(-event.height, { duration: dur, easing: Easing.out(Easing.exp) });
-      } else {
-        progressSV.value = event.progress;
-        heightSV.value = -event.height;
-
-      }
-    }
-  };
-  const keyboardHandler = useAnimatedKeyboardHandler(
-    {
-      onKeyboardMoveStart: (event: NativeEvent) => {
-        "worklet";
-
-        broadcastKeyboardEvents("onStart", event);
-        updateSharedValues(event, ["ios"]);
-      },
-      onKeyboardMove: (event: NativeEvent) => {
-        "worklet";
-
-        broadcastKeyboardEvents("onMove", event);
-        updateSharedValues(event, ["android"]);
-      },
-      onKeyboardMoveEnd: (event: NativeEvent) => {
-        "worklet";
-        broadcastKeyboardEvents("onEnd", event);
-        updateSharedValues(event, ['harmony']);
-      },
-      onKeyboardMoveInteractive: (event: NativeEvent) => {
-        "worklet";
-
-        updateSharedValues(event, ["android", "ios"]);
-        broadcastKeyboardEvents("onInteractive", event);
-      },
-    },
-    [],
-  );
-  const inputLayoutHandler = useFocusedInputLayoutHandler(
-    {
-      onFocusedInputLayoutChanged: (e) => {
-        "worklet";
-
-        if (e.target !== -1) {
-          layout.value = e;
-        } else {
-          layout.value = null;
-        }
-      },
-    },
-    [],
-  );
-  const inputTextHandler = useFocusedInputTextHandler(
-    {
-      onFocusedInputTextChanged: (e) => {
-        "worklet";
-
-        broadcastInputEvents("onChangeText", e);
-      },
-    },
-    [],
-  );
-  const inputSelectionHandler = useFocusedInputSelectionHandler(
-    {
-      onFocusedInputSelectionChanged: (e) => {
-        "worklet";
-        broadcastInputEvents("onSelectionChange", e);
-      },
-    },
-    [],
-  );
-  // effects
-  useEffect(() => {
-    if (enabled) {
-      applyMonkeyPatch();
-    } else {
-      revertMonkeyPatch();
-    }
-  }, [enabled]);
-
-  return (
-    <KeyboardContext.Provider value={context}>
-      <KeyboardControllerViewAnimated
-        enabled={enabled}
-        onKeyboardMoveReanimated={keyboardHandler}
-        onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}
-        onKeyboardMove={OS === "android" ? onKeyboardMove : undefined}
-        onKeyboardMoveInteractive={onKeyboardMove}
-        onKeyboardMoveEnd={OS as string === "harmony" ? onKeyboardMove : undefined}
-        onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
-        onFocusedInputTextChangedReanimated={inputTextHandler}
-        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
-        navigationBarTranslucent={navigationBarTranslucent}
-        statusBarTranslucent={statusBarTranslucent}
-        style={styles.container}
-      >
-        <Reanimated.View style={styles.container}>{children}</Reanimated.View>
-        {/* {children} */}
-      </KeyboardControllerViewAnimated>
-      <Animated.View
-        // we are using this small hack, because if the component (where
-        // animated value has been used) is unmounted, then animation will
-        // stop receiving events (seems like it's react-native optimization).
-        // So we need to keep a reference to the animated value, to keep it's
-        // always mounted (keep a reference to an animated value).
-        //
-        // To test why it's needed, try to open screen which consumes Animated.Value
-        // then close it and open it again (for example 'Animated transition').
-        style={style}
-      />
-    </KeyboardContext.Provider>
-  );
-};
+import React, { useEffect, useMemo, useState } from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
+import Reanimated, { useSharedValue } from "react-native-reanimated";
+
+import { KeyboardControllerView } from "./bindings";
+import { KeyboardContext } from "./context";
+import { useAnimatedValue, useSharedHandlers } from "./internal";
+import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
+import {
+  useAnimatedKeyboardHandler,
+  useFocusedInputLayoutHandler,
+  useFocusedInputSelectionHandler,
+  useFocusedInputTextHandler,
+} from "./reanimated";
+
+import type { KeyboardAnimationContext } from "./context";
+import type {
+  FocusedInputHandler,
+  FocusedInputLayoutChangedEvent,
+  KeyboardControllerProps,
+  KeyboardHandler,
+  NativeEvent,
+} from "./types";
+import type { ViewStyle } from "react-native";
+
+const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
+  Animated.createAnimatedComponent(
+    KeyboardControllerView,
+  ) as React.FC<KeyboardControllerProps>,
+);
+
+type Styles = {
+  container: ViewStyle;
+  hidden: ViewStyle;
+};
+
+const styles = StyleSheet.create<Styles>({
+  container: {
+    flex: 1,
+  },
+  hidden: {
+    display: "none",
+    position: "absolute",
+  },
+});
+
+type KeyboardProviderProps = {
+  children: React.ReactNode;
+  /**
+   * Set the value to `true`, if you use translucent status bar on Android.
+   * If you already control status bar translucency via `react-native-screens`
+   * or `StatusBar` component from `react-native`, you can ignore it.
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
+  /**
+   * Set the value to `true`, if you use translucent navigation bar on Android.
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
+  /**
+   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
+   * i. e. if you try to change this prop after component mount it will not have any effect.
+   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
+   * Defaults to `true`.
+   */
+  enabled?: boolean;
+};
+
+// capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
+// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/393 and https://github.com/kirillzyusko/react-native-keyboard-controller/issues/294 for more details
+const OS = Platform.OS;
+
+export const KeyboardProvider = ({
+  children,
+  statusBarTranslucent,
+  navigationBarTranslucent,
+  enabled: initiallyEnabled = true,
+}: KeyboardProviderProps) => {
+  // state
+  const [enabled, setEnabled] = useState(initiallyEnabled);
+  // animated values
+  const progress = useAnimatedValue(0);
+  const height = useAnimatedValue(0);
+  // shared values
+  const progressSV = useSharedValue(0);
+  const heightSV = useSharedValue(0);
+  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+  const [setKeyboardHandlers, broadcastKeyboardEvents] =
+    useSharedHandlers<KeyboardHandler>();
+  const [setInputHandlers, broadcastInputEvents] =
+    useSharedHandlers<FocusedInputHandler>();
+  // memo
+  const context = useMemo<KeyboardAnimationContext>(
+    () => ({
+      enabled,
+      animated: { progress: progress, height: Animated.multiply(height, -1) },
+      reanimated: { progress: progressSV, height: heightSV },
+      layout,
+      setKeyboardHandlers,
+      setInputHandlers,
+      setEnabled,
+    }),
+    [enabled],
+  );
+  const style = useMemo(
+    () => [
+      styles.hidden,
+      { transform: [{ translateX: height }, { translateY: progress }] },
+    ],
+    [],
+  );
+  const onKeyboardMove = useMemo(
+    () =>
+      Animated.event(
+        [
+          {
+            nativeEvent: {
+              progress,
+              height,
+            },
+          },
+        ],
+        { useNativeDriver: Platform.OS as string == 'harmony' ? false : true },
+      ),
+    [],
+  );
+  // handlers
+  const updateSharedValues = (event: NativeEvent, platforms: string[]) => {
+    "worklet";
+
+    if (platforms.includes(OS)) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      progressSV.value = event.progress;
+      heightSV.value = -event.height;
+    }
+  };
+  const keyboardHandler = useAnimatedKeyboardHandler(
+    {
+      onKeyboardMoveStart: (event: NativeEvent) => {
+        "worklet";
+
+        broadcastKeyboardEvents("onStart", event);
+        updateSharedValues(event, ["ios"]);
+      },
+      onKeyboardMove: (event: NativeEvent) => {
+        "worklet";
+
+        broadcastKeyboardEvents("onMove", event);
+        updateSharedValues(event, ["android", "harmony"]);
+      },
+      onKeyboardMoveEnd: (event: NativeEvent) => {
+        "worklet";
+        broadcastKeyboardEvents("onEnd", event);
+        updateSharedValues(event, ["android", "harmony"]);
+      },
+      onKeyboardMoveInteractive: (event: NativeEvent) => {
+        "worklet";
+
+        updateSharedValues(event, ["android", "ios"]);
+        broadcastKeyboardEvents("onInteractive", event);
+      },
+    },
+    [],
+  );
+  const inputLayoutHandler = useFocusedInputLayoutHandler(
+    {
+      onFocusedInputLayoutChanged: (e) => {
+        "worklet";
+
+        if (e.target !== -1) {
+          layout.value = e;
+        } else {
+          layout.value = null;
+        }
+      },
+    },
+    [],
+  );
+  const inputTextHandler = useFocusedInputTextHandler(
+    {
+      onFocusedInputTextChanged: (e) => {
+        "worklet";
+
+        broadcastInputEvents("onChangeText", e);
+      },
+    },
+    [],
+  );
+  const inputSelectionHandler = useFocusedInputSelectionHandler(
+    {
+      onFocusedInputSelectionChanged: (e) => {
+        "worklet";
+        broadcastInputEvents("onSelectionChange", e);
+      },
+    },
+    [],
+  );
+  // effects
+  useEffect(() => {
+    if (enabled) {
+      applyMonkeyPatch();
+    } else {
+      revertMonkeyPatch();
+    }
+  }, [enabled]);
+
+  return (
+    <KeyboardContext.Provider value={context}>
+      <KeyboardControllerViewAnimated
+        enabled={enabled}
+        onKeyboardMoveReanimated={keyboardHandler}
+        onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}
+        onKeyboardMove={OS === "android" ? onKeyboardMove : undefined}
+        onKeyboardMoveInteractive={onKeyboardMove}
+        onKeyboardMoveEnd={OS as string === "harmony" ? onKeyboardMove : undefined}
+        onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
+        onFocusedInputTextChangedReanimated={inputTextHandler}
+        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
+        navigationBarTranslucent={navigationBarTranslucent}
+        statusBarTranslucent={statusBarTranslucent}
+        style={styles.container}
+      >
+        <Reanimated.View style={styles.container}>{children}</Reanimated.View>
+        {/* {children} */}
+      </KeyboardControllerViewAnimated>
+      <Animated.View
+        // we are using this small hack, because if the component (where
+        // animated value has been used) is unmounted, then animation will
+        // stop receiving events (seems like it's react-native optimization).
+        // So we need to keep a reference to the animated value, to keep it's
+        // always mounted (keep a reference to an animated value).
+        //
+        // To test why it's needed, try to open screen which consumes Animated.Value
+        // then close it and open it again (for example 'Animated transition').
+        style={style}
+      />
+    </KeyboardContext.Provider>
+  );
+};

package/src/bindings.native.ts

@@ -1,57 +1,57 @@
-import { NativeEventEmitter, Platform } from "react-native";
-
-import type {
-  FocusedInputEventsModule,
-  KeyboardControllerModule,
-  KeyboardControllerProps,
-  KeyboardEventsModule,
-  KeyboardGestureAreaProps,
-  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 KeyboardController = (
-  RCTKeyboardController
-    ? RCTKeyboardController
-    : new Proxy(
-        {},
-        {
-          get() {
-            throw new Error(LINKING_ERROR);
-          },
-        },
-      )
-) as KeyboardControllerModule;
-
-const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
-const eventEmitter = new NativeEventEmitter(KeyboardController);
-
-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
-    ? require("./specs/KeyboardGestureAreaNativeComponent").default
-    : ({ children }: KeyboardGestureAreaProps) => children;
+import { NativeEventEmitter, Platform } from "react-native";
+
+import type {
+  FocusedInputEventsModule,
+  KeyboardControllerModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardGestureAreaProps,
+  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 KeyboardController = (
+  RCTKeyboardController
+    ? RCTKeyboardController
+    : new Proxy(
+        {},
+        {
+          get() {
+            throw new Error(LINKING_ERROR);
+          },
+        },
+      )
+) as KeyboardControllerModule;
+
+const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
+const eventEmitter = new NativeEventEmitter(KeyboardController);
+
+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
+    ? require("./specs/KeyboardGestureAreaNativeComponent").default
+    : ({ children }: KeyboardGestureAreaProps) => children;