react-native-reanimated 4.2.1 → 4.2.3

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

@@ -38,6 +38,83 @@ static inline std::shared_ptr<const ShadowNode> shadowNodeFromValue(
 }
 #endif
 
+namespace {
+
+#ifdef ANDROID
+constexpr bool shouldUseSynchronousUpdatesInPerformOperations() {
+  return StaticFeatureFlags::getFlag("ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS") &&
+      !StaticFeatureFlags::getFlag("ENABLE_SHARED_ELEMENT_TRANSITIONS");
+}
+#elif __APPLE__
+constexpr bool shouldUseSynchronousUpdatesInPerformOperations() {
+  return StaticFeatureFlags::getFlag("IOS_SYNCHRONOUSLY_UPDATE_UI_PROPS") &&
+      !StaticFeatureFlags::getFlag("ENABLE_SHARED_ELEMENT_TRANSITIONS");
+}
+#else
+constexpr bool shouldUseSynchronousUpdatesInPerformOperations() {
+  return false;
+}
+#endif
+
+std::pair<UpdatesBatch, UpdatesBatch> partitionUpdates(
+    const UpdatesBatch &updatesBatch,
+    const std::unordered_set<std::string> &synchronousPropNames,
+    const bool shouldRequireIntegerColors = false,
+    const bool allowPartialViews = false) {
+  UpdatesBatch synchronousUpdatesBatch;
+  UpdatesBatch shadowTreeUpdatesBatch;
+
+  for (const auto &[shadowNode, props] : updatesBatch) {
+    if (allowPartialViews) {
+      folly::dynamic synchronousProps = folly::dynamic::object();
+      folly::dynamic shadowTreeProps = folly::dynamic::object();
+
+      for (const auto &[key, value] : props.items()) {
+        const auto keyStr = key.asString();
+        const bool isColorProp = keyStr == "color" || keyStr.find("Color") != std::string::npos;
+        const bool isSynchronous =
+            synchronousPropNames.contains(keyStr) && (!shouldRequireIntegerColors || !isColorProp || value.isInt());
+        if (isSynchronous) {
+          synchronousProps[keyStr] = value;
+        } else {
+          shadowTreeProps[keyStr] = value;
+        }
+      }
+
+      if (!synchronousProps.empty()) {
+        synchronousUpdatesBatch.emplace_back(shadowNode, std::move(synchronousProps));
+      }
+
+      if (!shadowTreeProps.empty()) {
+        shadowTreeUpdatesBatch.emplace_back(shadowNode, std::move(shadowTreeProps));
+      }
+    } else {
+      bool hasOnlySynchronousProps = true;
+
+      for (const auto &[key, value] : props.items()) {
+        const auto keyStr = key.asString();
+        const bool isColorProp = keyStr == "color" || keyStr.find("Color") != std::string::npos;
+        const bool isSynchronous =
+            synchronousPropNames.contains(keyStr) && (!shouldRequireIntegerColors || !isColorProp || value.isInt());
+        if (!isSynchronous) {
+          hasOnlySynchronousProps = false;
+          break;
+        }
+      }
+
+      if (hasOnlySynchronousProps) {
+        synchronousUpdatesBatch.emplace_back(shadowNode, props);
+      } else {
+        shadowTreeUpdatesBatch.emplace_back(shadowNode, props);
+      }
+    }
+  }
+
+  return {std::move(synchronousUpdatesBatch), std::move(shadowTreeUpdatesBatch)};
+}
+
+} // namespace
+
 ReanimatedModuleProxy::ReanimatedModuleProxy(
     const std::shared_ptr<WorkletsModuleProxy> &workletsModuleProxy,
     jsi::Runtime &rnRuntime,
@@ -556,7 +633,7 @@ bool ReanimatedModuleProxy::handleRawEvent(const RawEvent &rawEvent, double curr
   // (res == true), but for now handleEvent always returns false. Thankfully,
   // performOperations does not trigger a lot of code if there is nothing to
   // be done so this is fine for now.
-  performOperations(true);
+  performOperations();
   return res;
 }
 
@@ -605,15 +682,13 @@ double ReanimatedModuleProxy::getCssTimestamp() {
   return currentCssTimestamp_;
 }
 
-void ReanimatedModuleProxy::performOperations(const bool isTriggeredByEvent) {
+void ReanimatedModuleProxy::performOperations() {
   ReanimatedSystraceSection s("ReanimatedModuleProxy::performOperations");
 
-  if (!isTriggeredByEvent) {
-    auto flushRequestsCopy = std::move(layoutAnimationFlushRequests_);
-    for (const auto surfaceId : flushRequestsCopy) {
-      uiManager_->getShadowTreeRegistry().visit(
-          surfaceId, [](const ShadowTree &shadowTree) { shadowTree.notifyDelegatesOfUpdates(); });
-    }
+  auto flushRequestsCopy = std::move(layoutAnimationFlushRequests_);
+  for (const auto surfaceId : flushRequestsCopy) {
+    uiManager_->getShadowTreeRegistry().visit(
+        surfaceId, [](const ShadowTree &shadowTree) { shadowTree.notifyDelegatesOfUpdates(); });
   }
 
   jsi::Runtime &rt = workletsModuleProxy_->getUIWorkletRuntime()->getJSIRuntime();
@@ -647,479 +722,451 @@ void ReanimatedModuleProxy::performOperations(const bool isTriggeredByEvent) {
 
     shouldUpdateCssAnimations_ = false;
 
-#ifdef ANDROID
-    if constexpr (
-        StaticFeatureFlags::getFlag("ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS") &&
-        !StaticFeatureFlags::getFlag("ENABLE_SHARED_ELEMENT_TRANSITIONS")) {
-      static const std::unordered_set<std::string> synchronousProps = {
-          "opacity",
-          "elevation",
-          "zIndex",
-          // "shadowOpacity", // not supported on Android
-          // "shadowRadius", // not supported on Android
-          "backgroundColor",
-          // "color", // TODO: fix animating color of Animated.Text
-          "tintColor",
-          "borderRadius",
-          "borderTopLeftRadius",
-          "borderTopRightRadius",
-          "borderTopStartRadius",
-          "borderTopEndRadius",
-          "borderBottomLeftRadius",
-          "borderBottomRightRadius",
-          "borderBottomStartRadius",
-          "borderBottomEndRadius",
-          "borderStartStartRadius",
-          "borderStartEndRadius",
-          "borderEndStartRadius",
-          "borderEndEndRadius",
-          "borderColor",
-          "borderTopColor",
-          "borderBottomColor",
-          "borderLeftColor",
-          "borderRightColor",
-          "borderStartColor",
-          "borderEndColor",
-          "transform",
-      };
+    if constexpr (shouldUseSynchronousUpdatesInPerformOperations()) {
+      applySynchronousUpdates(updatesBatch);
+    }
 
-      // NOTE: Keep in sync with NativeProxy.java
-      static constexpr auto CMD_START_OF_VIEW = 1;
-      static constexpr auto CMD_START_OF_TRANSFORM = 2;
-      static constexpr auto CMD_END_OF_TRANSFORM = 3;
-      static constexpr auto CMD_END_OF_VIEW = 4;
-
-      static constexpr auto CMD_OPACITY = 10;
-      static constexpr auto CMD_ELEVATION = 11;
-      static constexpr auto CMD_Z_INDEX = 12;
-      static constexpr auto CMD_SHADOW_OPACITY = 13;
-      static constexpr auto CMD_SHADOW_RADIUS = 14;
-      static constexpr auto CMD_BACKGROUND_COLOR = 15;
-      static constexpr auto CMD_COLOR = 16;
-      static constexpr auto CMD_TINT_COLOR = 17;
-
-      static constexpr auto CMD_BORDER_RADIUS = 20;
-      static constexpr auto CMD_BORDER_TOP_LEFT_RADIUS = 21;
-      static constexpr auto CMD_BORDER_TOP_RIGHT_RADIUS = 22;
-      static constexpr auto CMD_BORDER_TOP_START_RADIUS = 23;
-      static constexpr auto CMD_BORDER_TOP_END_RADIUS = 24;
-      static constexpr auto CMD_BORDER_BOTTOM_LEFT_RADIUS = 25;
-      static constexpr auto CMD_BORDER_BOTTOM_RIGHT_RADIUS = 26;
-      static constexpr auto CMD_BORDER_BOTTOM_START_RADIUS = 27;
-      static constexpr auto CMD_BORDER_BOTTOM_END_RADIUS = 28;
-      static constexpr auto CMD_BORDER_START_START_RADIUS = 29;
-      static constexpr auto CMD_BORDER_START_END_RADIUS = 30;
-      static constexpr auto CMD_BORDER_END_START_RADIUS = 31;
-      static constexpr auto CMD_BORDER_END_END_RADIUS = 32;
-
-      static constexpr auto CMD_BORDER_COLOR = 40;
-      static constexpr auto CMD_BORDER_TOP_COLOR = 41;
-      static constexpr auto CMD_BORDER_BOTTOM_COLOR = 42;
-      static constexpr auto CMD_BORDER_LEFT_COLOR = 43;
-      static constexpr auto CMD_BORDER_RIGHT_COLOR = 44;
-      static constexpr auto CMD_BORDER_START_COLOR = 45;
-      static constexpr auto CMD_BORDER_END_COLOR = 46;
-
-      static constexpr auto CMD_TRANSFORM_TRANSLATE_X = 100;
-      static constexpr auto CMD_TRANSFORM_TRANSLATE_Y = 101;
-      static constexpr auto CMD_TRANSFORM_SCALE = 102;
-      static constexpr auto CMD_TRANSFORM_SCALE_X = 103;
-      static constexpr auto CMD_TRANSFORM_SCALE_Y = 104;
-      static constexpr auto CMD_TRANSFORM_ROTATE = 105;
-      static constexpr auto CMD_TRANSFORM_ROTATE_X = 106;
-      static constexpr auto CMD_TRANSFORM_ROTATE_Y = 107;
-      static constexpr auto CMD_TRANSFORM_ROTATE_Z = 108;
-      static constexpr auto CMD_TRANSFORM_SKEW_X = 109;
-      static constexpr auto CMD_TRANSFORM_SKEW_Y = 110;
-      static constexpr auto CMD_TRANSFORM_MATRIX = 111;
-      static constexpr auto CMD_TRANSFORM_PERSPECTIVE = 112;
+    if ((updatesBatch.size() > 0) && updatesRegistryManager_->shouldReanimatedSkipCommit()) {
+      updatesRegistryManager_->pleaseCommitAfterPause();
+    }
+  }
 
-      static constexpr auto CMD_UNIT_DEG = 200;
-      static constexpr auto CMD_UNIT_RAD = 201;
-      static constexpr auto CMD_UNIT_PX = 202;
-      static constexpr auto CMD_UNIT_PERCENT = 203;
+  if (updatesRegistryManager_->shouldReanimatedSkipCommit()) {
+    // It may happen that `performOperations` is called on the UI thread
+    // while React Native tries to commit a new tree on the JS thread.
+    // In this case, we should skip the commit here and let React Native do
+    // it. The commit will include the current values from the updates manager
+    // which will be applied in ReanimatedCommitHook.
+    return;
+  }
 
-      const auto propNameToCommand = [](const std::string &name) {
-        if (name == "opacity")
-          return CMD_OPACITY;
+  commitUpdates(rt, updatesBatch);
 
-        if (name == "elevation")
-          return CMD_ELEVATION;
+  // Clear the entire cache after the commit
+  // (we don't know if the view is updated from outside of Reanimated
+  // so we have to clear the entire cache)
+  viewStylesRepository_->clearNodesCache();
+}
 
-        if (name == "zIndex")
-          return CMD_Z_INDEX;
+void ReanimatedModuleProxy::performNonLayoutOperations() {
+  ReanimatedSystraceSection s("ReanimatedModuleProxy::performNonLayoutOperations");
 
-        if (name == "shadowOpacity")
-          return CMD_SHADOW_OPACITY;
+  UpdatesBatch updatesBatch = animatedPropsRegistry_->getPendingUpdates();
 
-        if (name == "shadowRadius")
-          return CMD_SHADOW_RADIUS;
+  applySynchronousUpdates(updatesBatch, true);
+}
 
-        if (name == "backgroundColor")
-          return CMD_BACKGROUND_COLOR;
+void ReanimatedModuleProxy::applySynchronousUpdates(UpdatesBatch &updatesBatch, const bool allowPartialUpdates) {
+#ifdef ANDROID
+  static const std::unordered_set<std::string> synchronousProps = {
+      "opacity",
+      "elevation",
+      "zIndex",
+      // "shadowOpacity", // not supported on Android
+      // "shadowRadius", // not supported on Android
+      "backgroundColor",
+      // "color", // TODO: fix animating color of Animated.Text,
+      "tintColor",
+      "borderRadius",
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderTopStartRadius",
+      "borderTopEndRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius",
+      "borderBottomStartRadius",
+      "borderBottomEndRadius",
+      "borderStartStartRadius",
+      "borderStartEndRadius",
+      "borderEndStartRadius",
+      "borderEndEndRadius",
+      "borderColor",
+      "borderTopColor",
+      "borderBottomColor",
+      "borderLeftColor",
+      "borderRightColor",
+      "borderStartColor",
+      "borderEndColor",
+      "transform",
+  };
 
-        if (name == "color")
-          return CMD_COLOR;
+  // NOTE: Keep in sync with NativeProxy.java
+  static constexpr auto CMD_START_OF_VIEW = 1;
+  static constexpr auto CMD_START_OF_TRANSFORM = 2;
+  static constexpr auto CMD_END_OF_TRANSFORM = 3;
+  static constexpr auto CMD_END_OF_VIEW = 4;
+
+  static constexpr auto CMD_OPACITY = 10;
+  static constexpr auto CMD_ELEVATION = 11;
+  static constexpr auto CMD_Z_INDEX = 12;
+  static constexpr auto CMD_SHADOW_OPACITY = 13;
+  static constexpr auto CMD_SHADOW_RADIUS = 14;
+  static constexpr auto CMD_BACKGROUND_COLOR = 15;
+  static constexpr auto CMD_COLOR = 16;
+  static constexpr auto CMD_TINT_COLOR = 17;
+
+  static constexpr auto CMD_BORDER_RADIUS = 20;
+  static constexpr auto CMD_BORDER_TOP_LEFT_RADIUS = 21;
+  static constexpr auto CMD_BORDER_TOP_RIGHT_RADIUS = 22;
+  static constexpr auto CMD_BORDER_TOP_START_RADIUS = 23;
+  static constexpr auto CMD_BORDER_TOP_END_RADIUS = 24;
+  static constexpr auto CMD_BORDER_BOTTOM_LEFT_RADIUS = 25;
+  static constexpr auto CMD_BORDER_BOTTOM_RIGHT_RADIUS = 26;
+  static constexpr auto CMD_BORDER_BOTTOM_START_RADIUS = 27;
+  static constexpr auto CMD_BORDER_BOTTOM_END_RADIUS = 28;
+  static constexpr auto CMD_BORDER_START_START_RADIUS = 29;
+  static constexpr auto CMD_BORDER_START_END_RADIUS = 30;
+  static constexpr auto CMD_BORDER_END_START_RADIUS = 31;
+  static constexpr auto CMD_BORDER_END_END_RADIUS = 32;
+
+  static constexpr auto CMD_BORDER_COLOR = 40;
+  static constexpr auto CMD_BORDER_TOP_COLOR = 41;
+  static constexpr auto CMD_BORDER_BOTTOM_COLOR = 42;
+  static constexpr auto CMD_BORDER_LEFT_COLOR = 43;
+  static constexpr auto CMD_BORDER_RIGHT_COLOR = 44;
+  static constexpr auto CMD_BORDER_START_COLOR = 45;
+  static constexpr auto CMD_BORDER_END_COLOR = 46;
+
+  static constexpr auto CMD_TRANSFORM_TRANSLATE_X = 100;
+  static constexpr auto CMD_TRANSFORM_TRANSLATE_Y = 101;
+  static constexpr auto CMD_TRANSFORM_SCALE = 102;
+  static constexpr auto CMD_TRANSFORM_SCALE_X = 103;
+  static constexpr auto CMD_TRANSFORM_SCALE_Y = 104;
+  static constexpr auto CMD_TRANSFORM_ROTATE = 105;
+  static constexpr auto CMD_TRANSFORM_ROTATE_X = 106;
+  static constexpr auto CMD_TRANSFORM_ROTATE_Y = 107;
+  static constexpr auto CMD_TRANSFORM_ROTATE_Z = 108;
+  static constexpr auto CMD_TRANSFORM_SKEW_X = 109;
+  static constexpr auto CMD_TRANSFORM_SKEW_Y = 110;
+  static constexpr auto CMD_TRANSFORM_MATRIX = 111;
+  static constexpr auto CMD_TRANSFORM_PERSPECTIVE = 112;
 
-        if (name == "tintColor")
-          return CMD_TINT_COLOR;
+  static constexpr auto CMD_UNIT_DEG = 200;
+  static constexpr auto CMD_UNIT_RAD = 201;
+  static constexpr auto CMD_UNIT_PX = 202;
+  static constexpr auto CMD_UNIT_PERCENT = 203;
 
-        if (name == "borderRadius")
-          return CMD_BORDER_RADIUS;
+  const auto propNameToCommand = [](const std::string &name) {
+    if (name == "opacity")
+      return CMD_OPACITY;
 
-        if (name == "borderTopLeftRadius")
-          return CMD_BORDER_TOP_LEFT_RADIUS;
+    if (name == "elevation")
+      return CMD_ELEVATION;
 
-        if (name == "borderTopRightRadius")
-          return CMD_BORDER_TOP_RIGHT_RADIUS;
+    if (name == "zIndex")
+      return CMD_Z_INDEX;
 
-        if (name == "borderTopStartRadius")
-          return CMD_BORDER_TOP_START_RADIUS;
+    if (name == "shadowOpacity")
+      return CMD_SHADOW_OPACITY;
 
-        if (name == "borderTopEndRadius")
-          return CMD_BORDER_TOP_END_RADIUS;
+    if (name == "shadowRadius")
+      return CMD_SHADOW_RADIUS;
 
-        if (name == "borderBottomLeftRadius")
-          return CMD_BORDER_BOTTOM_LEFT_RADIUS;
+    if (name == "backgroundColor")
+      return CMD_BACKGROUND_COLOR;
 
-        if (name == "borderBottomRightRadius")
-          return CMD_BORDER_BOTTOM_RIGHT_RADIUS;
-
-        if (name == "borderBottomStartRadius")
-          return CMD_BORDER_BOTTOM_START_RADIUS;
+    if (name == "color")
+      return CMD_COLOR;
 
-        if (name == "borderBottomEndRadius")
-          return CMD_BORDER_BOTTOM_END_RADIUS;
+    if (name == "tintColor")
+      return CMD_TINT_COLOR;
 
-        if (name == "borderStartStartRadius")
-          return CMD_BORDER_START_START_RADIUS;
+    if (name == "borderRadius")
+      return CMD_BORDER_RADIUS;
 
-        if (name == "borderStartEndRadius")
-          return CMD_BORDER_START_END_RADIUS;
+    if (name == "borderTopLeftRadius")
+      return CMD_BORDER_TOP_LEFT_RADIUS;
 
-        if (name == "borderEndStartRadius")
-          return CMD_BORDER_END_START_RADIUS;
+    if (name == "borderTopRightRadius")
+      return CMD_BORDER_TOP_RIGHT_RADIUS;
 
-        if (name == "borderEndEndRadius")
-          return CMD_BORDER_END_END_RADIUS;
+    if (name == "borderTopStartRadius")
+      return CMD_BORDER_TOP_START_RADIUS;
 
-        if (name == "borderColor")
-          return CMD_BORDER_COLOR;
+    if (name == "borderTopEndRadius")
+      return CMD_BORDER_TOP_END_RADIUS;
 
-        if (name == "borderTopColor")
-          return CMD_BORDER_TOP_COLOR;
+    if (name == "borderBottomLeftRadius")
+      return CMD_BORDER_BOTTOM_LEFT_RADIUS;
 
-        if (name == "borderBottomColor")
-          return CMD_BORDER_BOTTOM_COLOR;
+    if (name == "borderBottomRightRadius")
+      return CMD_BORDER_BOTTOM_RIGHT_RADIUS;
+
+    if (name == "borderBottomStartRadius")
+      return CMD_BORDER_BOTTOM_START_RADIUS;
 
-        if (name == "borderLeftColor")
-          return CMD_BORDER_LEFT_COLOR;
+    if (name == "borderBottomEndRadius")
+      return CMD_BORDER_BOTTOM_END_RADIUS;
 
-        if (name == "borderRightColor")
-          return CMD_BORDER_RIGHT_COLOR;
+    if (name == "borderStartStartRadius")
+      return CMD_BORDER_START_START_RADIUS;
 
-        if (name == "borderStartColor")
-          return CMD_BORDER_START_COLOR;
+    if (name == "borderStartEndRadius")
+      return CMD_BORDER_START_END_RADIUS;
 
-        if (name == "borderEndColor")
-          return CMD_BORDER_END_COLOR;
+    if (name == "borderEndStartRadius")
+      return CMD_BORDER_END_START_RADIUS;
 
-        if (name == "transform")
-          return CMD_START_OF_TRANSFORM; // TODO: use CMD_TRANSFORM?
+    if (name == "borderEndEndRadius")
+      return CMD_BORDER_END_END_RADIUS;
 
-        throw std::runtime_error("[Reanimated] Unsupported style: " + name);
-      };
+    if (name == "borderColor")
+      return CMD_BORDER_COLOR;
 
-      const auto transformNameToCommand = [](const std::string &name) {
-        if (name == "translateX")
-          return CMD_TRANSFORM_TRANSLATE_X;
+    if (name == "borderTopColor")
+      return CMD_BORDER_TOP_COLOR;
 
-        if (name == "translateY")
-          return CMD_TRANSFORM_TRANSLATE_Y;
+    if (name == "borderBottomColor")
+      return CMD_BORDER_BOTTOM_COLOR;
 
-        if (name == "scale")
-          return CMD_TRANSFORM_SCALE;
+    if (name == "borderLeftColor")
+      return CMD_BORDER_LEFT_COLOR;
 
-        if (name == "scaleX")
-          return CMD_TRANSFORM_SCALE_X;
+    if (name == "borderRightColor")
+      return CMD_BORDER_RIGHT_COLOR;
 
-        if (name == "scaleY")
-          return CMD_TRANSFORM_SCALE_Y;
+    if (name == "borderStartColor")
+      return CMD_BORDER_START_COLOR;
 
-        if (name == "rotate")
-          return CMD_TRANSFORM_ROTATE;
+    if (name == "borderEndColor")
+      return CMD_BORDER_END_COLOR;
 
-        if (name == "rotateX")
-          return CMD_TRANSFORM_ROTATE_X;
+    if (name == "transform")
+      return CMD_START_OF_TRANSFORM; // TODO: use CMD_TRANSFORM?
 
-        if (name == "rotateY")
-          return CMD_TRANSFORM_ROTATE_Y;
+    throw std::runtime_error("[Reanimated] Unsupported style: " + name);
+  };
 
-        if (name == "rotateZ")
-          return CMD_TRANSFORM_ROTATE_Z;
+  const auto transformNameToCommand = [](const std::string &name) {
+    if (name == "translateX")
+      return CMD_TRANSFORM_TRANSLATE_X;
 
-        if (name == "skewX")
-          return CMD_TRANSFORM_SKEW_X;
+    if (name == "translateY")
+      return CMD_TRANSFORM_TRANSLATE_Y;
 
-        if (name == "skewY")
-          return CMD_TRANSFORM_SKEW_Y;
+    if (name == "scale")
+      return CMD_TRANSFORM_SCALE;
 
-        if (name == "matrix")
-          return CMD_TRANSFORM_MATRIX;
+    if (name == "scaleX")
+      return CMD_TRANSFORM_SCALE_X;
 
-        if (name == "perspective")
-          return CMD_TRANSFORM_PERSPECTIVE;
+    if (name == "scaleY")
+      return CMD_TRANSFORM_SCALE_Y;
 
-        throw std::runtime_error("[Reanimated] Unsupported transform: " + name);
-      };
+    if (name == "rotate")
+      return CMD_TRANSFORM_ROTATE;
 
-      UpdatesBatch synchronousUpdatesBatch, shadowTreeUpdatesBatch;
+    if (name == "rotateX")
+      return CMD_TRANSFORM_ROTATE_X;
 
-      for (const auto &[shadowNode, props] : updatesBatch) {
-        bool hasOnlySynchronousProps = true;
-        for (const auto &[key, value] : props.items()) {
-          const auto keyStr = key.asString();
-          if (!synchronousProps.contains(keyStr) ||
-              ((keyStr == "color" || keyStr.find("Color") != std::string::npos) && !value.isInt())) {
-            hasOnlySynchronousProps = false;
-            break;
-          }
-        }
-        if (hasOnlySynchronousProps) {
-          synchronousUpdatesBatch.emplace_back(shadowNode, props);
-        } else {
-          shadowTreeUpdatesBatch.emplace_back(shadowNode, props);
-        }
-      }
+    if (name == "rotateY")
+      return CMD_TRANSFORM_ROTATE_Y;
 
-      if (!synchronousUpdatesBatch.empty()) {
-        std::vector<int> intBuffer;
-        std::vector<double> doubleBuffer;
-        intBuffer.reserve(1024);
-        doubleBuffer.reserve(1024);
-
-        for (const auto &[shadowNode, props] : synchronousUpdatesBatch) {
-          intBuffer.push_back(CMD_START_OF_VIEW);
-          intBuffer.push_back(shadowNode->getTag());
-          for (const auto &[key, value] : props.items()) {
-            const auto command = propNameToCommand(key.getString());
-            switch (command) {
-              case CMD_OPACITY:
-              case CMD_ELEVATION:
-              case CMD_Z_INDEX:
-              case CMD_SHADOW_OPACITY:
-              case CMD_SHADOW_RADIUS:
-                intBuffer.push_back(command);
-                doubleBuffer.push_back(value.asDouble());
-                break;
-
-              case CMD_BACKGROUND_COLOR:
-              case CMD_COLOR:
-              case CMD_TINT_COLOR:
-              case CMD_BORDER_COLOR:
-              case CMD_BORDER_TOP_COLOR:
-              case CMD_BORDER_BOTTOM_COLOR:
-              case CMD_BORDER_LEFT_COLOR:
-              case CMD_BORDER_RIGHT_COLOR:
-              case CMD_BORDER_START_COLOR:
-              case CMD_BORDER_END_COLOR:
-                intBuffer.push_back(command);
-                intBuffer.push_back(value.asInt());
-                break;
-
-              case CMD_BORDER_RADIUS:
-              case CMD_BORDER_TOP_LEFT_RADIUS:
-              case CMD_BORDER_TOP_RIGHT_RADIUS:
-              case CMD_BORDER_TOP_START_RADIUS:
-              case CMD_BORDER_TOP_END_RADIUS:
-              case CMD_BORDER_BOTTOM_LEFT_RADIUS:
-              case CMD_BORDER_BOTTOM_RIGHT_RADIUS:
-              case CMD_BORDER_BOTTOM_START_RADIUS:
-              case CMD_BORDER_BOTTOM_END_RADIUS:
-              case CMD_BORDER_START_START_RADIUS:
-              case CMD_BORDER_START_END_RADIUS:
-              case CMD_BORDER_END_START_RADIUS:
-              case CMD_BORDER_END_END_RADIUS:
-                intBuffer.push_back(command);
-                if (value.isDouble()) {
-                  intBuffer.push_back(CMD_UNIT_PX);
-                  doubleBuffer.push_back(value.getDouble());
-                } else if (value.isString()) {
-                  const auto &valueStr = value.getString();
-                  if (!valueStr.ends_with("%")) {
-                    throw std::runtime_error("[Reanimated] Border radius string must be a percentage");
-                  }
-                  intBuffer.push_back(CMD_UNIT_PERCENT);
-                  doubleBuffer.push_back(std::stof(valueStr.substr(0, -1)));
-                } else {
-                  throw std::runtime_error("[Reanimated] Border radius value must be either a number or a string");
-                }
-                break;
-
-              case CMD_START_OF_TRANSFORM:
-                intBuffer.push_back(command);
-                react_native_assert(value.isArray() && "[Reanimated] Transform value must be an array");
-                for (const auto &item : value) {
-                  react_native_assert(item.isObject() && "[Reanimated] Transform array item must be an object");
-                  react_native_assert(
-                      item.size() == 1 && "[Reanimated] Transform array item must have exactly one key-value pair");
-                  const auto transformCommand = transformNameToCommand(item.keys().begin()->getString());
-                  const auto &transformValue = *item.values().begin();
-                  switch (transformCommand) {
-                    case CMD_TRANSFORM_SCALE:
-                    case CMD_TRANSFORM_SCALE_X:
-                    case CMD_TRANSFORM_SCALE_Y:
-                    case CMD_TRANSFORM_PERSPECTIVE: {
-                      intBuffer.push_back(transformCommand);
-                      doubleBuffer.push_back(transformValue.asDouble());
-                      break;
-                    }
+    if (name == "rotateZ")
+      return CMD_TRANSFORM_ROTATE_Z;
 
-                    case CMD_TRANSFORM_TRANSLATE_X:
-                    case CMD_TRANSFORM_TRANSLATE_Y: {
-                      intBuffer.push_back(transformCommand);
-                      if (transformValue.isDouble()) {
-                        intBuffer.push_back(CMD_UNIT_PX);
-                        doubleBuffer.push_back(transformValue.getDouble());
-                      } else if (transformValue.isString()) {
-                        const auto &transformValueStr = transformValue.getString();
-                        if (!transformValueStr.ends_with("%")) {
-                          throw std::runtime_error("[Reanimated] String translate must be a percentage");
-                        }
-                        intBuffer.push_back(CMD_UNIT_PERCENT);
-                        doubleBuffer.push_back(std::stof(transformValueStr.substr(0, -1)));
-                      } else {
-                        throw std::runtime_error("[Reanimated] Translate value must be either a number or a string");
-                      }
-                      break;
-                    }
+    if (name == "skewX")
+      return CMD_TRANSFORM_SKEW_X;
 
-                    case CMD_TRANSFORM_ROTATE:
-                    case CMD_TRANSFORM_ROTATE_X:
-                    case CMD_TRANSFORM_ROTATE_Y:
-                    case CMD_TRANSFORM_ROTATE_Z:
-                    case CMD_TRANSFORM_SKEW_X:
-                    case CMD_TRANSFORM_SKEW_Y: {
-                      const auto &transformValueStr = transformValue.getString();
-                      intBuffer.push_back(transformCommand);
-                      if (transformValueStr.ends_with("deg")) {
-                        intBuffer.push_back(CMD_UNIT_DEG);
-                      } else if (transformValueStr.ends_with("rad")) {
-                        intBuffer.push_back(CMD_UNIT_RAD);
-                      } else {
-                        throw std::runtime_error("[Reanimated] Unsupported rotation unit: " + transformValueStr);
-                      }
-                      doubleBuffer.push_back(std::stof(transformValueStr.substr(0, -3)));
-                      break;
-                    }
+    if (name == "skewY")
+      return CMD_TRANSFORM_SKEW_Y;
+
+    if (name == "matrix")
+      return CMD_TRANSFORM_MATRIX;
+
+    if (name == "perspective")
+      return CMD_TRANSFORM_PERSPECTIVE;
 
-                    case CMD_TRANSFORM_MATRIX: {
-                      intBuffer.push_back(transformCommand);
-                      react_native_assert(transformValue.isArray() && "[Reanimated] Matrix must be an array");
-                      int size = transformValue.size();
-                      intBuffer.push_back(size);
-                      for (int i = 0; i < size; i++) {
-                        doubleBuffer.push_back(transformValue[i].asDouble());
-                      }
-                      break;
+    throw std::runtime_error("[Reanimated] Unsupported transform: " + name);
+  };
+
+  auto [synchronousUpdatesBatch, shadowTreeUpdatesBatch] =
+      partitionUpdates(updatesBatch, synchronousProps, true, allowPartialUpdates);
+
+  if (!synchronousUpdatesBatch.empty()) {
+    std::vector<int> intBuffer;
+    std::vector<double> doubleBuffer;
+    intBuffer.reserve(1024);
+    doubleBuffer.reserve(1024);
+
+    for (const auto &[shadowNode, props] : synchronousUpdatesBatch) {
+      intBuffer.push_back(CMD_START_OF_VIEW);
+      intBuffer.push_back(shadowNode->getTag());
+      for (const auto &[key, value] : props.items()) {
+        const auto command = propNameToCommand(key.getString());
+        switch (command) {
+          case CMD_OPACITY:
+          case CMD_ELEVATION:
+          case CMD_Z_INDEX:
+          case CMD_SHADOW_OPACITY:
+          case CMD_SHADOW_RADIUS:
+            intBuffer.push_back(command);
+            doubleBuffer.push_back(value.asDouble());
+            break;
+
+          case CMD_BACKGROUND_COLOR:
+          case CMD_COLOR:
+          case CMD_TINT_COLOR:
+          case CMD_BORDER_COLOR:
+          case CMD_BORDER_TOP_COLOR:
+          case CMD_BORDER_BOTTOM_COLOR:
+          case CMD_BORDER_LEFT_COLOR:
+          case CMD_BORDER_RIGHT_COLOR:
+          case CMD_BORDER_START_COLOR:
+          case CMD_BORDER_END_COLOR:
+            intBuffer.push_back(command);
+            intBuffer.push_back(value.asInt());
+            break;
+
+          case CMD_BORDER_RADIUS:
+          case CMD_BORDER_TOP_LEFT_RADIUS:
+          case CMD_BORDER_TOP_RIGHT_RADIUS:
+          case CMD_BORDER_TOP_START_RADIUS:
+          case CMD_BORDER_TOP_END_RADIUS:
+          case CMD_BORDER_BOTTOM_LEFT_RADIUS:
+          case CMD_BORDER_BOTTOM_RIGHT_RADIUS:
+          case CMD_BORDER_BOTTOM_START_RADIUS:
+          case CMD_BORDER_BOTTOM_END_RADIUS:
+          case CMD_BORDER_START_START_RADIUS:
+          case CMD_BORDER_START_END_RADIUS:
+          case CMD_BORDER_END_START_RADIUS:
+          case CMD_BORDER_END_END_RADIUS:
+            intBuffer.push_back(command);
+            if (value.isDouble()) {
+              intBuffer.push_back(CMD_UNIT_PX);
+              doubleBuffer.push_back(value.getDouble());
+            } else if (value.isString()) {
+              const auto &valueStr = value.getString();
+              if (!valueStr.ends_with("%")) {
+                throw std::runtime_error("[Reanimated] Border radius string must be a percentage");
+              }
+              intBuffer.push_back(CMD_UNIT_PERCENT);
+              doubleBuffer.push_back(std::stof(valueStr.substr(0, -1)));
+            } else {
+              throw std::runtime_error("[Reanimated] Border radius value must be either a number or a string");
+            }
+            break;
+
+          case CMD_START_OF_TRANSFORM:
+            intBuffer.push_back(command);
+            react_native_assert(value.isArray() && "[Reanimated] Transform value must be an array");
+            for (const auto &item : value) {
+              react_native_assert(item.isObject() && "[Reanimated] Transform array item must be an object");
+              react_native_assert(
+                  item.size() == 1 && "[Reanimated] Transform array item must have exactly one key-value pair");
+              const auto transformCommand = transformNameToCommand(item.keys().begin()->getString());
+              const auto &transformValue = *item.values().begin();
+              switch (transformCommand) {
+                case CMD_TRANSFORM_SCALE:
+                case CMD_TRANSFORM_SCALE_X:
+                case CMD_TRANSFORM_SCALE_Y:
+                case CMD_TRANSFORM_PERSPECTIVE: {
+                  intBuffer.push_back(transformCommand);
+                  doubleBuffer.push_back(transformValue.asDouble());
+                  break;
+                }
+                case CMD_TRANSFORM_TRANSLATE_X:
+                case CMD_TRANSFORM_TRANSLATE_Y: {
+                  intBuffer.push_back(transformCommand);
+                  if (transformValue.isDouble()) {
+                    intBuffer.push_back(CMD_UNIT_PX);
+                    doubleBuffer.push_back(transformValue.getDouble());
+                  } else if (transformValue.isString()) {
+                    const auto &transformValueStr = transformValue.getString();
+                    if (!transformValueStr.ends_with("%")) {
+                      throw std::runtime_error("[Reanimated] String translate must be a percentage");
                     }
+                    intBuffer.push_back(CMD_UNIT_PERCENT);
+                    doubleBuffer.push_back(std::stof(transformValueStr.substr(0, -1)));
+                  } else {
+                    throw std::runtime_error("[Reanimated] Translate value must be either a number or a string");
+                  }
+                  break;
+                }
+                case CMD_TRANSFORM_ROTATE:
+                case CMD_TRANSFORM_ROTATE_X:
+                case CMD_TRANSFORM_ROTATE_Y:
+                case CMD_TRANSFORM_ROTATE_Z:
+                case CMD_TRANSFORM_SKEW_X:
+                case CMD_TRANSFORM_SKEW_Y: {
+                  const auto &transformValueStr = transformValue.getString();
+                  intBuffer.push_back(transformCommand);
+                  if (transformValueStr.ends_with("deg")) {
+                    intBuffer.push_back(CMD_UNIT_DEG);
+                  } else if (transformValueStr.ends_with("rad")) {
+                    intBuffer.push_back(CMD_UNIT_RAD);
+                  } else {
+                    throw std::runtime_error("[Reanimated] Unsupported rotation unit: " + transformValueStr);
+                  }
+                  doubleBuffer.push_back(std::stof(transformValueStr.substr(0, -3)));
+                  break;
+                }
+                case CMD_TRANSFORM_MATRIX: {
+                  intBuffer.push_back(transformCommand);
+                  react_native_assert(transformValue.isArray() && "[Reanimated] Matrix must be an array");
+                  int size = transformValue.size();
+                  intBuffer.push_back(size);
+                  for (int i = 0; i < size; i++) {
+                    doubleBuffer.push_back(transformValue[i].asDouble());
                   }
+                  break;
                 }
-                intBuffer.push_back(CMD_END_OF_TRANSFORM);
-                break;
+              }
             }
-          }
-          intBuffer.push_back(CMD_END_OF_VIEW);
+            intBuffer.push_back(CMD_END_OF_TRANSFORM);
+            break;
         }
-        synchronouslyUpdateUIPropsFunction_(intBuffer, doubleBuffer);
       }
-
-      updatesBatch = std::move(shadowTreeUpdatesBatch);
+      intBuffer.push_back(CMD_END_OF_VIEW);
     }
+    synchronouslyUpdateUIPropsFunction_(intBuffer, doubleBuffer);
+  }
+
+  updatesBatch = std::move(shadowTreeUpdatesBatch);
 #endif // ANDROID
 
 #if __APPLE__
-    if constexpr (
-        StaticFeatureFlags::getFlag("IOS_SYNCHRONOUSLY_UPDATE_UI_PROPS") &&
-        !StaticFeatureFlags::getFlag("ENABLE_SHARED_ELEMENT_TRANSITIONS")) {
-      static const std::unordered_set<std::string> synchronousProps = {
-          "opacity",
-          "elevation",
-          "zIndex",
-          "shadowOpacity",
-          "shadowRadius",
-          "backgroundColor",
-          // "color", // TODO: fix animating color of Animated.Text
-          "tintColor",
-          "borderRadius",
-          "borderTopLeftRadius",
-          "borderTopRightRadius",
-          "borderTopStartRadius",
-          "borderTopEndRadius",
-          "borderBottomLeftRadius",
-          "borderBottomRightRadius",
-          "borderBottomStartRadius",
-          "borderBottomEndRadius",
-          "borderStartStartRadius",
-          "borderStartEndRadius",
-          "borderEndStartRadius",
-          "borderEndEndRadius",
-          "borderColor",
-          "borderTopColor",
-          "borderBottomColor",
-          "borderLeftColor",
-          "borderRightColor",
-          "borderStartColor",
-          "borderEndColor",
-          "transform",
-      };
-
-      UpdatesBatch synchronousUpdatesBatch, shadowTreeUpdatesBatch;
-
-      for (const auto &[shadowNode, props] : updatesBatch) {
-        bool hasOnlySynchronousProps = true;
-        for (const auto &key : props.keys()) {
-          const auto keyStr = key.asString();
-          if (!synchronousProps.contains(keyStr)) {
-            hasOnlySynchronousProps = false;
-            break;
-          }
-        }
-        if (hasOnlySynchronousProps) {
-          synchronousUpdatesBatch.emplace_back(shadowNode, props);
-        } else {
-          shadowTreeUpdatesBatch.emplace_back(shadowNode, props);
-        }
-      }
+  static const std::unordered_set<std::string> synchronousProps = {
+      "opacity",
+      "elevation",
+      "zIndex",
+      "shadowOpacity",
+      "shadowRadius",
+      "backgroundColor",
+      // "color", // TODO: fix animating color of Animated.Text
+      "tintColor",
+      "borderRadius",
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderTopStartRadius",
+      "borderTopEndRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius",
+      "borderBottomStartRadius",
+      "borderBottomEndRadius",
+      "borderStartStartRadius",
+      "borderStartEndRadius",
+      "borderEndStartRadius",
+      "borderEndEndRadius",
+      "borderColor",
+      "borderTopColor",
+      "borderBottomColor",
+      "borderLeftColor",
+      "borderRightColor",
+      "borderStartColor",
+      "borderEndColor",
+      "transform",
+  };
 
-      for (const auto &[shadowNode, props] : synchronousUpdatesBatch) {
-        synchronouslyUpdateUIPropsFunction_(shadowNode->getTag(), props);
-      }
+  auto [synchronousUpdatesBatch, shadowTreeUpdatesBatch] =
+      partitionUpdates(updatesBatch, synchronousProps, false, allowPartialUpdates);
 
-      updatesBatch = std::move(shadowTreeUpdatesBatch);
-    }
-#endif // __APPLE__
-
-    if ((updatesBatch.size() > 0) && updatesRegistryManager_->shouldReanimatedSkipCommit()) {
-      updatesRegistryManager_->pleaseCommitAfterPause();
-    }
+  for (const auto &[shadowNode, props] : synchronousUpdatesBatch) {
+    synchronouslyUpdateUIPropsFunction_(shadowNode->getTag(), props);
   }
 
-  if (updatesRegistryManager_->shouldReanimatedSkipCommit()) {
-    // It may happen that `performOperations` is called on the UI thread
-    // while React Native tries to commit a new tree on the JS thread.
-    // In this case, we should skip the commit here and let React Native do
-    // it. The commit will include the current values from the updates manager
-    // which will be applied in ReanimatedCommitHook.
-    return;
-  }
-
-  commitUpdates(rt, updatesBatch);
-
-  // Clear the entire cache after the commit
-  // (we don't know if the view is updated from outside of Reanimated
-  // so we have to clear the entire cache)
-  viewStylesRepository_->clearNodesCache();
+  updatesBatch = std::move(shadowTreeUpdatesBatch);
+#endif // __APPLE__
 }
 
 void ReanimatedModuleProxy::requestFlushRegistry() {