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

package/package.json

@@ -0,0 +1,177 @@
+{
+  "name": "@react-native-ohos/react-native-keyboard-controller",
+  "version": "1.12.8-rc.1",
+  "description": "Keyboard manager which works in identical way on  iOS and Android and harmony",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "harmony",
+    "cpp",
+    "react-native-keyboard-controller.podspec",
+    "jest",
+    "!lib/typescript/example",
+    "!android/build",
+    "!android/.gradle",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!ios/build",
+    "!ios/KeyboardControllerNative",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "format": "prettier '**/*' --ignore-unknown --write",
+    "test": "jest",
+    "typescript": "tsc --noEmit --project tsconfig.build.json",
+    "lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
+    "lint-clang": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm | grep -v -e Pods -e build | xargs clang-format -i -n --Werror",
+    "prepare": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods"
+  },
+  "keywords": [
+    "react-native",
+    "keyboard",
+    "interactive",
+    "dismiss",
+    "animation",
+    "focused input",
+    "text changed",
+    "selection changed",
+    "avoiding view",
+    "avoid keyboard",
+    "sticky view",
+    "keyboard aware scroll view",
+    "keyboard toolbar",
+    "keyboard done button",
+    "keyboard next button",
+    "keyboard previous button",
+    "ios",
+    "android",
+    "harmony"
+  ],
+  "repository": "https://github.com/react-native-oh-library/react-native-keyboard-controller",
+  "author": "Kiryl Ziusko <zyusko.kirik@gmail.com> (https://github.com/kirillzyusko)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react-native-oh-library/react-native-keyboard-controller/issues"
+  },
+  "homepage": "https://kirillzyusko.github.io/react-native-keyboard-controller/",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^11.0.0",
+    "@react-native/eslint-config": "^0.75.3",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "clang-format": "^1.8.0",
+    "commitlint": "^11.0.0",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-0998c1e-20240625",
+    "eslint-plugin-react-perf": "^3.3.2",
+    "husky": "^6.0.0",
+    "jest": "^29.6.3",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.8.8",
+    "react": "18.3.1",
+    "react-native": "0.75.3",
+    "react-native-builder-bob": "^0.18.0",
+    "react-native-reanimated": "3.15.0",
+    "react-test-renderer": "18.2.0",
+    "release-it": "^14.2.2",
+    "typescript": "5.0.4"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-keyboard-controller": "1.12.7"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "trailingComma": "all"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "reactnativekeyboardcontroller",
+    "type": "all",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.reactnativekeyboardcontroller"
+    }
+  },
+  "harmony": {
+    "alias": "react-native-keyboard-controller",
+    "autolinking": {
+      "etsPackageClassName":"RNKeyboardControllerPackage",
+      "cppPackageClassName":"RNKeyboardControllerPackage",
+      "cmakeLibraryTargetName": "rnoh_keyboard_controller", 
+      "ohPackageName": "@react-native-ohos/react-native-keyboard-controller"
+    }
+  }
+}

package/react-native-keyboard-controller.podspec

@@ -0,0 +1,61 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-keyboard-controller"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/kirillzyusko/react-native-keyboard-controller.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.exclude_files = "ios/KeyboardControllerNative/**/*"
+  s.public_header_files = "ios/**/*.h"
+
+  # This guard prevent to install the dependencies when we run `pod install` in the old architecture.
+  if new_arch_enabled then
+    s.pod_target_xcconfig = {
+      # This is handy when we want to detect if new arch is enabled in Swift code
+      # and can be used like:
+      # #if KEYBOARD_CONTROLLER_NEW_ARCH_ENABLED
+      # // do sth when new arch is enabled
+      # #else
+      # // do sth when old arch is enabled
+      # #endif
+      "OTHER_SWIFT_FLAGS" => "-DKEYBOARD_CONTROLLER_NEW_ARCH_ENABLED"
+    }
+  end
+
+  # install_modules_dependencies has been defined since React Native 71
+  if defined?(install_modules_dependencies)
+    install_modules_dependencies(s)
+  else
+    s.dependency 'React-Core'
+
+    # This guard prevent to install the dependencies when we run `pod install` in the old architecture.
+    if new_arch_enabled then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig = s.pod_target_xcconfig | {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+
+      s.dependency "React-RCTFabric"
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
+end

package/src/animated.tsx

@@ -0,0 +1,246 @@
+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"]);
+      },
+      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>{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

@@ -0,0 +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;

package/src/bindings.ts

@@ -0,0 +1,38 @@
+import { View } from "react-native";
+
+import type {
+  FocusedInputEventsModule,
+  KeyboardControllerModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardGestureAreaProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+import type { EmitterSubscription } from "react-native";
+
+const NOOP = () => {};
+export const KeyboardController: KeyboardControllerModule = {
+  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>;

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -0,0 +1,58 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import {useKeyboardHandler} from "../../hooks";
+import {useKeyboardContext} from "../../context";
+import { Platform } from "react-native";
+
+export const useKeyboardAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+  const heightWhenOpened = useSharedValue(-reanimated.height.value);
+  const height = useSharedValue(-reanimated.height.value);
+  const progress = useSharedValue(reanimated.progress.value);
+  const isClosed = useSharedValue(reanimated.progress.value === 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;
+      },
+      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 };
+};