react-native-tvos 0.84.1-0 → 0.85.0-0

package/ReactCommon/react/renderer/components/view/conversions.h

@@ -9,6 +9,7 @@
 
 #include <glog/logging.h>
 #include <react/debug/react_native_expect.h>
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/components/view/primitives.h>
 #include <react/renderer/core/LayoutMetrics.h>
 #include <react/renderer/core/PropsParserContext.h>
@@ -17,6 +18,9 @@
 #include <react/renderer/css/CSSAngle.h>
 #include <react/renderer/css/CSSNumber.h>
 #include <react/renderer/css/CSSPercentage.h>
+#include <react/renderer/css/CSSRatio.h>
+#include <react/renderer/css/CSSTransform.h>
+#include <react/renderer/css/CSSTransformOrigin.h>
 #include <react/renderer/css/CSSValueParser.h>
 #include <react/renderer/debug/flags.h>
 #include <react/renderer/graphics/BackgroundPosition.h>
@@ -533,7 +537,136 @@ inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue
   result = toValueUnit(value);
 }
 
-inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, Transform &result)
+inline ValueUnit cssLengthPercentageToValueUnit(const std::variant<CSSLength, CSSPercentage> &value)
+{
+  if (std::holds_alternative<CSSLength>(value)) {
+    auto len = std::get<CSSLength>(value);
+    if (len.unit != CSSLengthUnit::Px) {
+      return {};
+    }
+    return {len.value, UnitType::Point};
+  } else {
+    return {std::get<CSSPercentage>(value).value, UnitType::Percent};
+  }
+}
+
+inline std::optional<TransformOperation> fromCSSTransformFunction(const CSSTransformFunction &cssTransform)
+{
+  constexpr auto Zero = ValueUnit(0, UnitType::Point);
+  constexpr auto One = ValueUnit(1, UnitType::Point);
+
+  return std::visit(
+      [&](auto &&func) -> std::optional<TransformOperation> {
+        using T = std::decay_t<decltype(func)>;
+
+        if constexpr (std::is_same_v<T, CSSRotate>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Rotate, .x = Zero, .y = Zero, .z = ValueUnit(radians, UnitType::Point)};
+        }
+
+        if constexpr (std::is_same_v<T, CSSRotateX>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Rotate, .x = ValueUnit(radians, UnitType::Point), .y = Zero, .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSRotateY>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Rotate, .x = Zero, .y = ValueUnit(radians, UnitType::Point), .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSRotateZ>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Rotate, .x = Zero, .y = Zero, .z = ValueUnit(radians, UnitType::Point)};
+        }
+
+        if constexpr (std::is_same_v<T, CSSTranslate>) {
+          auto x = cssLengthPercentageToValueUnit(func.x);
+          auto y = cssLengthPercentageToValueUnit(func.y);
+          if (!x || !y) {
+            return std::nullopt;
+          }
+          return TransformOperation{.type = TransformOperationType::Translate, .x = x, .y = y, .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSTranslateX>) {
+          auto x = cssLengthPercentageToValueUnit(func.value);
+          if (!x) {
+            return std::nullopt;
+          }
+          return TransformOperation{.type = TransformOperationType::Translate, .x = x, .y = Zero, .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSTranslateY>) {
+          auto y = cssLengthPercentageToValueUnit(func.value);
+          if (!y) {
+            return std::nullopt;
+          }
+          return TransformOperation{.type = TransformOperationType::Translate, .x = Zero, .y = y, .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSTranslate3D>) {
+          auto x = cssLengthPercentageToValueUnit(func.x);
+          auto y = cssLengthPercentageToValueUnit(func.y);
+          if (!x || !y || func.z.unit != CSSLengthUnit::Px) {
+            return std::nullopt;
+          }
+          return TransformOperation{
+              .type = TransformOperationType::Translate, .x = x, .y = y, .z = ValueUnit(func.z.value, UnitType::Point)};
+        }
+
+        if constexpr (std::is_same_v<T, CSSScale>) {
+          return TransformOperation{
+              .type = TransformOperationType::Scale,
+              .x = ValueUnit(func.x, UnitType::Point),
+              .y = ValueUnit(func.y, UnitType::Point),
+              .z = One};
+        }
+
+        if constexpr (std::is_same_v<T, CSSScaleX>) {
+          return TransformOperation{
+              .type = TransformOperationType::Scale, .x = ValueUnit(func.value, UnitType::Point), .y = One, .z = One};
+        }
+
+        if constexpr (std::is_same_v<T, CSSScaleY>) {
+          return TransformOperation{
+              .type = TransformOperationType::Scale, .x = One, .y = ValueUnit(func.value, UnitType::Point), .z = One};
+        }
+
+        if constexpr (std::is_same_v<T, CSSSkewX>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Skew, .x = ValueUnit(radians, UnitType::Point), .y = Zero, .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSSkewY>) {
+          auto radians = static_cast<float>(func.degrees * M_PI / 180.0f);
+          return TransformOperation{
+              .type = TransformOperationType::Skew, .x = Zero, .y = ValueUnit(radians, UnitType::Point), .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSPerspective>) {
+          if (func.length.unit != CSSLengthUnit::Px) {
+            return std::nullopt;
+          }
+          return TransformOperation{
+              .type = TransformOperationType::Perspective,
+              .x = ValueUnit(func.length.value, UnitType::Point),
+              .y = Zero,
+              .z = Zero};
+        }
+
+        if constexpr (std::is_same_v<T, CSSMatrix>) {
+          return TransformOperation{.type = TransformOperationType::Arbitrary, .x = Zero, .y = Zero, .z = Zero};
+        }
+      },
+      cssTransform);
+}
+
+inline void parseProcessedTransform(const PropsParserContext & /*context*/, const RawValue &value, Transform &result)
 {
   auto transformMatrix = Transform{};
   react_native_expect(value.hasType<std::vector<RawValue>>());
@@ -770,7 +903,73 @@ inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue
   result = transformMatrix;
 }
 
-inline void fromRawValue(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+inline void parseUnprocessedTransformString(const std::string &value, Transform &result)
+{
+  auto transformList = parseCSSProperty<CSSTransformList>(value);
+  if (!std::holds_alternative<CSSTransformList>(transformList)) {
+    result = {};
+    return;
+  }
+
+  auto transformMatrix = Transform{};
+  const auto &cssFuncs = std::get<CSSTransformList>(transformList);
+  transformMatrix.operations.reserve(cssFuncs.size());
+  for (const auto &cssFunc : cssFuncs) {
+    auto op = fromCSSTransformFunction(cssFunc);
+    if (!op.has_value()) {
+      result = {};
+      return;
+    }
+
+    if (op->type == TransformOperationType::Arbitrary) {
+      // CSSMatrix: expand 6-value 2D matrix to 4x4 matrix
+      if (std::holds_alternative<CSSMatrix>(cssFunc)) {
+        const auto &m = std::get<CSSMatrix>(cssFunc);
+        transformMatrix.matrix[0] = m.values[0];
+        transformMatrix.matrix[1] = m.values[1];
+        transformMatrix.matrix[2] = 0;
+        transformMatrix.matrix[3] = 0;
+        transformMatrix.matrix[4] = m.values[2];
+        transformMatrix.matrix[5] = m.values[3];
+        transformMatrix.matrix[6] = 0;
+        transformMatrix.matrix[7] = 0;
+        transformMatrix.matrix[8] = 0;
+        transformMatrix.matrix[9] = 0;
+        transformMatrix.matrix[10] = 1;
+        transformMatrix.matrix[11] = 0;
+        transformMatrix.matrix[12] = m.values[4];
+        transformMatrix.matrix[13] = m.values[5];
+        transformMatrix.matrix[14] = 0;
+        transformMatrix.matrix[15] = 1;
+      }
+    }
+
+    transformMatrix.operations.push_back(*op);
+  }
+
+  result = transformMatrix;
+}
+
+inline void parseUnprocessedTransform(const PropsParserContext &context, const RawValue &value, Transform &result)
+{
+  if (value.hasType<std::string>()) {
+    parseUnprocessedTransformString((std::string)value, result);
+  } else {
+    parseProcessedTransform(context, value, result);
+  }
+}
+
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, Transform &result)
+{
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing()) {
+    parseUnprocessedTransform(context, value, result);
+  } else {
+    parseProcessedTransform(context, value, result);
+  }
+}
+
+inline void
+parseProcessedTransformOrigin(const PropsParserContext & /*context*/, const RawValue &value, TransformOrigin &result)
 {
   if (!value.hasType<std::vector<RawValue>>()) {
     result = {};
@@ -804,6 +1003,55 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
   result = transformOrigin;
 }
 
+inline void parseUnprocessedTransformOriginString(const std::string &value, TransformOrigin &result)
+{
+  auto cssOrigin = parseCSSProperty<CSSTransformOrigin>(value);
+  if (!std::holds_alternative<CSSTransformOrigin>(cssOrigin)) {
+    result = {};
+    return;
+  }
+
+  const auto &origin = std::get<CSSTransformOrigin>(cssOrigin);
+  TransformOrigin transformOrigin;
+
+  auto x = cssLengthPercentageToValueUnit(origin.x);
+  auto y = cssLengthPercentageToValueUnit(origin.y);
+  if (!x || !y) {
+    result = {};
+    return;
+  }
+
+  transformOrigin.xy[0] = x;
+  transformOrigin.xy[1] = y;
+
+  if (origin.z.unit != CSSLengthUnit::Px) {
+    result = {};
+    return;
+  }
+  transformOrigin.z = origin.z.value;
+
+  result = transformOrigin;
+}
+
+inline void
+parseUnprocessedTransformOrigin(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+{
+  if (value.hasType<std::string>()) {
+    parseUnprocessedTransformOriginString((std::string)value, result);
+  } else {
+    parseProcessedTransformOrigin(context, value, result);
+  }
+}
+
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+{
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing()) {
+    parseUnprocessedTransformOrigin(context, value, result);
+  } else {
+    parseProcessedTransformOrigin(context, value, result);
+  }
+}
+
 inline void fromRawValue(const PropsParserContext &context, const RawValue &value, PointerEventsMode &result)
 {
   result = PointerEventsMode::Auto;

package/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -15,6 +15,7 @@
 #include <react/renderer/components/view/propsConversions.h>
 #include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/core/propsConversions.h>
+#include <react/renderer/graphics/TransformUtils.h>
 
 namespace facebook::react {
 
@@ -99,6 +100,15 @@ HostPlatformViewProps::HostPlatformViewProps(
           "trapFocusRight",
           sourceProps.trapFocusRight,
           false)),
+      scrollSnapAlign(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.scrollSnapAlign
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "scrollSnapAlign",
+                    sourceProps.scrollSnapAlign,
+                    {})),
       needsOffscreenAlphaCompositing(
           ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
               ? sourceProps.needsOffscreenAlphaCompositing
@@ -201,6 +211,7 @@ void HostPlatformViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE(nativeForeground, "nativeForegroundAndroid");
     RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
     RAW_SET_PROP_SWITCH_CASE_BASIC(hasTVPreferredFocus);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(scrollSnapAlign);
     RAW_SET_PROP_SWITCH_CASE_BASIC(needsOffscreenAlphaCompositing);
     RAW_SET_PROP_SWITCH_CASE_BASIC(renderToHardwareTextureAndroid);
     RAW_SET_PROP_SWITCH_CASE_BASIC(screenReaderFocusable);
@@ -460,69 +471,6 @@ inline static void updateNativeDrawableProp(
   result[propName] = nativeDrawableResult;
 }
 
-inline static void updateTransformOperationValue(
-    const std::string& operationName,
-    const ValueUnit& valueUnit,
-    folly::dynamic& resultTranslateArray) {
-  folly::dynamic resultTranslate = folly::dynamic::object();
-  if (valueUnit.unit == UnitType::Percent) {
-    resultTranslate[operationName] = std::to_string(valueUnit.value) + "%";
-  } else {
-    resultTranslate[operationName] = valueUnit.value;
-  }
-  resultTranslateArray.push_back(std::move(resultTranslate));
-}
-
-inline static void updateTransformProps(
-    const Transform& transform,
-    const TransformOperation& operation,
-    folly::dynamic& resultTranslateArray) {
-  // See serialization rules in:
-  // react-native-github/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h?lines=592
-  std::string operationName;
-  switch (operation.type) {
-    case TransformOperationType::Scale:
-      operationName = "scale";
-      if (operation.x == operation.y && operation.x == operation.z) {
-        updateTransformOperationValue(
-            operationName, operation.x, resultTranslateArray);
-        return;
-      }
-      break;
-    case TransformOperationType::Translate:
-      operationName = "translate";
-      break;
-    case TransformOperationType::Rotate:
-      operationName = "rotate";
-      break;
-    case TransformOperationType::Perspective:
-      operationName = "perspective";
-      break;
-    case TransformOperationType::Arbitrary:
-      operationName = "matrix";
-      resultTranslateArray[operationName] = transform;
-      break;
-    case TransformOperationType::Identity:
-      // Do nothing
-      break;
-    case TransformOperationType::Skew:
-      operationName = "skew";
-      break;
-  }
-  if (operation.x.value != 0) {
-    updateTransformOperationValue(
-        operationName + "X", operation.x, resultTranslateArray);
-  }
-  if (operation.y.value != 0) {
-    updateTransformOperationValue(
-        operationName + "Y", operation.y, resultTranslateArray);
-  }
-  if (operation.z.value != 0) {
-    updateTransformOperationValue(
-        operationName + "Z", operation.z, resultTranslateArray);
-  }
-}
-
 inline static void updateAccessibilityStateProp(
     folly::dynamic& result,
     const std::optional<AccessibilityState>& newState,
@@ -1109,6 +1057,14 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
     }
   }
 
+  if (scrollSnapAlign != oldProps->scrollSnapAlign) {
+    if (scrollSnapAlign.has_value()) {
+      result["scrollSnapAlign"] = scrollSnapAlign.value();
+    } else {
+      result["scrollSnapAlign"] = folly::dynamic(nullptr);
+    }
+  }
+
   return result;
 }
 

package/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.h

@@ -47,6 +47,7 @@ class HostPlatformViewProps : public BaseViewProps {
   bool trapFocusDown{false};
   bool trapFocusLeft{false};
   bool trapFocusRight{false};
+  std::optional<std::string> scrollSnapAlign{};
 
   bool needsOffscreenAlphaCompositing{false};
   bool renderToHardwareTextureAndroid{false};

package/ReactCommon/react/renderer/components/view/primitives.h

@@ -85,11 +85,6 @@ inline static bool operator==(const ViewEvents &lhs, const ViewEvents &rhs)
   return lhs.bits == rhs.bits;
 }
 
-inline static bool operator!=(const ViewEvents &lhs, const ViewEvents &rhs)
-{
-  return lhs.bits != rhs.bits;
-}
-
 enum class BackfaceVisibility : uint8_t { Auto, Visible, Hidden };
 
 enum class BorderCurve : uint8_t { Circular, Continuous };
@@ -183,40 +178,7 @@ struct CascadedRectangleEdges {
     };
   }
 
