@react-native-ohos/react-native-keyboard-controller 1.12.8-beta.9

package/src/internal.ts

@@ -0,0 +1,84 @@
+import { useCallback, useRef } from "react";
+import { Animated } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+import type { Handlers } from "./types";
+
+type UntypedHandler = Record<string, (event: never) => void>;
+type SharedHandlersReturnType<T extends UntypedHandler> = [
+  (handler: Handlers<T>) => void,
+  <K extends keyof T>(type: K, event: Parameters<T[K]>[0]) => void,
+];
+
+/**
+ * Hook for storing worklet handlers (objects with keys, where values are worklets).
+ * Returns methods for setting handlers and broadcasting events in them.
+ *
+ * T is a generic that looks like:
+ * @example
+ * {
+ *  onEvent: () => {},
+ *  onEvent2: () => {},
+ * }
+ */
+export function useSharedHandlers<
+  T extends UntypedHandler,
+>(): SharedHandlersReturnType<T> {
+  const handlers = useSharedValue<Handlers<T>>({});
+  const jsHandlers = useRef<Handlers<T>>({});
+
+  // since js -> worklet -> js call is asynchronous, we can not write handlers
+  // straight into shared variable (using current shared value as a previous result),
+  // since there may be a race condition in a call, and closure may have out-of-dated
+  // values. As a result, some of handlers may be not written to "all handlers" object.
+  // Below we are writing all handlers to `ref` and afterwards synchronize them with
+  // shared value (since `refs` are not referring to actual value in worklets).
+  // This approach allow us to update synchronously handlers in js thread (and it assures,
+  // that it will have all of them) and then update them in worklet thread (calls are
+  // happening in FIFO order, so we will always have actual value).
+  const updateSharedHandlers = () => {
+    // eslint-disable-next-line react-compiler/react-compiler
+    handlers.value = jsHandlers.current;
+  };
+  const setHandlers = useCallback((handler: Handlers<T>) => {
+    jsHandlers.current = {
+      ...jsHandlers.current,
+      ...handler,
+    };
+    updateSharedHandlers();
+  }, []);
+  const broadcast = <K extends keyof T>(
+    type: K,
+    event: Parameters<T[K]>[0],
+  ) => {
+    "worklet";
+
+    Object.keys(handlers.value).forEach((key) => {
+      handlers.value[key]?.[type]?.(event);
+    });
+  };
+
+  return [setHandlers, broadcast];
+}
+
+/**
+ * TS variant of `useAnimatedValue` hook which is added in RN 0.71
+ * A better alternative of storing animated values in refs, since
+ * it doesn't recreate a new `Animated.Value` object on every re-render
+ * and therefore consumes less memory. We can not use a variant from
+ * RN, since this library supports earlier versions of RN.
+ *
+ * @see https://github.com/facebook/react-native/commit/e22217fe8b9455e32695f88ca835e11442b0a937
+ */
+export function useAnimatedValue(
+  initialValue: number,
+  config?: Animated.AnimatedConfig,
+): Animated.Value {
+  const ref = useRef<Animated.Value | null>(null);
+
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+
+  return ref.current;
+}

package/src/monkey-patch.android.ts

@@ -0,0 +1,44 @@
+// @ts-expect-error because there is no corresponding type definition
+import * as NativeAndroidManager from "react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid";
+
+const RCTStatusBarManagerCompat =
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  require("./specs/NativeStatusBarManagerCompat").default;
+
+// Copy original default manager to keep its original state and methods
+const OriginalNativeAndroidManager = { ...NativeAndroidManager.default };
+
+// Create a new object that modifies the necessary methods
+// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
+// in order to use library on all available platforms we have to monkey patch
+// default RN implementation and use modern `WindowInsetsControllerCompat`.
+const ModifiedNativeAndroidManager = {
+  ...NativeAndroidManager.default, // Spread original properties to keep existing functionality
+  setColor: (color: number, animated: boolean): void => {
+    RCTStatusBarManagerCompat.setColor(color, animated);
+  },
+  setTranslucent: (translucent: boolean): void => {
+    RCTStatusBarManagerCompat.setTranslucent(translucent);
+  },
+  /**
+   *  - statusBarStyles can be:
+   *    - 'default'
+   *    - 'dark-content'
+   */
+  setStyle: (statusBarStyle?: string): void => {
+    RCTStatusBarManagerCompat.setStyle(statusBarStyle);
+  },
+  setHidden: (hidden: boolean): void => {
+    RCTStatusBarManagerCompat.setHidden(hidden);
+  },
+};
+
+// Define a function to apply the monkey patch
+export const applyMonkeyPatch = () => {
+  Object.assign(NativeAndroidManager.default, ModifiedNativeAndroidManager);
+};
+
+// Define a function to revert changes back to the original state
+export const revertMonkeyPatch = () => {
+  Object.assign(NativeAndroidManager.default, OriginalNativeAndroidManager);
+};

