react-native-reanimated 3.19.1 → 3.19.2

package/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.cpp

@@ -37,6 +37,9 @@ std::optional<MountingTransaction> LayoutAnimationsProxy::pullTransaction(
 
   addOngoingAnimations(surfaceId, filteredMutations);
 
+#ifdef ANDROID
+  restoreOpacityInCaseOfFlakyEnteringAnimation(surfaceId);
+#endif // ANDROID
   for (const auto tag : finishedAnimationTags_) {
     auto &updateMap = surfaceManager.getUpdateMap(surfaceId);
     layoutAnimations_.erase(tag);
@@ -403,7 +406,36 @@ void LayoutAnimationsProxy::addOngoingAnimations(
     SurfaceId surfaceId,
     ShadowViewMutationList &mutations) const {
   auto &updateMap = surfaceManager.getUpdateMap(surfaceId);
+#ifdef ANDROID
+  std::vector<int> tagsToUpdate;
   for (auto &[tag, updateValues] : updateMap) {
+    tagsToUpdate.push_back(tag);
+  }
+
+  auto maybeCorrectedTags = preserveMountedTags_(tagsToUpdate);
+  if (!maybeCorrectedTags.has_value()) {
+    return;
+  }
+
+  auto correctedTags = maybeCorrectedTags->get();
+
+  // since the map is not updated, we can assume that the ordering of tags in
+  // correctedTags matches the iterator
+  int i = -1;
+#endif
+  for (auto &[tag, updateValues] : updateMap) {
+#ifdef ANDROID
+    i++;
+    if (correctedTags[i] == -1) {
+      // skip views that have not been mounted yet
+      // on Android we start entering animations from the JS thread
+      // so it might happen, that the first frame of the animation goes through
+      // before the view is first mounted
+      // https://github.com/software-mansion/react-native-reanimated/issues/7493
+      continue;
+    }
+#endif
+
     auto layoutAnimationIt = layoutAnimations_.find(tag);
 
     if (layoutAnimationIt == layoutAnimations_.end()) {
@@ -411,7 +443,7 @@ void LayoutAnimationsProxy::addOngoingAnimations(
     }
 
     auto &layoutAnimation = layoutAnimationIt->second;
-
+    layoutAnimation.isViewAlreadyMounted = true;
     auto newView = std::make_shared<ShadowView>(*layoutAnimation.finalView);
     newView->props = updateValues.newProps;
     updateLayoutMetrics(newView->layoutMetrics, updateValues.frame);
@@ -648,11 +680,13 @@ void LayoutAnimationsProxy::createLayoutAnimation(
 #if REACT_NATIVE_MINOR_VERSION >= 78
   layoutAnimations_.insert_or_assign(
       tag,
-      LayoutAnimation{finalView, currentView, mutation.parentTag, {}, count});
+      LayoutAnimation{
+          finalView, currentView, mutation.parentTag, {}, false, count});
 #else
   auto parentView = std::make_shared<ShadowView>(mutation.parentShadowView);
   layoutAnimations_.insert_or_assign(
-      tag, LayoutAnimation{finalView, currentView, parentView, {}, count});
+      tag,
+      LayoutAnimation{finalView, currentView, parentView, {}, false, count});
 #endif // REACT_NATIVE_MINOR_VERSION >= 78
 }
 
@@ -870,7 +904,12 @@ void LayoutAnimationsProxy::maybeRestoreOpacity(
   if (layoutAnimation.opacity && !newStyle.hasProperty(uiRuntime_, "opacity")) {
     newStyle.setProperty(
         uiRuntime_, "opacity", jsi::Value(*layoutAnimation.opacity));
-    layoutAnimation.opacity.reset();
+    if (layoutAnimation.isViewAlreadyMounted) {
+      // We want to reset opacity only when we are sure that this update will be
+      // applied to the native view. Otherwise, we want to update opacity using
+      // the `restoreOpacityInCaseOfFlakyEnteringAnimation` method.
+      layoutAnimation.opacity.reset();
+    }
   }
 }
 
@@ -887,6 +926,78 @@ void LayoutAnimationsProxy::maybeUpdateWindowDimensions(
   }
 }
 
+#ifdef ANDROID
+/*
+ * It is possible that we may finish the layout animation before the native view
+ * is mounted. If the view wasn't mounted, we wouldn't be able to restore the
+ * opacity of the view. To fix this, we need to schedule a React update that
+ * will restore the view's opacity. This is safe because we'll use the same
+ * queue where React has already scheduled (but not yet executed) the view
+ * mounting, so the opacity update will execute after the view is mounted.
+ */
+void LayoutAnimationsProxy::restoreOpacityInCaseOfFlakyEnteringAnimation(
+    SurfaceId surfaceId) const {
+  std::vector<std::pair<double, Tag>> opacityToRestore;
+  for (const auto tag : finishedAnimationTags_) {
+    const auto &opacity = layoutAnimations_[tag].opacity;
+    if (opacity.has_value()) {
+      opacityToRestore.emplace_back(
+          std::pair<double, Tag>{opacity.value(), tag});
+    }
+  }
+  if (opacityToRestore.empty()) {
+    // Animation was successfully finished, and the opacity was restored, so we
+    // don't need to do anything. Only the Entering animation has a set opacity
+    // value.
+    return;
+  }
+  const auto weakThis = weak_from_this();
+  jsInvoker_->invokeAsync([=](jsi::Runtime &runtime) {
+    const auto self = weakThis.lock();
+    if (!self) {
+      return;
+    }
+    self->uiManager_->getShadowTreeRegistry().visit(
+        surfaceId, [=](ShadowTree const &shadowTree) {
+          shadowTree.commit(
+              [=](RootShadowNode const &oldRootShadowNode) {
+                const auto self = weakThis.lock();
+                if (!self) {
+                  return cloneShadowTreeWithNewProps(oldRootShadowNode, {});
+                }
+                const auto &rootShadowNode =
+                    static_cast<const ShadowNode &>(oldRootShadowNode);
+                PropsMap propsMap;
+                for (const auto &[opacity, tag] : opacityToRestore) {
+                  const auto *targetShadowNode =
+                      self->findInShadowTreeByTag(rootShadowNode, tag);
+                  if (targetShadowNode != nullptr) {
+                    propsMap[&targetShadowNode->getFamily()].emplace_back(
+                        folly::dynamic::object("opacity", opacity));
+                  }
+                }
+                return cloneShadowTreeWithNewProps(oldRootShadowNode, propsMap);
+              },
+              {});
+        });
+  });
+}
+
+const ShadowNode *LayoutAnimationsProxy::findInShadowTreeByTag(
+    const ShadowNode &node,
+    Tag tag) const {
+  if (node.getTag() == tag) {
+    return const_cast<const ShadowNode *>(&node);
+  }
+  for (auto &child : node.getChildren()) {
+    if (const auto result = findInShadowTreeByTag(*child, tag)) {
+      return result;
+    }
+  }
+  return nullptr;
+}
+#endif // ANDROID
+
 } // namespace reanimated
 
 #endif // RCT_NEW_ARCH_ENABLED

package/Common/cpp/reanimated/LayoutAnimations/LayoutAnimationsProxy.h

@@ -4,12 +4,15 @@
 #include <reanimated/Fabric/PropsRegistry.h>
 #include <reanimated/LayoutAnimations/LayoutAnimationsManager.h>
 #include <reanimated/LayoutAnimations/LayoutAnimationsUtils.h>
+#include <reanimated/Tools/PlatformDepMethodsHolder.h>
 
 #include <worklets/Tools/UIScheduler.h>
 
 #include <react/renderer/componentregistry/ComponentDescriptorFactory.h>
 #include <react/renderer/mounting/MountingOverrideDelegate.h>
 #include <react/renderer/mounting/ShadowView.h>
+#include <react/renderer/scheduler/Scheduler.h>
+#include <react/renderer/uimanager/UIManagerBinding.h>
 
 #include <memory>
 #include <string>
@@ -31,6 +34,7 @@ struct LayoutAnimation {
   std::shared_ptr<ShadowView> finalView, currentView, parentView;
 #endif // REACT_NATIVE_MINOR_VERSION >= 78
   std::optional<double> opacity;
+  bool isViewAlreadyMounted = false;
   int count = 1;
   LayoutAnimation &operator=(const LayoutAnimation &other) = default;
 };
@@ -50,17 +54,38 @@ struct LayoutAnimationsProxy
   SharedComponentDescriptorRegistry componentDescriptorRegistry_;
   jsi::Runtime &uiRuntime_;
   const std::shared_ptr<UIScheduler> uiScheduler_;
+#ifdef ANDROID
+  PreserveMountedTagsFunction preserveMountedTags_;
+  std::shared_ptr<UIManager> uiManager_;
+  std::shared_ptr<CallInvoker> jsInvoker_;
+#endif
+
   LayoutAnimationsProxy(
       std::shared_ptr<LayoutAnimationsManager> layoutAnimationsManager,
       SharedComponentDescriptorRegistry componentDescriptorRegistry,
       ContextContainer::Shared contextContainer,
       jsi::Runtime &uiRuntime,
-      const std::shared_ptr<UIScheduler> uiScheduler)
+      const std::shared_ptr<UIScheduler> uiScheduler
+#ifdef ANDROID
+      ,
+      PreserveMountedTagsFunction filterUnmountedTagsFunction,
+      std::shared_ptr<UIManager> uiManager,
+      std::shared_ptr<CallInvoker> jsInvoker
+#endif
+      )
       : layoutAnimationsManager_(layoutAnimationsManager),
         contextContainer_(contextContainer),
         componentDescriptorRegistry_(componentDescriptorRegistry),
         uiRuntime_(uiRuntime),