-  bool operator==(const CascadedRectangleEdges<T> &rhs) const
-  {
-    return std::tie(
-               this->left,
-               this->top,
-               this->right,
-               this->bottom,
-               this->start,
-               this->end,
-               this->horizontal,
-               this->vertical,
-               this->all,
-               this->block,
-               this->blockStart,
-               this->blockEnd) ==
-        std::tie(
-               rhs.left,
-               rhs.top,
-               rhs.right,
-               rhs.bottom,
-               rhs.start,
-               rhs.end,
-               rhs.horizontal,
-               rhs.vertical,
-               rhs.all,
-               rhs.block,
-               rhs.blockStart,
-               rhs.blockEnd);
-  }
-
-  bool operator!=(const CascadedRectangleEdges<T> &rhs) const
-  {
-    return !(*this == rhs);
-  }
+  bool operator==(const CascadedRectangleEdges<T> &rhs) const = default;
 };
 
 template <typename T>
@@ -261,42 +223,7 @@ struct CascadedRectangleCorners {
     };
   }
 
-  bool operator==(const CascadedRectangleCorners<T> &rhs) const
-  {
-    return std::tie(
-               this->topLeft,
-               this->topRight,
-               this->bottomLeft,
-               this->bottomRight,
-               this->topStart,
-               this->topEnd,
-               this->bottomStart,
-               this->bottomEnd,
-               this->all,
-               this->endEnd,
-               this->endStart,
-               this->startEnd,
-               this->startStart) ==
-        std::tie(
-               rhs.topLeft,
-               rhs.topRight,
-               rhs.bottomLeft,
-               rhs.bottomRight,
-               rhs.topStart,
-               rhs.topEnd,
-               rhs.bottomStart,
-               rhs.bottomEnd,
-               rhs.all,
-               rhs.endEnd,
-               rhs.endStart,
-               rhs.startEnd,
-               rhs.startStart);
-  }
-
-  bool operator!=(const CascadedRectangleCorners<T> &rhs) const
-  {
-    return !(*this == rhs);
-  }
+  bool operator==(const CascadedRectangleCorners<T> &rhs) const = default;
 };
 
 using BorderWidths = RectangleEdges<Float>;
@@ -318,17 +245,7 @@ struct BorderMetrics {
   BorderCurves borderCurves{};
   BorderStyles borderStyles{};
 
-  bool operator==(const BorderMetrics &rhs) const
-  {
-    return std::tie(
-               this->borderColors, this->borderWidths, this->borderRadii, this->borderCurves, this->borderStyles) ==
-        std::tie(rhs.borderColors, rhs.borderWidths, rhs.borderRadii, rhs.borderCurves, rhs.borderStyles);
-  }
-
-  bool operator!=(const BorderMetrics &rhs) const
-  {
-    return !(*this == rhs);
-  }
+  bool operator==(const BorderMetrics &rhs) const = default;
 };
 
 #if TARGET_OS_TV