package/src/monkey-patch.ts

@@ -0,0 +1,4 @@
+// stub for all platforms
+const NOOP = () => {};
+export const applyMonkeyPatch = NOOP;
+export const revertMonkeyPatch = NOOP;

package/src/reanimated.native.ts

@@ -0,0 +1,132 @@
+import { useEvent, useHandler } from "react-native-reanimated";
+
+import type {
+  EventWithName,
+  FocusedInputLayoutChangedEvent,
+  FocusedInputLayoutHandlerHook,
+  FocusedInputSelectionChangedEvent,
+  FocusedInputSelectionHandlerHook,
+  FocusedInputTextChangedEvent,
+  FocusedInputTextHandlerHook,
+  KeyboardHandlerHook,
+  NativeEvent,
+} from "./types";
+
+type EventContext = Record<string, unknown>;
+
+export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
+  EventContext,
+  EventWithName<NativeEvent>
+> = (handlers, dependencies) => {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event) => {
+      "worklet";
+      const {
+        onKeyboardMoveStart,
+        onKeyboardMove,
+        onKeyboardMoveEnd,
+        onKeyboardMoveInteractive,
+      } = handlers;
+
+      if (
+        onKeyboardMoveStart &&
+        event.eventName.endsWith("onKeyboardMoveStart")
+      ) {
+        onKeyboardMoveStart(event, context);
+      }
+
+      if (onKeyboardMove && event.eventName.endsWith("onKeyboardMove")) {
+        onKeyboardMove(event, context);
+      }
+
+      if (onKeyboardMoveEnd && event.eventName.endsWith("onKeyboardMoveEnd")) {
+        onKeyboardMoveEnd(event, context);
+      }
+
+      if (
+        onKeyboardMoveInteractive &&
+        event.eventName.endsWith("onKeyboardMoveInteractive")
+      ) {
+        onKeyboardMoveInteractive(event, context);
+      }
+    },
+    [
+      "onKeyboardMoveStart",
+      "onKeyboardMove",
+      "onKeyboardMoveEnd",
+      "onKeyboardMoveInteractive",
+    ],
+    doDependenciesDiffer,
+  );
+};
+
+export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
+  EventContext,
+  EventWithName<FocusedInputLayoutChangedEvent>
+> = (handlers, dependencies) => {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event) => {
+      "worklet";
+      const { onFocusedInputLayoutChanged } = handlers;
+
+      if (
+        onFocusedInputLayoutChanged &&
+        event.eventName.endsWith("onFocusedInputLayoutChanged")
+      ) {
+        onFocusedInputLayoutChanged(event, context);
+      }
+    },
+    ["onFocusedInputLayoutChanged"],
+    doDependenciesDiffer,
+  );
+};
+
+export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
+  EventContext,
+  EventWithName<FocusedInputTextChangedEvent>
+> = (handlers, dependencies) => {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event) => {
+      "worklet";
+      const { onFocusedInputTextChanged } = handlers;
+
+      if (
+        onFocusedInputTextChanged &&
+        event.eventName.endsWith("onFocusedInputTextChanged")
+      ) {
+        onFocusedInputTextChanged(event, context);
+      }
+    },
+    ["onFocusedInputTextChanged"],
+    doDependenciesDiffer,
+  );
+};
+
+export const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<
+  EventContext,
+  EventWithName<FocusedInputSelectionChangedEvent>
+> = (handlers, dependencies) => {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event) => {
+      "worklet";
+      const { onFocusedInputSelectionChanged } = handlers;
+
+      if (
+        onFocusedInputSelectionChanged &&
+        event.eventName.endsWith("onFocusedInputSelectionChanged")
+      ) {
+        onFocusedInputSelectionChanged(event, context);
+      }
+    },
+    ["onFocusedInputSelectionChanged"],
+    doDependenciesDiffer,
+  );
+};

package/src/reanimated.ts