-        uiScheduler_(uiScheduler) {}
+        uiScheduler_(uiScheduler)
+#ifdef ANDROID
+        ,
+        preserveMountedTags_(filterUnmountedTagsFunction),
+        uiManager_(uiManager),
+        jsInvoker_(jsInvoker)
+#endif // ANDROID
+  {
+  }
 
   void startEnteringAnimation(const int tag, ShadowViewMutation &mutation)
       const;
@@ -132,7 +157,11 @@ struct LayoutAnimationsProxy
 
   const ComponentDescriptor &getComponentDescriptorForShadowView(
       const ShadowView &shadowView) const;
-
+#ifdef ANDROID
+  void restoreOpacityInCaseOfFlakyEnteringAnimation(SurfaceId surfaceId) const;
+  const ShadowNode *findInShadowTreeByTag(const ShadowNode &node, Tag tag)
+      const;
+#endif // ANDROID
   // MountingOverrideDelegate
 
   bool shouldOverridePullTransaction() const override;

package/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp

@@ -74,6 +74,10 @@ ReanimatedModuleProxy::ReanimatedModuleProxy(
       layoutAnimationsManager_(
           std::make_shared<LayoutAnimationsManager>(jsLogger_)),
 #ifdef RCT_NEW_ARCH_ENABLED
+#ifdef ANDROID
+      filterUnmountedTagsFunction_(
+          platformDepMethodsHolder.filterUnmountedTagsFunction),
+#endif // ANDROID
       propsRegistry_(std::make_shared<PropsRegistry>()),
 #else
       obtainPropFunction_(platformDepMethodsHolder.obtainPropFunction),
@@ -943,7 +947,14 @@ void ReanimatedModuleProxy::initializeLayoutAnimationsProxy() {
         componentDescriptorRegistry,
         scheduler->getContextContainer(),
         uiWorkletRuntime_->getJSIRuntime(),
-        workletsModuleProxy_->getUIScheduler());
+        workletsModuleProxy_->getUIScheduler()
+#ifdef ANDROID
+            ,
+        filterUnmountedTagsFunction_,
+        uiManager_,
+        jsInvoker_
+#endif
+    );
   }
 }
 

