@react-native-ohos/react-native-reanimated 4.0.2 → 4.0.3-beta.1

package/harmony/reanimated/src/main/ets/ReanimatedModule.ts

@@ -3,15 +3,16 @@
 // found in the LICENSE file.
 
 import { RNOHLogger, Tag, UITurboModule, UITurboModuleContext } from "@rnoh/react-native-openharmony/ts";
-import { window } from '@kit.ArkUI';
-import { AnimationManager } from './AnimationManager'
+import { Animator, AnimatorResult, window } from '@kit.ArkUI';
+import { KeyboardState } from './AnimationManager'
 import deviceInfo from '@ohos.deviceInfo';
 import { accessibility } from '@kit.AccessibilityKit';
 
 export class ReanimatedModule extends UITurboModule {
   static NAME = "ReanimatedModule"
   private logger: RNOHLogger
-  private keyBordHeight = 0;
+  private currentAnimator: AnimatorResult;
+  private currentAnimatedHeight = 0;
 
   constructor(ctx: UITurboModuleContext) {
     super(ctx);
@@ -23,24 +24,107 @@ export class ReanimatedModule extends UITurboModule {
 
   }
 
-  public async subscribeKeyBordListeners() {
-    const windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
+  public async subscribeKeyBordListeners(isStatusBarTranslucent: boolean, isNavigationBarTranslucent: boolean) {
+    let windowInstance: window.Window;
+    try {
+      windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
+    } catch (e: ESObject) {
+      this.logger.error(`subscribeKeyBordListeners failed: ${e?.message ?? e}`);
+      return;
+    }
+
     windowInstance.on('keyboardHeightChange', async (height) => {
-      let keyBordHeight = this.ctx.getUIContext().px2vp(height);
-      const animationManager = new AnimationManager();
-      animationManager.setUpdateCallback((value, status) => {
-        this.ctx.rnInstance.postMessageToCpp("REANIMATED_KEY_BOARD_CHANGE",
-          { keyboardHeight: value, status: status.valueOf() });
-      });
-      animationManager.startAnimation(this.keyBordHeight, keyBordHeight, 200);
-      this.keyBordHeight = keyBordHeight;
+      const keyBordHeight = this.calculateKeyboardHeight(windowInstance, height, isNavigationBarTranslucent);
+      // Unchanged height, skip handle
+      if (Math.abs(keyBordHeight - this.currentAnimatedHeight) < 0.01) {
+        return;
+      }
+      this.startKeyboardAnimator(keyBordHeight);
     })
   }
 
+  private calculateKeyboardHeight(windowInstance: window.Window, height: number, isNavigationBarTranslucent: boolean): number {
+    let navIndicatorHeight = 0;
+    try {
+      const navIndicatorArea = windowInstance.getWindowAvoidArea(
+        window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
+      );
+      navIndicatorHeight = this.ctx.getUIContext().px2vp(
+        navIndicatorArea?.bottomRect?.height ?? 0
+      );
+    } catch (e) {
+      navIndicatorHeight = 0;
+    }
+    const isEdgeToEdge = this.isEdgeToEdgeMode(windowInstance);
+    const effectiveNavBarTranslucent = isEdgeToEdge && isNavigationBarTranslucent;
+    const rawKeyboardHeight = this.ctx.getUIContext().px2vp(height);
+    return effectiveNavBarTranslucent
+      ? rawKeyboardHeight
+      : Math.max(0, rawKeyboardHeight - navIndicatorHeight);
+  }
+
+  private startKeyboardAnimator(keyBordHeight: number) {
+    const isOpening = keyBordHeight > this.currentAnimatedHeight;
+    this.cancelCurrentAnimator();
+    this.currentAnimator = Animator.create({
+      duration: isOpening ? 480 : 350,
+      delay: 0,
+      //simulate the keyboard pop-up and retraction animations in harmony
+      easing: isOpening ? "cubic-bezier(0.2, 0.0, 0.1, 1.0)"
+        : "cubic-bezier(0.0, 0.0, 0.1, 1.0)",
+      fill: "forwards",
+      direction: "normal",
+      iterations: 1,
+      begin: this.currentAnimatedHeight,
+      end: keyBordHeight
+    }
+    )
+    this.currentAnimator.onFrame = (progress: number) => {
+      this.currentAnimatedHeight = progress;
+      if (Math.abs(progress - keyBordHeight) < 0.01) { //The final instruction is sent by "onFinish".
+        return;
+      }
+      let status = isOpening ? KeyboardState.OPENING : KeyboardState.CLOSING;
+      this.ctx.rnInstance.postMessageToCpp("REANIMATED_KEY_BOARD_CHANGE",
+        { keyboardHeight: progress, status: status.valueOf() });
+    }
+    this.currentAnimator.onFinish = () => {
+      this.currentAnimatedHeight = keyBordHeight;
+      let status = isOpening ? KeyboardState.OPEN : KeyboardState.CLOSED;
+      this.ctx.rnInstance.postMessageToCpp("REANIMATED_KEY_BOARD_CHANGE",
+        { keyboardHeight: keyBordHeight, status: status.valueOf() });
+    }
+    this.currentAnimator.play();
+  }
+
+  private cancelCurrentAnimator() {
+    if (this.currentAnimator) {
+      this.currentAnimator.onFrame = null;
+      this.currentAnimator.onFinish = null;
+      this.currentAnimator.cancel();
+      this.currentAnimator = null;
+    }
+  }
+
+  private isEdgeToEdgeMode(windowInstance: window.Window): boolean {
+    try {
+      return windowInstance.getWindowProperties().isLayoutFullScreen;
+    } catch (e) {
+      return false;
+    }
+  }
+
   public async unsubscribeKeyBordListeners() {
-    const windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
-    windowInstance.off('keyboardHeightChange', (v) => {
-    })
+    let windowInstance: window.Window;
+    try {
+      windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
+    } catch (e: ESObject) {
+      this.logger.error(`unsubscribeKeyBordListeners failed: ${e?.message ?? e}`);
+      return;
+    }
+    windowInstance.off('keyboardHeightChange')
+    this.cancelCurrentAnimator();
+    this.currentAnimatedHeight = 0;
   }
 
   public setGestureHandlerState(handlerTag: Tag, newState: number) {

package/package.json

@@ -4,14 +4,21 @@
     "alias": "react-native-reanimated",
     "redirectInternalImports": true
   },
-  "version": "4.0.2",
+  "version": "4.0.3-beta.1",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitcode.com/CPF-RN/rntpc_react-native-reanimated.git",
+    "directory": "package/react-native-reanimated"
+  },
+  "homepage": "https://gitcode.com/CPF-RN/rntpc_react-native-reanimated/blob/br_rnoh0.82/README.md",
   "main": "lib/index.js",
   "scripts": {
     "build": "tsc",
     "pack":"npm pack",
     "pack:prod": "npm pack",
-    "prepack": "npm run build",
+    "prepack": "npm run build && node -e \"require('fs').copyFileSync('../../CHANGELOG.md','./CHANGELOG.md')\" && node -e \"require('fs').copyFileSync('../../README.md','./README.md')\"",
+    "postpack": "node -e \"require('fs').rmSync('./CHANGELOG.md',{force:true})\" && node -e \"require('fs').rmSync('./README.md',{force:true})\"",
     "prepublishOnly": "npm run prepack && react-native verify-package-harmony --package-path . --skip-checks oh_package_name_is_derived_from_npm_package_name",
     "update_version": "node ./scripts/update-version.js",
     "deploy": "node ./scripts/deploy.js"
@@ -62,9 +69,10 @@
   "files": [
     "lib",
     "harmony",
-	"scripts",
+	  "scripts",
     "src",
     "./harmony.tar.gz",
-	"compatibility.json"
+	  "compatibility.json",
+    "CHANGELOG.md"
   ]
 }