@@ -0,0 +1,29 @@
+import type {
+  EventWithName,
+  FocusedInputLayoutChangedEvent,
+  FocusedInputLayoutHandlerHook,
+  FocusedInputSelectionChangedEvent,
+  FocusedInputSelectionHandlerHook,
+  FocusedInputTextChangedEvent,
+  FocusedInputTextHandlerHook,
+  KeyboardHandlerHook,
+  NativeEvent,
+} from "./types";
+
+const NOOP = () => () => {};
+export const useAnimatedKeyboardHandler: KeyboardHandlerHook<
+  Record<string, unknown>,
+  EventWithName<NativeEvent>
+> = NOOP;
+export const useFocusedInputLayoutHandler: FocusedInputLayoutHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputLayoutChangedEvent>
+> = NOOP;
+export const useFocusedInputTextHandler: FocusedInputTextHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputTextChangedEvent>
+> = NOOP;
+export const useFocusedInputSelectionHandler: FocusedInputSelectionHandlerHook<
+  Record<string, unknown>,
+  EventWithName<FocusedInputSelectionChangedEvent>
+> = NOOP;

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -0,0 +1,70 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+type KeyboardMoveEvent = Readonly<{
+  height: Double;
+  progress: Double;
+  duration: Int32;
+  target: Int32;
+}>;
+
+type FocusedInputLayoutChangedEvent = Readonly<{
+  target: Int32;
+  parentScrollViewTarget: Int32;
+  layout: {
+    x: Double;
+    y: Double;
+    width: Double;
+    height: Double;
+    absoluteX: Double;
+    absoluteY: Double;
+  };
+}>;
+
+type FocusedInputTextChangedEvent = Readonly<{
+  text: string;
+}>;
+
+type FocusedInputSelectionChangedEvent = Readonly<{
+  target: Int32;
+  selection: {
+    start: {
+      x: Double;
+      y: Double;
+      position: Int32;
+    };
+    end: {
+      x: Double;
+      y: Double;
+      position: Int32;
+    };
+  };
+}>;
+
+export interface NativeProps extends ViewProps {
+  // props
+  enabled?: boolean;
+  statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
+  // callbacks
+  /// keyboard
+  onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;
+  onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;
+  onKeyboardMoveEnd?: DirectEventHandler<KeyboardMoveEvent>;
+  onKeyboardMoveInteractive?: DirectEventHandler<KeyboardMoveEvent>;
+  /// focused input
+  onFocusedInputLayoutChanged?: DirectEventHandler<FocusedInputLayoutChangedEvent>;
+  onFocusedInputTextChanged?: DirectEventHandler<FocusedInputTextChangedEvent>;
+  onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "RNKeyboardControllerView",
+) as HostComponent<NativeProps>;

