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

package/src/animated.tsx

@@ -1,255 +1,248 @@
-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 property indicating whether to keep edge-to-edge mode always enabled (even when you disable the module).
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592
-   * @platform android
-   */
-  preserveEdgeToEdge?: 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,
-  preserveEdgeToEdge,
-  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"]);
-      },
-      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}
-        preserveEdgeToEdge={preserveEdgeToEdge}
-        style={styles.container}
-      >
-        {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, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
+import Reanimated, { useSharedValue } from "react-native-reanimated";
+
+import {
+  FocusedInputEvents,
+  KeyboardControllerView,
+  KeyboardControllerViewCommands,
+} from "./bindings";
+import { KeyboardContext } from "./context";
+import { useAnimatedValue, useSharedHandlers } from "./internal";
+import { KeyboardController } from "./module";
+import {
+  useAnimatedKeyboardHandler,
+  useFocusedInputLayoutHandler,
+  useFocusedInputSelectionHandler,
+  useFocusedInputTextHandler,
+} from "./reanimated";
+
+import type { KeyboardAnimationContext } from "./context";
+import type {
+  FocusedInputHandler,
+  FocusedInputLayoutChangedEvent,
+  KeyboardControllerProps,
+  KeyboardHandler,
+  KeyboardProviderProps,
+  NativeEvent,
+} from "./types";
+import type { ViewStyle } from "react-native";
+
+const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
+  Animated.createAnimatedComponent(
+    KeyboardControllerView,
+  ) as React.FC<KeyboardControllerProps>,
+) as React.ComponentType<
+  KeyboardControllerProps &
+    React.RefAttributes<React.Component<KeyboardControllerProps>>
+>;
+
+type Styles = {
+  container: ViewStyle;
+  hidden: ViewStyle;
+};
+
+const styles = StyleSheet.create<Styles>({
+  container: {
+    flex: 1,
+  },
+  hidden: {
+    display: "none",
+    position: "absolute",
+  },
+});
+
+// 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,
+  preserveEdgeToEdge,
+  enabled: initiallyEnabled = true,
+  preload = true,
+}: KeyboardProviderProps) => {
+  const viewRef = useRef<React.Component<KeyboardControllerProps>>(null);
+  // 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>();
+  const update = useCallback(async () => {
+    KeyboardControllerViewCommands.synchronizeFocusedInputLayout(
+      viewRef.current,
+    );
+
+    await new Promise((resolve) => {
+      const subscription = FocusedInputEvents.addListener(
+        "layoutDidSynchronize",
+        () => {
+          subscription.remove();
+          resolve(null);
+        },
+      );
+    });
+  }, []);
+  // memo
+  const context = useMemo<KeyboardAnimationContext>(
+    () => ({
+      enabled,
+      animated: { progress: progress, height: Animated.multiply(height,-1)  },
+      reanimated: { progress: progressSV, height: heightSV },
+      layout,
+      update,
+      setKeyboardHandlers,
+      setInputHandlers,
+      setEnabled,
+    }),
+    [enabled, update],
+  );
+  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);
+      },
+    },
+    [],
+  );
+  useEffect(() => {
+    if (preload) {
+      KeyboardController.preload();
+    }
+  }, [preload]);
+
+  return (
+    <KeyboardContext.Provider value={context}>
+      <KeyboardControllerViewAnimated
+        ref={viewRef}
+        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}
+        preserveEdgeToEdge={preserveEdgeToEdge}
+        style={styles.container}
+      >
+        {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/architecture.ts

@@ -0,0 +1 @@
+export const IS_FABRIC = "nativeFabricUIManager" in global;