@react-native-ohos/react-native-reanimated 3.18.2-rc.2 → 3.18.3-beta.2

package/README.md

@@ -2,9 +2,9 @@
 This project is based on [react-native-reanimated@v3.18.0](https://github.com/software-mansion/react-native-reanimated/tree/3.18.0)
 
 ## Documentation
-[中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-reanimated.md)
+[中文](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/zh-cn/react-native-reanimated.md)
 
-[English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-reanimated.md)
+[English](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/en/react-native-reanimated.md)
 
 ## License
 This library is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-harmony-reanimated/blob/sig/LICENSE).

package/harmony/reanimated/BuildProfile.ets

@@ -1,7 +1,7 @@
 /**
  * Use these variables when you tailor your ArkTS code. They must be of the const type.
  */
-export const HAR_VERSION = '3.18.2-rc.2';
+export const HAR_VERSION = '3.18.3-beta.2';
 export const BUILD_MODE_NAME = 'debug';
 export const DEBUG = true;
 export const TARGET_NAME = 'default';

package/harmony/reanimated/oh-package-lock.json5

@@ -0,0 +1,29 @@
+{
+  "meta": {
+    "stableOrder": true
+  },
+  "lockfileVersion": 3,
+  "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
+  "specifiers": {
+    "@ppd/ffrt@1.1.5": "@ppd/ffrt@1.1.5",
+    "@rnoh/react-native-openharmony@../../example/node_modules/react-native-harmony/react_native_openharmony.har": "@rnoh/react-native-openharmony@../../example/node_modules/react-native-harmony/react_native_openharmony.har"
+  },
+  "packages": {
+    "@ppd/ffrt@1.1.5": {
+      "name": "@ppd/ffrt",
+      "version": "1.1.5",
+      "integrity": "sha512-MbXdRqeNHQQv4ALTGdosvOCQI+xH8nt0+E2/aFLS4UuGJ5541MAeenRCDOrgIG05k7SnSJ4WngsCfjj3FbTCQg==",
+      "resolved": "https://ohpm.openharmony.cn/ohpm/@ppd/ffrt/-/ffrt-1.1.5.har",
+      "registryType": "ohpm"
+    },
+    "@rnoh/react-native-openharmony@../../example/node_modules/react-native-harmony/react_native_openharmony.har": {
+      "name": "@rnoh/react-native-openharmony",
+      "version": "0.77.71",
+      "resolved": "../../example/node_modules/react-native-harmony/react_native_openharmony.har",
+      "registryType": "local",
+      "dependencies": {
+        "@ppd/ffrt": "1.1.5"
+      }
+    }
+  }
+}

package/harmony/reanimated/oh-package.json5