package/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.h

@@ -223,6 +223,9 @@ class ReanimatedModuleProxy
   std::shared_ptr<LayoutAnimationsManager> layoutAnimationsManager_;
 
 #ifdef RCT_NEW_ARCH_ENABLED
+#ifdef ANDROID
+  const PreserveMountedTagsFunction filterUnmountedTagsFunction_;
+#endif // ANDROID
   std::unordered_set<std::string>
       animatablePropNames_; // filled by configureProps
   std::shared_ptr<UIManager> uiManager_;

package/Common/cpp/reanimated/Tools/PlatformDepMethodsHolder.h

@@ -6,6 +6,8 @@
 #include <react/renderer/core/ReactPrimitives.h>
 #endif
 
+#include <memory>
+#include <optional>
 #include <string>
 #include <utility>
 #include <vector>
@@ -53,6 +55,10 @@ using ObtainPropFunction =
 
 using RequestRenderFunction =
     std::function<void(std::function<void(const double)>)>;
+#ifdef ANDROID
+using PreserveMountedTagsFunction =
+    std::function<std::optional<std::unique_ptr<int[]>>(std::vector<int> &)>;
+#endif // ANDROID
 using GetAnimationTimestampFunction = std::function<double(void)>;
 
 using ProgressLayoutAnimationFunction =