package/src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -0,0 +1,15 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+
+export interface NativeProps extends ViewProps {
+  interpolator?: WithDefault<"linear" | "ios", "linear">;
+  showOnSwipeUp?: boolean;
+  enableSwipeToDismiss?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>("RNKeyboardGestureArea", {
+  excludedPlatforms: ["iOS"],
+}) as HostComponent<NativeProps>;

package/src/specs/NativeKeyboardController.ts

@@ -0,0 +1,19 @@
+import { TurboModuleRegistry } from "react-native";
+
+import type { TurboModule } from "react-native";
+
+export interface Spec extends TurboModule {
+  readonly getConstants: () => {};
+
+  // methods
+  setInputMode(mode: number): void;
+  setDefaultMode(): void;
+  dismiss(): void;
+  setFocusTo(direction: string): void;
+
+  // event emitter
+  addListener: (eventName: string) => void;
+  removeListeners: (count: number) => void;
+}
+
+export default TurboModuleRegistry.get<Spec>("KeyboardController");

package/src/specs/NativeStatusBarManagerCompat.ts

@@ -0,0 +1,14 @@
+import { TurboModuleRegistry } from "react-native";
+
+import type { TurboModule } from "react-native";
+
+export interface Spec extends TurboModule {
+  readonly getConstants: () => {};
+
+  setHidden(hidden: boolean): void;
+  setColor(color: number, animated: boolean): void;
+  setTranslucent(translucent: boolean): void;
+  setStyle(style: string): void;
+}
+
+export default TurboModuleRegistry.get<Spec>("StatusBarManagerCompat");

package/src/types.ts

@@ -0,0 +1,211 @@
+import type {
+  EmitterSubscription,
+  NativeSyntheticEvent,
+  ViewProps,
+} from "react-native";
+
+// DirectEventHandler events declaration
+export type NativeEvent = {
+  progress: number;
+  height: number;
+  duration: number;
+  target: number;
+};
+export type FocusedInputLayoutChangedEvent = {
+  target: number;
+  parentScrollViewTarget: number;
+  layout: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    absoluteX: number;
+    absoluteY: number;
+  };
+};
+export type FocusedInputTextChangedEvent = {
+  text: string;
+};
+export type FocusedInputSelectionChangedEvent = {
+  target: number;
+  selection: {
+    start: {
+      x: number;
+      y: number;
+      position: number;
+    };
+    end: {
+      x: number;
+      y: number;
+      position: number;
+    };
+  };
+};
+export type EventWithName<T> = {
+  eventName: string;
+} & T;
+
+// native View/Module declarations
+export type KeyboardControllerProps = {
+  // callback props
+  onKeyboardMoveStart?: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
+  ) => void;
+  onKeyboardMove?: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
+  ) => void;
+  onKeyboardMoveEnd?: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
+  ) => void;
+  onKeyboardMoveInteractive?: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
+  ) => void;
+  onFocusedInputLayoutChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,
+  ) => void;
+  onFocusedInputTextChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,
+  ) => void;
+  onFocusedInputSelectionChanged?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,
+  ) => void;
+  // fake props used to activate reanimated bindings
+  onKeyboardMoveReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,
+  ) => void;
+  onFocusedInputLayoutChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,
+  ) => void;
+  onFocusedInputTextChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,
+  ) => void;
+  onFocusedInputSelectionChangedReanimated?: (
+    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,
+  ) => void;
+  // props
+  statusBarTranslucent?: boolean;
+  navigationBarTranslucent?: boolean;
+  enabled?: boolean;
+} & ViewProps;
+
+export type KeyboardGestureAreaProps = {
+  interpolator: "ios" | "linear";
+  /**
+   * Whether to allow to show a keyboard from dismissed state by swipe up.
+   * Default to `false`.
+   */
+  showOnSwipeUp?: boolean;
+  /**
+   * Whether to allow to control a keyboard by gestures. The strategy how
+   * it should be controlled is determined by `interpolator` property.
+   * Defaults to `true`.
+   */
+  enableSwipeToDismiss?: boolean;
+} & ViewProps;
+
+export type Direction = "next" | "prev" | "current";
+export type KeyboardControllerModule = {
+  // android only
+  setDefaultMode: () => void;
+  setInputMode: (mode: number) => void;
+  // all platforms
+  dismiss: () => void;
+  setFocusTo: (direction: Direction) => void;
+  // native event module stuff
+  addListener: (eventName: string) => void;
+  removeListeners: (count: number) => void;
+};
+
+// Event module declarations
+export type KeyboardControllerEvents =
+  | "keyboardWillShow"
+  | "keyboardDidShow"
+  | "keyboardWillHide"
+  | "keyboardDidHide";
+export type KeyboardEventData = {
+  height: number;
+  duration: number;
+  timestamp: number;
+  target: number;
+};
+export type KeyboardEventsModule = {
+  addListener: (
+    name: KeyboardControllerEvents,
+    cb: (e: KeyboardEventData) => void,
+  ) => EmitterSubscription;
+};
+export type FocusedInputAvailableEvents = "focusDidSet";
+export type FocusedInputEventData = {
+  current: number;
+  count: number;
+};
+export type FocusedInputEventsModule = {
+  addListener: (
+    name: FocusedInputAvailableEvents,
+    cb: (e: FocusedInputEventData) => void,
+  ) => EmitterSubscription;
+};
+export type WindowDimensionsAvailableEvents = "windowDidResize";
+export type WindowDimensionsEventData = {
+  width: number;
+  height: number;
+};
+export type WindowDimensionsEventsModule = {
+  addListener: (
+    name: WindowDimensionsAvailableEvents,
+    cb: (e: WindowDimensionsEventData) => void,
+  ) => EmitterSubscription;
+};
+
+// reanimated hook declaration
+export type KeyboardHandlerHook<TContext, Event> = (
+  handlers: {
+    onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMoveInteractive?: (e: NativeEvent, context: TContext) => void;
+  },
+  dependencies?: unknown[],
+) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputLayoutHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputLayoutChanged?: (
+      e: FocusedInputLayoutChangedEvent,
+      context: TContext,
+    ) => void;
+  },
+  dependencies?: unknown[],
+) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputTextHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputTextChanged?: (
+      e: FocusedInputTextChangedEvent,
+      context: TContext,
+    ) => void;
+  },
+  dependencies?: unknown[],
+) => (e: NativeSyntheticEvent<Event>) => void;
+export type FocusedInputSelectionHandlerHook<TContext, Event> = (
+  handlers: {
+    onFocusedInputSelectionChanged?: (
+      e: FocusedInputSelectionChangedEvent,
+      context: TContext,
+    ) => void;
+  },
+  dependencies?: unknown[],
+) => (e: NativeSyntheticEvent<Event>) => void;
+
+// package types
+export type Handlers<T> = Record<string, T | undefined>;
+export type KeyboardHandler = Partial<{
+  onStart: (e: NativeEvent) => void;
+  onMove: (e: NativeEvent) => void;
+  onEnd: (e: NativeEvent) => void;
+  onInteractive: (e: NativeEvent) => void;
+}>;
+export type KeyboardHandlers = Handlers<KeyboardHandler>;
+export type FocusedInputHandler = Partial<{
+  onChangeText: (e: FocusedInputTextChangedEvent) => void;
+  onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;
+}>;
+export type FocusedInputHandlers = Handlers<FocusedInputHandler>;

package/src/utils.ts

@@ -0,0 +1 @@
+export const uuid = () => Math.random().toString(36).slice(-6);