@@ -1,6 +1,6 @@
 {
   name: '@react-native-ohos/react-native-reanimated',
-  version: '3.18.2-rc.2',
+  version: '3.18.3-beta.2',
   description: "",
   type: 'module',
   main: 'index.ets',

package/harmony/reanimated/src/main/cpp/Common/cpp/reanimated/Fabric/PropsRegistry.h

@@ -17,6 +17,11 @@ class PropsRegistry {
   std::lock_guard<std::mutex> createLock() const;
   // returns a lock you need to hold when calling any of the methods below
 
+  void clear() {  
+    map_.clear();
+    removableShadowNodes_.clear();                                                                                                                                                     
+  }  
+
   void update(const ShadowNode::Shared &shadowNode, folly::dynamic &&props);
 
   void for_each(std::function<void(

package/harmony/reanimated/src/main/cpp/ReanimatedModule.cpp

@@ -105,11 +105,12 @@ void ReanimatedModule::installTurboModule(facebook::jsi::Runtime &rt)
             self->keyboardEventDataUpdater_ = std::move(keyboardEventDataUpdater);
             auto weakExecutor = std::weak_ptr(self->m_ctx.taskExecutor);
             if (auto taskExecutor = weakExecutor.lock()) {
-                taskExecutor->runTask(TaskThread::MAIN, [ctx = self->m_ctx, isStatusBarTranslucent]() {
+                taskExecutor->runTask(TaskThread::MAIN, [ctx = self->m_ctx, isStatusBarTranslucent, isNavigationBarTranslucent]() {
                     ArkJS arkJs(ctx.env);
-                    // arkJs.createBoolean(isStatusBarTranslucent);
+                    auto isStatusBarTranslucentValue = arkJs.createBoolean(isStatusBarTranslucent);
+                    auto isNavigationBarTranslucentValue = arkJs.createBoolean(isNavigationBarTranslucent);
                     auto napiTurboModuleObject = arkJs.getObject(ctx.arkTSTurboModuleInstanceRef);
-                    napiTurboModuleObject.call("subscribeKeyBordListeners", {});
+                    napiTurboModuleObject.call("subscribeKeyBordListeners", {isStatusBarTranslucentValue, isNavigationBarTranslucentValue});
                 });
             }
             return 0;

package/harmony/reanimated/src/main/cpp/patches/NativeModules/ReanimatedModuleProxy.cpp

@@ -234,6 +234,28 @@ ReanimatedModuleProxy::~ReanimatedModuleProxy() {
   frameCallbacks_.clear();
 #ifdef RCT_NEW_ARCH_ENABLED
   operationsInBatch_.clear();
+  // 清空 PropsRegistry 中持有的 ShadowNode 引用,避免析构时级联释放已被框架回收的 ShadowNodeFamily
+  if (propsRegistry_) {
+    auto lock = propsRegistry_->createLock();
+    // 清空内部 map，释放所有 ShadowNode::Shared
+    propsRegistry_->clear();                                                                                                                                           
+  }
+  propsRegistry_.reset();
+
+  // LayoutAnimationsProxy 持有 ShadowView/MutationNode 引用（内部包含
+  // ShadowNode::Shared），需要在 runtime 销毁前清空，避免 runtime 析构时
+  // GC 级联触发 ShadowNodeFamily::~ShadowNodeFamily() 崩溃
+  if (layoutAnimationsProxy_) {
+    auto lock = std::unique_lock<std::recursive_mutex>(
+        layoutAnimationsProxy_->mutex);
+    layoutAnimationsProxy_->layoutAnimations_.clear();
+    layoutAnimationsProxy_->nodeForTag_.clear();
+    layoutAnimationsProxy_->deadNodes.clear();
+    layoutAnimationsProxy_->leastRemoved.clear();
+    layoutAnimationsProxy_->surfaceManager.props_.clear();
+  }
+  layoutAnimationsProxy_.reset();
+
 #endif // RCT_NEW_ARCH_ENABLED
   uiWorkletRuntime_.reset();
 }

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

@@ -3,40 +3,104 @@
 // 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";
 
 export class ReanimatedModule extends UITurboModule {
   static NAME = "ReanimatedModule"
   private logger: RNOHLogger
   private keyBordHeight = 0;
+  private currentAnimator: AnimatorResult ;
+  private currentAnimatedHeight = 0;
 
-  constructor(ctx:  UITurboModuleContext) {
+  constructor(ctx: UITurboModuleContext) {
     super(ctx);
     this.logger = ctx.logger.clone("Reanimated");
   }
+
   public setViewProps(tag: Tag, props: Object) {
     this.ctx.descriptorRegistry.setAnimatedRawProps(tag, props);
   }
 
-  public async subscribeKeyBordListeners() {
+  public async subscribeKeyBordListeners(isStatusBarTranslucent: boolean, isNavigationBarTranslucent: boolean) {
+    //ignore isStatusBarTranslucent  - those are Android only
     const windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
+    const navIndicatorArea = windowInstance.getWindowAvoidArea(
+      window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
+    );
+    const navIndicatorHeight = this.ctx.getUIContext().px2vp(
+      navIndicatorArea.bottomRect.height
+    );
+
+    const isEdgeToEdge = this.isEdgeToEdgeMode(windowInstance);
+    const effectiveNavBarTranslucent = isEdgeToEdge && isNavigationBarTranslucent;
+
     windowInstance.on('keyboardHeightChange', async (height) => {
-      let keyBordHeight = this.ctx.getUIContext().px2vp(height);
-      const animationManager = new AnimationManager();
-      animationManager.setUpdateCallback((value, status) => {
+      let rawKeyboardHeight = this.ctx.getUIContext().px2vp(height);
+      //If the immersive mode is not enabled, then the area around the bottom navigation bar that needs to be avoided needs to be removed.
+      //If the immersive mode is enabled, the returned value will be the height of the current keyboard.
+      let keyBordHeight = effectiveNavBarTranslucent
+        ? rawKeyboardHeight
+        : Math.max(0, rawKeyboardHeight - navIndicatorHeight);
+
+      //Unchanged height, skip handle
+      if (Math.abs(keyBordHeight - this.currentAnimatedHeight) < 0.01) {
+        return;
+      }
+
+      const isOpening = keyBordHeight > this.keyBordHeight;
+
+      if (this.currentAnimator) {
+        this.currentAnimator.onFrame = null;
+        this.currentAnimator.onFinish = null;
+        this.currentAnimator.cancel();
+        this.currentAnimator = null;
+      }
+
+      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 = keyBordHeight > this.keyBordHeight ? KeyboardState.OPENING : KeyboardState.CLOSING;
         this.ctx.rnInstance.postMessageToCpp("REANIMATED_KEY_BOARD_CHANGE",
-          { keyboardHeight: value, status: status.valueOf() });
-      });
-      animationManager.startAnimation(this.keyBordHeight, keyBordHeight, 200);
-      this.keyBordHeight = keyBordHeight;
+          { keyboardHeight: progress, status: status.valueOf() });
+      }
+      this.currentAnimator.onFinish = () => {
+        this.currentAnimatedHeight = keyBordHeight;
+        let status = keyBordHeight > this.keyBordHeight ? KeyboardState.OPEN : KeyboardState.CLOSED;
+        this.keyBordHeight = keyBordHeight;
+        this.ctx.rnInstance.postMessageToCpp("REANIMATED_KEY_BOARD_CHANGE",
+          { keyboardHeight: keyBordHeight, status: status.valueOf() });
+      }
+      this.currentAnimator.play();
     })
   }
 
   public async unsubscribeKeyBordListeners() {
     const windowInstance = await window.getLastWindow(this.ctx.uiAbilityContext);
-    windowInstance.off('keyboardHeightChange', (v) => {
-    })
+    windowInstance.off('keyboardHeightChange')
+    if (this.currentAnimator) {
+      this.currentAnimator.onFrame = null;
+      this.currentAnimator.onFinish = null;
+      this.currentAnimator.cancel();
+      this.currentAnimator = null;
+    }
+    this.keyBordHeight = 0;
+    this.currentAnimatedHeight = 0;
   }
 
   public setGestureHandlerState(handlerTag: Tag, newState: number) {
@@ -45,4 +109,15 @@ export class ReanimatedModule extends UITurboModule {
       module.setGestureHandlerState(handlerTag, newState);
     }
   }
+
+  private isEdgeToEdgeMode(windowInstance: window.Window) {
+    let isLayoutFullScreen = false;
+    try {
+      const windowProperties = windowInstance.getWindowProperties();
+      isLayoutFullScreen = windowProperties.isLayoutFullScreen;
+    } catch (e: ESObject) {
+      isLayoutFullScreen = false;
+    }
+    return isLayoutFullScreen;
+  }
 }

package/package.json

@@ -4,11 +4,12 @@
     "alias": "react-native-reanimated",
     "redirectInternalImports": true
   },
-  "version": "3.18.2-rc.2",
+  "version": "3.18.3-beta.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
     "build": "tsc",
+    "pack":"npm pack",
     "pack:prod": "npm pack",
     "prepack": "npm run build",
     "prepublishOnly": "npm run prepack && react-native verify-package-harmony --package-path . --skip-checks oh_package_name_is_derived_from_npm_package_name",