@@ -75,7 +81,9 @@ using MaybeFlushUIUpdatesQueueFunction = std::function<void()>;
 struct PlatformDepMethodsHolder {
   RequestRenderFunction requestRender;
 #ifdef RCT_NEW_ARCH_ENABLED
-  // nothing
+#ifdef ANDROID
+  PreserveMountedTagsFunction filterUnmountedTagsFunction;
+#endif // ANDROID
 #else
   UpdatePropsFunction updatePropsFunction;
   ScrollToFunction scrollToFunction;

package/android/CMakeLists.txt

@@ -15,9 +15,16 @@ string(APPEND CMAKE_CXX_FLAGS
        " -DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}\
    -DREANIMATED_VERSION=${REANIMATED_VERSION}")
 
-string(APPEND CMAKE_CXX_FLAGS
-       " -fexceptions -fno-omit-frame-pointer -frtti -fstack-protector-all\
-   -std=c++${CMAKE_CXX_STANDARD} -Wall -Werror")
+string(APPEND CMAKE_CXX_FLAGS " -fno-omit-frame-pointer -fstack-protector-all")
+
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
+  include("${REACT_NATIVE_DIR}/ReactCommon/cmake-utils/\
+react-native-flags.cmake")
+  target_compile_reactnative_options(reanimated PUBLIC)
+else()
+  string(APPEND CMAKE_CXX_FLAGS
+         " -fexceptions -frtti -std=c++${CMAKE_CXX_STANDARD} -Wall -Werror")
+endif()
 
 if(${IS_NEW_ARCHITECTURE_ENABLED})
   string(APPEND CMAKE_CXX_FLAGS " -DRCT_NEW_ARCH_ENABLED")

package/android/src/fabric/java/com/swmansion/reanimated/NativeProxy.java

@@ -4,6 +4,7 @@ import androidx.annotation.OptIn;
 import com.facebook.jni.HybridData;
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.UiThreadUtil;
 import com.facebook.react.common.annotations.FrameworkAPI;
 import com.facebook.react.fabric.FabricUIManager;
 import com.facebook.react.turbomodule.core.CallInvokerHolderImpl;
@@ -32,6 +33,8 @@ public class NativeProxy extends NativeProxyCommon {
    */
   private final AtomicBoolean mInvalidated = new AtomicBoolean(false);
 
+  private final FabricUIManager mFabricUIManager;
+
   public @OptIn(markerClass = FrameworkAPI.class) NativeProxy(
       ReactApplicationContext context, WorkletsModule workletsModule) {
     super(context);
@@ -39,6 +42,7 @@ public class NativeProxy extends NativeProxyCommon {
 
     FabricUIManager fabricUIManager =
         (FabricUIManager) UIManagerHelper.getUIManager(context, UIManagerType.FABRIC);
+    mFabricUIManager = fabricUIManager;
 
     LayoutAnimations LayoutAnimations = new LayoutAnimations(context);
 
@@ -72,6 +76,21 @@ public class NativeProxy extends NativeProxyCommon {
 
   public native void performOperations();
 
+  @DoNotStrip
+  public boolean preserveMountedTags(int[] tags) {
+    if (!UiThreadUtil.isOnUiThread()) {
+      return false;
+    }
+
+    for (int i = 0; i < tags.length; i++) {
+      if (mFabricUIManager.resolveView(tags[i]) == null) {
+        tags[i] = -1;
+      }
+    }
+
+    return true;
+  }
+
   @Override
   protected HybridData getHybridData() {
     return mHybridData;

package/android/src/main/cpp/reanimated/android/NativeProxy.cpp

@@ -220,7 +220,26 @@ void NativeProxy::maybeFlushUIUpdatesQueue() {
 }
 
 #ifdef RCT_NEW_ARCH_ENABLED
-// nothing
+std::optional<std::unique_ptr<int[]>> NativeProxy::preserveMountedTags(
+    std::vector<int> &tags) {
+  if (tags.empty()) {
+    return {};
+  }
+
+  static const auto method =
+      getJniMethod<jboolean(jni::alias_ref<jni::JArrayInt>)>(
+          "preserveMountedTags");
+  auto jArrayInt = jni::JArrayInt::newArray(tags.size());
+  jArrayInt->setRegion(0, tags.size(), tags.data());
+
+  if (!method(javaPart_.get(), jArrayInt)) {
+    return {};
+  }
+
+  auto region = jArrayInt->getRegion(0, tags.size());
+  return region;
+}
+
 #else
 jsi::Value NativeProxy::obtainProp(
     jsi::Runtime &rt,
@@ -434,7 +453,8 @@ PlatformDepMethodsHolder NativeProxy::getPlatformDependentMethods() {
   auto requestRender = bindThis(&NativeProxy::requestRender);
 
 #ifdef RCT_NEW_ARCH_ENABLED
-  // nothing
+  auto preserveMountedTags = bindThis(&NativeProxy::preserveMountedTags);
+
 #else
   auto configurePropsFunction = bindThis(&NativeProxy::configureProps);
 #endif
@@ -468,7 +488,7 @@ PlatformDepMethodsHolder NativeProxy::getPlatformDependentMethods() {
   return {
       requestRender,
 #ifdef RCT_NEW_ARCH_ENABLED
-  // nothing
+      preserveMountedTags,
 #else
       updatePropsFunction,
       scrollToFunction,

package/android/src/main/cpp/reanimated/android/NativeProxy.h

@@ -183,6 +183,10 @@ class NativeProxy : public jni::HybridClass<NativeProxy> {
   // std::shared_ptr<EventListener> eventListener_;
 #endif // RCT_NEW_ARCH_ENABLED
   void installJSIBindings();
+#ifdef RCT_NEW_ARCH_ENABLED
+  std::optional<std::unique_ptr<int[]>> preserveMountedTags(
+      std::vector<int> &tags);
+#endif // RCT_NEW_ARCH_ENABLED
   PlatformDepMethodsHolder getPlatformDependentMethods();
   void setupLayoutAnimations();
 

package/lib/module/ViewDescriptorsSet.js

@@ -3,9 +3,11 @@
 import { makeMutable } from "./core.js";
 export function makeViewDescriptorsSet() {
   const shareableViewDescriptors = makeMutable([]);
+  const viewTags = new Set();
   const data = {
     shareableViewDescriptors,
     add: item => {
+      viewTags.add(item.tag);
       shareableViewDescriptors.modify(descriptors => {
         'worklet';
 
@@ -19,6 +21,7 @@ export function makeViewDescriptorsSet() {
       }, false);
     },
     remove: viewTag => {
+      viewTags.delete(viewTag);
       shareableViewDescriptors.modify(descriptors => {
         'worklet';
 
@@ -28,7 +31,8 @@ export function makeViewDescriptorsSet() {
         }
         return descriptors;
       }, false);
-    }
+    },
+    has: viewTag => viewTags.has(viewTag)
   };
   return data;
 }

package/lib/module/ViewDescriptorsSet.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeMutable","makeViewDescriptorsSet","shareableViewDescriptors","data","add","item","modify","descriptors","index","findIndex","descriptor","tag","push","remove","viewTag","splice"],"sourceRoot":"../../src","sources":["ViewDescriptorsSet.ts"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,WAAW,QAAQ,WAAQ;AASpC,OAAO,SAASC,sBAAsBA,CAAA,EAAuB;EAC3D,MAAMC,wBAAwB,GAAGF,WAAW,CAAe,EAAE,CAAC;EAC9D,MAAMG,IAAwB,GAAG;IAC/BD,wBAAwB;IACxBE,GAAG,EAAGC,IAAgB,IAAK;MACzBH,wBAAwB,CAACI,MAAM,CAAEC,WAAW,IAAK;QAC/C,SAAS;;QACT,MAAMC,KAAK,GAAGD,WAAW,CAACE,SAAS,CAChCC,UAAU,IAAKA,UAAU,CAACC,GAAG,KAAKN,IAAI,CAACM,GAC1C,CAAC;QACD,IAAIH,KAAK,KAAK,CAAC,CAAC,EAAE;UAChBD,WAAW,CAACC,KAAK,CAAC,GAAGH,IAAI;QAC3B,CAAC,MAAM;UACLE,WAAW,CAACK,IAAI,CAACP,IAAI,CAAC;QACxB;QACA,OAAOE,WAAW;MACpB,CAAC,EAAE,KAAK,CAAC;IACX,CAAC;IAEDM,MAAM,EAAGC,OAAe,IAAK;MAC3BZ,wBAAwB,CAACI,MAAM,CAAEC,WAAW,IAAK;QAC/C,SAAS;;QACT,MAAMC,KAAK,GAAGD,WAAW,CAACE,SAAS,CAChCC,UAAU,IAAKA,UAAU,CAACC,GAAG,KAAKG,OACrC,CAAC;QACD,IAAIN,KAAK,KAAK,CAAC,CAAC,EAAE;UAChBD,WAAW,CAACQ,MAAM,CAACP,KAAK,EAAE,CAAC,CAAC;QAC9B;QACA,OAAOD,WAAW;MACpB,CAAC,EAAE,KAAK,CAAC;IACX;EACF,CAAC;EACD,OAAOJ,IAAI;AACb","ignoreList":[]}
+{"version":3,"names":["makeMutable","makeViewDescriptorsSet","shareableViewDescriptors","viewTags","Set","data","add","item","tag","modify","descriptors","index","findIndex","descriptor","push","remove","viewTag","delete","splice","has"],"sourceRoot":"../../src","sources":["ViewDescriptorsSet.ts"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,WAAW,QAAQ,WAAQ;AAUpC,OAAO,SAASC,sBAAsBA,CAAA,EAAuB;EAC3D,MAAMC,wBAAwB,GAAGF,WAAW,CAAe,EAAE,CAAC;EAC9D,MAAMG,QAAQ,GAAG,IAAIC,GAAG,CAAS,CAAC;EAElC,MAAMC,IAAwB,GAAG;IAC/BH,wBAAwB;IAExBI,GAAG,EAAGC,IAAgB,IAAK;MACzBJ,QAAQ,CAACG,GAAG,CAACC,IAAI,CAACC,GAAa,CAAC;MAChCN,wBAAwB,CAACO,MAAM,CAAEC,WAAW,IAAK;QAC/C,SAAS;;QACT,MAAMC,KAAK,GAAGD,WAAW,CAACE,SAAS,CAChCC,UAAU,IAAKA,UAAU,CAACL,GAAG,KAAKD,IAAI,CAACC,GAC1C,CAAC;QACD,IAAIG,KAAK,KAAK,CAAC,CAAC,EAAE;UAChBD,WAAW,CAACC,KAAK,CAAC,GAAGJ,IAAI;QAC3B,CAAC,MAAM;UACLG,WAAW,CAACI,IAAI,CAACP,IAAI,CAAC;QACxB;QACA,OAAOG,WAAW;MACpB,CAAC,EAAE,KAAK,CAAC;IACX,CAAC;IAEDK,MAAM,EAAGC,OAAe,IAAK;MAC3Bb,QAAQ,CAACc,MAAM,CAACD,OAAO,CAAC;MACxBd,wBAAwB,CAACO,MAAM,CAAEC,WAAW,IAAK;QAC/C,SAAS;;QACT,MAAMC,KAAK,GAAGD,WAAW,CAACE,SAAS,CAChCC,UAAU,IAAKA,UAAU,CAACL,GAAG,KAAKQ,OACrC,CAAC;QACD,IAAIL,KAAK,KAAK,CAAC,CAAC,EAAE;UAChBD,WAAW,CAACQ,MAAM,CAACP,KAAK,EAAE,CAAC,CAAC;QAC9B;QACA,OAAOD,WAAW;MACpB,CAAC,EAAE,KAAK,CAAC;IACX,CAAC;IAEDS,GAAG,EAAGH,OAAe,IAAKb,QAAQ,CAACgB,GAAG,CAACH,OAAO;EAChD,CAAC;EAED,OAAOX,IAAI;AACb","ignoreList":[]}

package/lib/module/createAnimatedComponent/NativeEventsManager.js

@@ -80,7 +80,7 @@ export class NativeEventsManager {
       // On the first render of a component, we may already receive a resolved view tag.
       return this.#managedComponent.getComponentViewTag();
     }
-    if (componentAnimatedRef.__nativeTag || componentAnimatedRef._nativeTag) {
+    if (componentAnimatedRef?.__nativeTag || componentAnimatedRef?._nativeTag) {
       /*
         Fast path for native refs,
         _nativeTag is used by Paper components,

package/lib/module/createAnimatedComponent/NativeEventsManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["findNodeHandle","WorkletEventHandler","has","NativeEventsManager","managedComponent","componentOptions","eventViewTag","constructor","component","options","getEventViewTag","attachEvents","executeForEachEventHandler","props","key","handler","registerForEvents","detachEvents","_key","unregisterFromEvents","updateEvents","prevProps","computedEventTag","prevHandler","newProp","isWorkletEventHandler","workletEventHandler","componentUpdate","componentAnimatedRef","_componentRef","getScrollableNode","scrollableNode","setNativeProps","getComponentViewTag","__nativeTag","_nativeTag","prop","callback"],"sourceRoot":"../../../src","sources":["createAnimatedComponent/NativeEventsManager.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["findNodeHandle","WorkletEventHandler","has","NativeEventsManager","managedComponent","componentOptions","eventViewTag","constructor","component","options","getEventViewTag","attachEvents","executeForEachEventHandler","props","key","handler","registerForEvents","detachEvents","_key","unregisterFromEvents","updateEvents","prevProps","computedEventTag","prevHandler","newProp","isWorkletEventHandler","workletEventHandler","componentUpdate","componentAnimatedRef","_componentRef","getScrollableNode","scrollableNode","setNativeProps","getComponentViewTag","__nativeTag","_nativeTag","prop","callback"],"sourceRoot":"../../../src","sources":["createAnimatedComponent/NativeEventsManager.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/createAnimatedComponent/createAnimatedComponent.js

@@ -108,10 +108,15 @@ export function createAnimatedComponent(Component, options) {
         if (this.props.exiting && this._componentDOMRef) {
           saveSnapshot(this._componentDOMRef);
         }
-        if (!this.props.entering || getReducedMotionFromConfig(this.props.entering)) {
+        if (!this.props.entering) {
           this._isFirstRender = false;
           return;
         }
+        if (getReducedMotionFromConfig(this.props.entering)) {
+          this._isFirstRender = false;
+          this.props.entering.callbackV?.(true);
+          return;
+        }
         const skipEntering = this.context?.current;
         if (!skipEntering) {
           startWebLayoutAnimation(this.props, this._componentDOMRef, LayoutAnimationType.ENTERING);
@@ -135,7 +140,11 @@ export function createAnimatedComponent(Component, options) {
       }
       this._sharedElementTransition?.unregisterTransition(this.getComponentViewTag(), true);
       const exiting = this.props.exiting;
-      if (IS_WEB && this._componentDOMRef && exiting && !getReducedMotionFromConfig(exiting)) {
+      if (IS_WEB && this._componentDOMRef && exiting) {
+        if (getReducedMotionFromConfig(exiting)) {
+          exiting.callbackV?.(true);
+          return;
+        }
         addHTMLMutationObserver();
         startWebLayoutAnimation(this.props, this._componentDOMRef, LayoutAnimationType.EXITING);
       } else if (exiting && !IS_WEB && !isFabric()) {
@@ -238,18 +247,22 @@ export function createAnimatedComponent(Component, options) {
       if (hasReanimated2Props && viewConfig) {
         adaptViewConfig(viewConfig);
       }
+      const newStyles = new Set(styles);
+      const isStyleAttached = style => style.viewDescriptors.has(viewTag);
 
       // remove old styles
       if (prevStyles) {
         // in most of the cases, views have only a single animated style and it remains unchanged
         const hasOneSameStyle = styles.length === 1 && prevStyles.length === 1 && styles[0] === prevStyles[0];
-        if (!hasOneSameStyle) {
-          // otherwise, remove each style that is not present in new styles
-          for (const prevStyle of prevStyles) {
-            const isPresent = styles.some(style => style === prevStyle);
-            if (!isPresent) {
-              prevStyle.viewDescriptors.remove(viewTag);
-            }
+        if (hasOneSameStyle && isStyleAttached(prevStyles[0])) {
+          return;
+        }
+
+        // otherwise, remove each style that is not present in new styles
+        for (const prevStyle of prevStyles) {
+          const isPresent = styles.some(style => style === prevStyle);
+          if (!isPresent && isStyleAttached(prevStyle)) {
+            prevStyle.viewDescriptors.remove(viewTag);
           }
         }
       }
@@ -262,7 +275,7 @@ export function createAnimatedComponent(Component, options) {
           animatedProps.jestAnimatedValues.current = this.jestAnimatedProps;
         }
       }
-      styles.forEach(style => {
+      newStyles.forEach(style => {
         style.viewDescriptors.add({
           tag: viewTag,
           name: viewName,
@@ -310,7 +323,11 @@ export function createAnimatedComponent(Component, options) {
       if (IS_WEB && this.props.exiting && this._componentDOMRef) {
         saveSnapshot(this._componentDOMRef);
       }
-      if (IS_WEB && snapshot && this.props.layout && !getReducedMotionFromConfig(this.props.layout)) {
+      if (IS_WEB && snapshot && this.props.layout) {
+        if (getReducedMotionFromConfig(this.props.layout)) {
+          this.props.layout.callbackV?.(true);
+          return;
+        }
         tryActivateLayoutTransition(this.props, this._componentDOMRef, snapshot);
       }
     }