@react-native-ohos/react-native-keyboard-controller 1.16.6-rc.1

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -0,0 +1,71 @@
+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;
+  preserveEdgeToEdge?: 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,20 @@
+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 {
+  Double,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+export interface NativeProps extends ViewProps {
+  interpolator?: WithDefault<"linear" | "ios", "linear">;
+  showOnSwipeUp?: boolean;
+  enableSwipeToDismiss?: boolean;
+  offset?: Double;
+  textInputNativeID?: string;
+}
+
+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(keepFocus: boolean): 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/specs/OverKeyboardViewNativeComponent.ts

@@ -0,0 +1,12 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {
+  visible?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "OverKeyboardView",
+) as HostComponent<NativeProps>;

package/src/types.ts

@@ -0,0 +1,243 @@
+import type { PropsWithChildren } from "react";
+import type {
+  EmitterSubscription,
+  NativeSyntheticEvent,
+  TextInputProps,
+  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;
+  preserveEdgeToEdge?: 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;
+  /**
+   * Extra distance to the keyboard.
+   */
+  offset?: number;
+  /**
+   * A corresponding `nativeID` value from the corresponding `TextInput`.
+   */
+  textInputNativeID?: string;
+} & ViewProps;
+
+export type OverKeyboardViewProps = PropsWithChildren<{
+  visible: boolean;
+}>;
+
+export type Direction = "next" | "prev" | "current";
+export type DismissOptions = {
+  keepFocus: boolean;
+};
+export type KeyboardControllerModule = {
+  // android only
+  setDefaultMode: () => void;
+  setInputMode: (mode: number) => void;
+  // all platforms
+  dismiss: (options?: DismissOptions) => Promise<void>;
+  setFocusTo: (direction: Direction) => void;
+  isVisible: () => boolean;
+  state: () => KeyboardEventData | null;
+  addListener: (eventName: string) => void;
+  removeListeners: (count: number) => void;
+};
+export type KeyboardControllerNativeModule = {
+  // android only
+  setDefaultMode: () => void;
+  setInputMode: (mode: number) => void;
+  // all platforms
+  dismiss: (keepFocus: boolean) => 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;
+  type: NonNullable<TextInputProps["keyboardType"]>;
+  appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
+};
+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);

package/src/views/OverKeyboardView/index.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+
+import { RCTOverKeyboardView } from "../../bindings";
+import { useWindowDimensions } from "../../hooks";
+
+import type { OverKeyboardViewProps } from "../../types";
+import type { PropsWithChildren } from "react";
+
+const OverKeyboardView = ({
+  children,
+  visible,
+}: PropsWithChildren<OverKeyboardViewProps>) => {
+  const { height, width } = useWindowDimensions();
+  const inner = useMemo(() => ({ height, width }), [height, width]);
+  const style = useMemo(
+    () => [
+      styles.absolute,
+      // On iOS - stretch view to full window dimensions to make yoga work
+      // On Android Fabric we temporarily use the same approach
+      // @ts-expect-error `_IS_FABRIC` is injected by REA
+      Platform.OS === "ios" || global._IS_FABRIC ? inner : undefined,
+    ],
+    [inner],
+  );
+
+  return (
+    <RCTOverKeyboardView visible={visible}>
+      {/* `OverKeyboardView` should always have a single child */}
+      <View collapsable={false} style={style}>
+        {children}
+      </View>
+    </RCTOverKeyboardView>
+  );
+};
+
+const styles = StyleSheet.create({
+  absolute: {
+    position: "absolute",
+  },
+});
+
+export default OverKeyboardView;

package/src/views/index.ts

@@ -0,0 +1 @@
+export { default as OverKeyboardView } from "./OverKeyboardView";