react-native-tvos 0.82.1-0 → 0.83.0-0

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

@@ -18,7 +18,10 @@
 #include <react/renderer/css/CSSNumber.h>
 #include <react/renderer/css/CSSPercentage.h>
 #include <react/renderer/css/CSSValueParser.h>
-#include <react/renderer/graphics/BackgroundImage.h>
+#include <react/renderer/debug/flags.h>
+#include <react/renderer/graphics/BackgroundPosition.h>
+#include <react/renderer/graphics/BackgroundRepeat.h>
+#include <react/renderer/graphics/BackgroundSize.h>
 #include <react/renderer/graphics/BlendMode.h>
 #include <react/renderer/graphics/Isolation.h>
 #include <react/renderer/graphics/LinearGradient.h>
@@ -44,10 +47,9 @@ namespace facebook::react {
  * values have special "no limit" meaning in Yoga, therefore ` YGUndefined`
  * usually corresponds to `Infinity` value.
  */
-inline Float floatFromYogaFloat(float value) {
-  static_assert(
-      YGUndefined != YGUndefined,
-      "The code of this function assumes that YGUndefined is NaN.");
+inline Float floatFromYogaFloat(float value)
+{
+  static_assert(YGUndefined != YGUndefined, "The code of this function assumes that YGUndefined is NaN.");
   if (std::isnan(value) /* means: `value == YGUndefined` */) {
     return std::numeric_limits<Float>::infinity();
   }
@@ -55,7 +57,8 @@ inline Float floatFromYogaFloat(float value) {
   return (Float)value;
 }
 
-inline float yogaFloatFromFloat(Float value) {
+inline float yogaFloatFromFloat(Float value)
+{
   if (!std::isfinite(value)) {
     return YGUndefined;
   }
@@ -73,7 +76,8 @@ inline float yogaFloatFromFloat(Float value) {
  * which usually has some special corresponding representation for an empty
  * value.
  */
-inline Float floatFromYogaOptionalFloat(yoga::FloatOptional value) {
+inline Float floatFromYogaOptionalFloat(yoga::FloatOptional value)
+{
   if (value.isUndefined()) {
     return std::numeric_limits<Float>::quiet_NaN();
   }
@@ -81,7 +85,8 @@ inline Float floatFromYogaOptionalFloat(yoga::FloatOptional value) {
   return floatFromYogaFloat(value.unwrap());
 }
 
-inline yoga::FloatOptional yogaOptionalFloatFromFloat(Float value) {
+inline yoga::FloatOptional yogaOptionalFloatFromFloat(Float value)
+{
   if (std::isnan(value)) {
     return yoga::FloatOptional();
   }
@@ -90,22 +95,21 @@ inline yoga::FloatOptional yogaOptionalFloatFromFloat(Float value) {
 }
 
 inline std::optional<Float> optionalFloatFromYogaValue(
-    const yoga::Style::Length& length,
-    std::optional<Float> base = {}) {
+    const yoga::Style::Length &length,
+    std::optional<Float> base = {})
+{
   if (length.isPoints()) {
     return floatFromYogaOptionalFloat(length.value());
   } else if (length.isPercent()) {
-    return base.has_value()
-        ? std::optional<Float>(
-              base.value() * floatFromYogaOptionalFloat(length.value()))
-        : std::optional<Float>();
+    return base.has_value() ? std::optional<Float>(base.value() * floatFromYogaOptionalFloat(length.value()))
+                            : std::optional<Float>();
   } else {
     return {};
   }
 }
 
-static inline PositionType positionTypeFromYogaPositionType(
-    yoga::PositionType positionType) {
+static inline PositionType positionTypeFromYogaPositionType(yoga::PositionType positionType)
+{
   switch (positionType) {
     case yoga::PositionType::Static:
       return PositionType::Static;
@@ -116,7 +120,8 @@ static inline PositionType positionTypeFromYogaPositionType(
   }
 }
 
-inline DisplayType displayTypeFromYGDisplay(YGDisplay display) {
+inline DisplayType displayTypeFromYGDisplay(YGDisplay display)
+{
   switch (display) {
     case YGDisplayNone:
       return DisplayType::None;
@@ -127,16 +132,18 @@ inline DisplayType displayTypeFromYGDisplay(YGDisplay display) {
   }
 }
 
-inline LayoutMetrics layoutMetricsFromYogaNode(yoga::Node& yogaNode) {
+inline LayoutMetrics layoutMetricsFromYogaNode(yoga::Node &yogaNode)
+{
   auto layoutMetrics = LayoutMetrics{};
 
   layoutMetrics.frame = Rect{
-      Point{
-          floatFromYogaFloat(YGNodeLayoutGetLeft(&yogaNode)),
-          floatFromYogaFloat(YGNodeLayoutGetTop(&yogaNode))},
-      Size{
-          floatFromYogaFloat(YGNodeLayoutGetWidth(&yogaNode)),
-          floatFromYogaFloat(YGNodeLayoutGetHeight(&yogaNode))}};
+      .origin =
+          Point{
+              .x = floatFromYogaFloat(YGNodeLayoutGetLeft(&yogaNode)),
+              .y = floatFromYogaFloat(YGNodeLayoutGetTop(&yogaNode))},
+      .size = Size{
+          .width = floatFromYogaFloat(YGNodeLayoutGetWidth(&yogaNode)),
+          .height = floatFromYogaFloat(YGNodeLayoutGetHeight(&yogaNode))}};
 
   layoutMetrics.borderWidth = EdgeInsets{
       floatFromYogaFloat(YGNodeLayoutGetBorder(&yogaNode, YGEdgeLeft)),
@@ -145,30 +152,23 @@ inline LayoutMetrics layoutMetricsFromYogaNode(yoga::Node& yogaNode) {
       floatFromYogaFloat(YGNodeLayoutGetBorder(&yogaNode, YGEdgeBottom))};
 
   layoutMetrics.contentInsets = EdgeInsets{
-      layoutMetrics.borderWidth.left +
-          floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeLeft)),
-      layoutMetrics.borderWidth.top +
-          floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeTop)),
-      layoutMetrics.borderWidth.right +
-          floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeRight)),
-      layoutMetrics.borderWidth.bottom +
-          floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeBottom))};
-
-  layoutMetrics.displayType =
-      displayTypeFromYGDisplay(YGNodeStyleGetDisplay(&yogaNode));
-
-  layoutMetrics.positionType =
-      positionTypeFromYogaPositionType(yogaNode.style().positionType());
-
-  layoutMetrics.layoutDirection =
-      YGNodeLayoutGetDirection(&yogaNode) == YGDirectionRTL
-      ? LayoutDirection::RightToLeft
-      : LayoutDirection::LeftToRight;
+      layoutMetrics.borderWidth.left + floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeLeft)),
+      layoutMetrics.borderWidth.top + floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeTop)),
+      layoutMetrics.borderWidth.right + floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeRight)),
+      layoutMetrics.borderWidth.bottom + floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeBottom))};
+
+  layoutMetrics.displayType = displayTypeFromYGDisplay(YGNodeStyleGetDisplay(&yogaNode));
+
+  layoutMetrics.positionType = positionTypeFromYogaPositionType(yogaNode.style().positionType());
+
+  layoutMetrics.layoutDirection = YGNodeLayoutGetDirection(&yogaNode) == YGDirectionRTL ? LayoutDirection::RightToLeft
+                                                                                        : LayoutDirection::LeftToRight;
 
   return layoutMetrics;
 }
 
-inline YGDirection yogaDirectionFromLayoutDirection(LayoutDirection direction) {
+inline YGDirection yogaDirectionFromLayoutDirection(LayoutDirection direction)
+{
   switch (direction) {
     case LayoutDirection::Undefined:
       return YGDirectionInherit;
@@ -179,10 +179,8 @@ inline YGDirection yogaDirectionFromLayoutDirection(LayoutDirection direction) {
   }
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Direction& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Direction &result)
+{
   result = yoga::Direction::Inherit;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -204,10 +202,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Direction: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::FlexDirection& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::FlexDirection &result)
+{
   result = yoga::FlexDirection::Column;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -233,10 +229,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::FlexDirection: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    yoga::BoxSizing& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, yoga::BoxSizing &result)
+{
   result = yoga::BoxSizing::BorderBox;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -255,10 +249,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::BoxSizing: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Justify& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Justify &result)
+{
   result = yoga::Justify::FlexStart;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -292,10 +284,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Justify: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Align& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Align &result)
+{
   result = yoga::Align::Stretch;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -342,10 +332,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::PositionType& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::PositionType &result)
+{
   result = yoga::PositionType::Relative;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -367,10 +355,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::PositionType: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Wrap& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Wrap &result)
+{
   result = yoga::Wrap::NoWrap;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -392,10 +378,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Wrap: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Overflow& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Overflow &result)
+{
   result = yoga::Overflow::Visible;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -418,10 +402,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Display& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Display &result)
+{
   result = yoga::Display::Flex;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -443,10 +425,8 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    yoga::Style::SizeLength& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, yoga::Style::SizeLength &result)
+{
   if (value.hasType<Float>()) {
     result = yoga::StyleSizeLength::points((float)value);
     return;
@@ -467,12 +447,10 @@ inline void fromRawValue(
     } else {
       auto parsed = parseCSSProperty<CSSNumber, CSSPercentage>(stringValue);
       if (std::holds_alternative<CSSPercentage>(parsed)) {
-        result = yoga::StyleSizeLength::percent(
-            std::get<CSSPercentage>(parsed).value);
+        result = yoga::StyleSizeLength::percent(std::get<CSSPercentage>(parsed).value);
         return;
       } else if (std::holds_alternative<CSSNumber>(parsed)) {
-        result =
-            yoga::StyleSizeLength::points(std::get<CSSNumber>(parsed).value);
+        result = yoga::StyleSizeLength::points(std::get<CSSNumber>(parsed).value);
         return;
       }
     }
@@ -480,10 +458,8 @@ inline void fromRawValue(
   result = yoga::StyleSizeLength::undefined();
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::Style::Length& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::Style::Length &result)
+{
   if (value.hasType<Float>()) {
     result = yoga::StyleLength::points((float)value);
     return;
@@ -495,8 +471,7 @@ inline void fromRawValue(
     } else {
       auto parsed = parseCSSProperty<CSSNumber, CSSPercentage>(stringValue);
       if (std::holds_alternative<CSSPercentage>(parsed)) {
-        result =
-            yoga::StyleLength::percent(std::get<CSSPercentage>(parsed).value);
+        result = yoga::StyleLength::percent(std::get<CSSPercentage>(parsed).value);
         return;
       } else if (std::holds_alternative<CSSNumber>(parsed)) {
         result = yoga::StyleLength::points(std::get<CSSNumber>(parsed).value);
@@ -507,24 +482,20 @@ inline void fromRawValue(
   result = yoga::StyleLength::undefined();
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    YGValue& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, YGValue &result)
+{
   yoga::Style::Length length{};
   fromRawValue(context, value, length);
   result = (YGValue)length;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    yoga::FloatOptional& result) {
-  result = value.hasType<float>() ? yoga::FloatOptional((float)value)
-                                  : yoga::FloatOptional();
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, yoga::FloatOptional &result)
+{
+  result = value.hasType<float>() ? yoga::FloatOptional((float)value) : yoga::FloatOptional();
 }
 
-inline std::optional<Float> toRadians(const RawValue& value) {
+inline std::optional<Float> toRadians(const RawValue &value)
+{
   if (value.hasType<Float>()) {
     return (Float)value;
   }
@@ -534,13 +505,14 @@ inline std::optional<Float> toRadians(const RawValue& value) {
 
   auto angle = parseCSSProperty<CSSAngle>((std::string)value);
   if (std::holds_alternative<CSSAngle>(angle)) {
-    return std::get<CSSAngle>(angle).degrees * M_PI / 180.0f;
+    return static_cast<float>(std::get<CSSAngle>(angle).degrees * M_PI / 180.0f);
   }
 
   return {};
 }
 
-inline ValueUnit toValueUnit(const RawValue& value) {
+inline ValueUnit toValueUnit(const RawValue &value)
+{
   if (value.hasType<Float>()) {
     return ValueUnit((Float)value, UnitType::Point);
   }
@@ -556,17 +528,13 @@ inline ValueUnit toValueUnit(const RawValue& value) {
   return {};
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    ValueUnit& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, ValueUnit &result)
+{
   result = toValueUnit(value);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    Transform& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, Transform &result)
+{
   auto transformMatrix = Transform{};
   react_native_expect(value.hasType<std::vector<RawValue>>());
   if (!value.hasType<std::vector<RawValue>>()) {
@@ -575,14 +543,13 @@ inline void fromRawValue(
   }
 
   auto configurations = static_cast<std::vector<RawValue>>(value);
-  for (const auto& configuration : configurations) {
+  for (const auto &configuration : configurations) {
     if (!configuration.hasType<std::unordered_map<std::string, RawValue>>()) {
       result = {};
       return;
     }
 
-    auto configurationPair =
-        static_cast<std::unordered_map<std::string, RawValue>>(configuration);
+    auto configurationPair = static_cast<std::unordered_map<std::string, RawValue>>(configuration);
     if (configurationPair.size() != 1) {
       result = {};
       return;
@@ -590,7 +557,7 @@ inline void fromRawValue(
 
     auto pair = configurationPair.begin();
     auto operation = pair->first;
-    auto& parameters = pair->second;
+    auto &parameters = pair->second;
     auto Zero = ValueUnit(0, UnitType::Point);
     auto One = ValueUnit(1, UnitType::Point);
 
@@ -613,23 +580,51 @@ inline void fromRawValue(
         return;
       }
 
-      size_t i = 0;
-      for (auto number : numbers) {
-        transformMatrix.matrix[i++] = number;
+      if (numbers.size() == 16) {
+        size_t i = 0;
+
+        for (auto number : numbers) {
+          transformMatrix.matrix[i++] = number;
+        }
+      } else if (numbers.size() == 9) {
+        // We need to convert the 2d transform matrix into a 3d one as such:
+        // [
+        //   x00, x01, 0, x02
+        //   x10, x11, 0, x12
+        //   0,   0,   1, 0
+        //   x20, x21, 0, x22
+        // ]
+        transformMatrix.matrix[0] = numbers[0];
+        transformMatrix.matrix[1] = numbers[1];
+        transformMatrix.matrix[2] = 0;
+        transformMatrix.matrix[3] = numbers[2];
+        transformMatrix.matrix[4] = numbers[3];
+        transformMatrix.matrix[5] = numbers[4];
+        transformMatrix.matrix[6] = 0;
+        transformMatrix.matrix[7] = numbers[5];
+        transformMatrix.matrix[8] = 0;
+        transformMatrix.matrix[9] = 0;
+        transformMatrix.matrix[10] = 1;
+        transformMatrix.matrix[11] = 0;
+        transformMatrix.matrix[12] = numbers[6];
+        transformMatrix.matrix[13] = numbers[7];
+        transformMatrix.matrix[14] = 0;
+        transformMatrix.matrix[15] = numbers[8];
       }
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Arbitrary, Zero, Zero, Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{.type = TransformOperationType::Arbitrary, .x = Zero, .y = Zero, .z = Zero});
     } else if (operation == "perspective") {
       if (!parameters.hasType<Float>()) {
         result = {};
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Perspective,
-          ValueUnit((Float)parameters, UnitType::Point),
-          Zero,
-          Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Perspective,
+              .x = ValueUnit((Float)parameters, UnitType::Point),
+              .y = Zero,
+              .z = Zero});
     } else if (operation == "rotateX") {
       auto radians = toRadians(parameters);
       if (!radians.has_value()) {
@@ -637,11 +632,9 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Rotate,
-          ValueUnit(*radians, UnitType::Point),
-          Zero,
-          Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Rotate, .x = ValueUnit(*radians, UnitType::Point), .y = Zero, .z = Zero});
     } else if (operation == "rotateY") {
       auto radians = toRadians(parameters);
       if (!radians.has_value()) {
@@ -649,11 +642,9 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Rotate,
-          Zero,
-          ValueUnit(*radians, UnitType::Point),
-          Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Rotate, .x = Zero, .y = ValueUnit(*radians, UnitType::Point), .z = Zero});
     } else if (operation == "rotateZ" || operation == "rotate") {
       auto radians = toRadians(parameters);
       if (!radians.has_value()) {
@@ -661,11 +652,9 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Rotate,
-          Zero,
-          Zero,
-          ValueUnit(*radians, UnitType::Point)});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Rotate, .x = Zero, .y = Zero, .z = ValueUnit(*radians, UnitType::Point)});
     } else if (operation == "scale") {
       if (!parameters.hasType<Float>()) {
         result = {};
@@ -673,41 +662,44 @@ inline void fromRawValue(
       }
 
       auto number = ValueUnit((Float)parameters, UnitType::Point);
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Scale, number, number, number});
+      transformMatrix.operations.push_back(
+          TransformOperation{.type = TransformOperationType::Scale, .x = number, .y = number, .z = number});
     } else if (operation == "scaleX") {
       if (!parameters.hasType<Float>()) {
         result = {};
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Scale,
-          ValueUnit((Float)parameters, UnitType::Point),
-          One,
-          One});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Scale,
+              .x = ValueUnit((Float)parameters, UnitType::Point),
+              .y = One,
+              .z = One});
     } else if (operation == "scaleY") {
       if (!parameters.hasType<Float>()) {
         result = {};
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Scale,
-          One,
-          ValueUnit((Float)parameters, UnitType::Point),
-          One});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Scale,
+              .x = One,
+              .y = ValueUnit((Float)parameters, UnitType::Point),
+              .z = One});
     } else if (operation == "scaleZ") {
       if (!parameters.hasType<Float>()) {
         result = {};
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Scale,
-          One,
-          One,
-          ValueUnit((Float)parameters, UnitType::Point)});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Scale,
+              .x = One,
+              .y = One,
+              .z = ValueUnit((Float)parameters, UnitType::Point)});
     } else if (operation == "translate") {
       if (!parameters.hasType<std::vector<RawValue>>()) {
         result = {};
@@ -732,8 +724,8 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Translate, valueX, valueY, Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{.type = TransformOperationType::Translate, .x = valueX, .y = valueY, .z = Zero});
     } else if (operation == "translateX") {
       auto valueX = toValueUnit(parameters);
       if (!valueX) {
@@ -741,8 +733,8 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Translate, valueX, Zero, Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{.type = TransformOperationType::Translate, .x = valueX, .y = Zero, .z = Zero});
     } else if (operation == "translateY") {
       auto valueY = toValueUnit(parameters);
       if (!valueY) {
@@ -750,8 +742,8 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Translate, Zero, valueY, Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{.type = TransformOperationType::Translate, .x = Zero, .y = valueY, .z = Zero});
     } else if (operation == "skewX") {
       auto radians = toRadians(parameters);
       if (!radians.has_value()) {
@@ -759,11 +751,9 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Skew,
-          ValueUnit(*radians, UnitType::Point),
-          Zero,
-          Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Skew, .x = ValueUnit(*radians, UnitType::Point), .y = Zero, .z = Zero});
     } else if (operation == "skewY") {
       auto radians = toRadians(parameters);
       if (!radians.has_value()) {
@@ -771,21 +761,17 @@ inline void fromRawValue(
         return;
       }
 
-      transformMatrix.operations.push_back(TransformOperation{
-          TransformOperationType::Skew,
-          Zero,
-          ValueUnit(*radians, UnitType::Point),
-          Zero});
+      transformMatrix.operations.push_back(
+          TransformOperation{
+              .type = TransformOperationType::Skew, .x = Zero, .y = ValueUnit(*radians, UnitType::Point), .z = Zero});
     }
   }
 
   result = transformMatrix;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    TransformOrigin& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, TransformOrigin &result)
+{
   if (!value.hasType<std::vector<RawValue>>()) {
     result = {};
     return;
@@ -818,10 +804,8 @@ inline void fromRawValue(
   result = transformOrigin;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    PointerEventsMode& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, PointerEventsMode &result)
+{
   result = PointerEventsMode::Auto;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -848,7 +832,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline std::string toString(const PointerEventsMode& value) {
+inline std::string toString(PointerEventsMode value)
+{
   switch (value) {
     case PointerEventsMode::Auto:
       return "auto";
@@ -861,10 +846,8 @@ inline std::string toString(const PointerEventsMode& value) {
   }
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    BackfaceVisibility& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, BackfaceVisibility &result)
+{
   result = BackfaceVisibility::Auto;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -887,10 +870,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    BorderCurve& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, BorderCurve &result)
+{
   result = BorderCurve::Circular;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -909,10 +890,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    BorderStyle& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, BorderStyle &result)
+{
   result = BorderStyle::Solid;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -935,10 +914,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    OutlineStyle& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, OutlineStyle &result)
+{
   result = OutlineStyle::Solid;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -961,10 +938,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    Cursor& result) {
+inline void fromRawValue(const PropsParserContext &context, const RawValue &value, Cursor &result)
+{
   result = Cursor::Auto;
   react_native_expect(value.hasType<std::string>());
   if (!value.hasType<std::string>()) {
@@ -1119,10 +1094,8 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    LayoutConformance& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, LayoutConformance &result)
+{
   react_native_expect(value.hasType<std::string>());
   result = LayoutConformance::Strict;
   if (!value.hasType<std::string>()) {
@@ -1140,10 +1113,8 @@ inline void fromRawValue(
   }
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    BlendMode& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, BlendMode &result)
+{
   react_native_expect(value.hasType<std::string>());
   result = BlendMode::Normal;
   if (!value.hasType<std::string>()) {
@@ -1161,201 +1132,174 @@ inline void fromRawValue(
   result = blendMode.value();
 }
 
-inline void fromRawValue(
-    const PropsParserContext& context,
-    const RawValue& value,
-    std::vector<BackgroundImage>& result) {
+inline void
+fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, std::vector<BackgroundSize> &result)
+{
   react_native_expect(value.hasType<std::vector<RawValue>>());
   if (!value.hasType<std::vector<RawValue>>()) {
     result = {};
     return;
   }
 
-  std::vector<BackgroundImage> backgroundImage{};
-  auto rawBackgroundImage = static_cast<std::vector<RawValue>>(value);
-  for (const auto& rawBackgroundImageValue : rawBackgroundImage) {
-    bool isMap = rawBackgroundImageValue
-                     .hasType<std::unordered_map<std::string, RawValue>>();
-    react_native_expect(isMap);
-    if (!isMap) {
-      result = {};
-      return;
-    }
-
-    auto rawBackgroundImageMap =
-        static_cast<std::unordered_map<std::string, RawValue>>(
-            rawBackgroundImageValue);
+  std::vector<BackgroundSize> backgroundSizes{};
+  auto rawBackgroundSizes = static_cast<std::vector<RawValue>>(value);
 
-    auto typeIt = rawBackgroundImageMap.find("type");
-    if (typeIt == rawBackgroundImageMap.end() ||
-        !typeIt->second.hasType<std::string>()) {
-      continue;
-    }
+  for (const auto &rawBackgroundSizeValue : rawBackgroundSizes) {
+    if (rawBackgroundSizeValue.hasType<std::string>()) {
+      auto sizeStr = (std::string)rawBackgroundSizeValue;
+      if (sizeStr == "cover") {
+        backgroundSizes.emplace_back(BackgroundSizeKeyword::Cover);
+      } else if (sizeStr == "contain") {
+        backgroundSizes.emplace_back(BackgroundSizeKeyword::Contain);
+      }
+    } else if (rawBackgroundSizeValue.hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto sizeMap = static_cast<std::unordered_map<std::string, RawValue>>(rawBackgroundSizeValue);
+
+      BackgroundSizeLengthPercentage sizeLengthPercentage;
+
+      auto xIt = sizeMap.find("x");
+      if (xIt != sizeMap.end()) {
+        if (xIt->second.hasType<std::string>() && (std::string)(xIt->second) == "auto") {
+          sizeLengthPercentage.x = std::monostate{};
+        } else {
+          auto valueUnit = toValueUnit(xIt->second);
+          if (valueUnit) {
+            sizeLengthPercentage.x = valueUnit;
+          }
+        }
+      }
 
-    std::string type = (std::string)(typeIt->second);
-    std::vector<ColorStop> colorStops;
-    auto colorStopsIt = rawBackgroundImageMap.find("colorStops");
-
-    if (colorStopsIt != rawBackgroundImageMap.end() &&
-        colorStopsIt->second.hasType<std::vector<RawValue>>()) {
-      auto rawColorStops =
-          static_cast<std::vector<RawValue>>(colorStopsIt->second);
-
-      for (const auto& stop : rawColorStops) {
-        if (stop.hasType<std::unordered_map<std::string, RawValue>>()) {
-          auto stopMap =
-              static_cast<std::unordered_map<std::string, RawValue>>(stop);
-          auto positionIt = stopMap.find("position");
-          auto colorIt = stopMap.find("color");
-
-          if (positionIt != stopMap.end() && colorIt != stopMap.end()) {
-            ColorStop colorStop;
-            if (positionIt->second.hasValue()) {
-              auto valueUnit = toValueUnit(positionIt->second);
-              if (!valueUnit) {
-                result = {};
-                return;
-              }
-              colorStop.position = valueUnit;
-            }
-            if (colorIt->second.hasValue()) {
-              fromRawValue(
-                  context.contextContainer,
-                  context.surfaceId,
-                  colorIt->second,
-                  colorStop.color);
-            }
-            colorStops.push_back(colorStop);
+      auto yIt = sizeMap.find("y");
+      if (yIt != sizeMap.end()) {
+        if (yIt->second.hasType<std::string>() && (std::string)(yIt->second) == "auto") {
+          sizeLengthPercentage.y = std::monostate{};
+        } else {
+          auto valueUnit = toValueUnit(yIt->second);
+          if (valueUnit) {
+            sizeLengthPercentage.y = valueUnit;
           }
         }
       }
+
+      backgroundSizes.emplace_back(sizeLengthPercentage);
     }
+  }
 
-    if (type == "linear-gradient") {
-      LinearGradient linearGradient;
-
-      auto directionIt = rawBackgroundImageMap.find("direction");
-      if (directionIt != rawBackgroundImageMap.end() &&
-          directionIt->second
-              .hasType<std::unordered_map<std::string, RawValue>>()) {
-        auto directionMap =
-            static_cast<std::unordered_map<std::string, RawValue>>(
-                directionIt->second);
-
-        auto directionTypeIt = directionMap.find("type");
-        auto valueIt = directionMap.find("value");
-
-        if (directionTypeIt != directionMap.end() &&
-            valueIt != directionMap.end()) {
-          std::string directionType = (std::string)(directionTypeIt->second);
-
-          if (directionType == "angle") {
-            linearGradient.direction.type = GradientDirectionType::Angle;
-            if (valueIt->second.hasType<Float>()) {
-              linearGradient.direction.value = (Float)(valueIt->second);
-            }
-          } else if (directionType == "keyword") {
-            linearGradient.direction.type = GradientDirectionType::Keyword;
-            if (valueIt->second.hasType<std::string>()) {
-              linearGradient.direction.value =
-                  parseGradientKeyword((std::string)(valueIt->second));
-            }
-          }
+  result = backgroundSizes;
+}
+
+inline void
+fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, std::vector<BackgroundPosition> &result)
+{
+  react_native_expect(value.hasType<std::vector<RawValue>>());
+  if (!value.hasType<std::vector<RawValue>>()) {
+    result = {};
+    return;
+  }
+
+  std::vector<BackgroundPosition> backgroundPositions{};
+  auto rawBackgroundPositions = static_cast<std::vector<RawValue>>(value);
+
+  for (const auto &rawBackgroundPositionValue : rawBackgroundPositions) {
+    if (rawBackgroundPositionValue.hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto positionMap = static_cast<std::unordered_map<std::string, RawValue>>(rawBackgroundPositionValue);
+
+      BackgroundPosition backgroundPosition;
+
+      auto topIt = positionMap.find("top");
+      if (topIt != positionMap.end()) {
+        auto valueUnit = toValueUnit(topIt->second);
+        if (valueUnit) {
+          backgroundPosition.top = valueUnit;
         }
       }
 
-      if (!colorStops.empty()) {
-        linearGradient.colorStops = colorStops;
+      auto bottomIt = positionMap.find("bottom");
+      if (bottomIt != positionMap.end()) {
+        auto valueUnit = toValueUnit(bottomIt->second);
+        if (valueUnit) {
+          backgroundPosition.bottom = valueUnit;
+        }
       }
 
-      backgroundImage.emplace_back(std::move(linearGradient));
-    } else if (type == "radial-gradient") {
-      RadialGradient radialGradient;
-      auto shapeIt = rawBackgroundImageMap.find("shape");
-      if (shapeIt != rawBackgroundImageMap.end() &&
-          shapeIt->second.hasType<std::string>()) {
-        auto shape = (std::string)(shapeIt->second);
-        radialGradient.shape = shape == "circle" ? RadialGradientShape::Circle
-                                                 : RadialGradientShape::Ellipse;
+      auto leftIt = positionMap.find("left");
+      if (leftIt != positionMap.end()) {
+        auto valueUnit = toValueUnit(leftIt->second);
+        if (valueUnit) {
+          backgroundPosition.left = valueUnit;
+        }
       }
 
-      auto sizeIt = rawBackgroundImageMap.find("size");
-      if (sizeIt != rawBackgroundImageMap.end()) {
-        if (sizeIt->second.hasType<std::string>()) {
-          auto sizeStr = (std::string)(sizeIt->second);
-          if (sizeStr == "closest-side") {
-            radialGradient.size.value =
-                RadialGradientSize::SizeKeyword::ClosestSide;
-          } else if (sizeStr == "farthest-side") {
-            radialGradient.size.value =
-                RadialGradientSize::SizeKeyword::FarthestSide;
-          } else if (sizeStr == "closest-corner") {
-            radialGradient.size.value =
-                RadialGradientSize::SizeKeyword::ClosestCorner;
-          } else if (sizeStr == "farthest-corner") {
-            radialGradient.size.value =
-                RadialGradientSize::SizeKeyword::FarthestCorner;
-          }
-        } else if (sizeIt->second
-                       .hasType<std::unordered_map<std::string, RawValue>>()) {
-          auto sizeMap = static_cast<std::unordered_map<std::string, RawValue>>(
-              sizeIt->second);
-          auto xIt = sizeMap.find("x");
-          auto yIt = sizeMap.find("y");
-          if (xIt != sizeMap.end() && yIt != sizeMap.end()) {
-            RadialGradientSize sizeObj;
-            sizeObj.value = RadialGradientSize::Dimensions{
-                toValueUnit(xIt->second), toValueUnit(yIt->second)};
-            radialGradient.size = sizeObj;
-          }
+      auto rightIt = positionMap.find("right");
+      if (rightIt != positionMap.end()) {
+        auto valueUnit = toValueUnit(rightIt->second);
+        if (valueUnit) {
+          backgroundPosition.right = valueUnit;
         }
+      }
 
-        auto positionIt = rawBackgroundImageMap.find("position");
-        if (positionIt != rawBackgroundImageMap.end() &&
-            positionIt->second
-                .hasType<std::unordered_map<std::string, RawValue>>()) {
-          auto positionMap =
-              static_cast<std::unordered_map<std::string, RawValue>>(
-                  positionIt->second);
-
-          auto topIt = positionMap.find("top");
-          auto bottomIt = positionMap.find("bottom");
-          auto leftIt = positionMap.find("left");
-          auto rightIt = positionMap.find("right");
-
-          if (topIt != positionMap.end()) {
-            auto topValue = toValueUnit(topIt->second);
-            radialGradient.position.top = topValue;
-          } else if (bottomIt != positionMap.end()) {
-            auto bottomValue = toValueUnit(bottomIt->second);
-            radialGradient.position.bottom = bottomValue;
-          }
+      backgroundPositions.emplace_back(backgroundPosition);
+    }
+  }
 
-          if (leftIt != positionMap.end()) {
-            auto leftValue = toValueUnit(leftIt->second);
-            radialGradient.position.left = leftValue;
-          } else if (rightIt != positionMap.end()) {
-            auto rightValue = toValueUnit(rightIt->second);
-            radialGradient.position.right = rightValue;
-          }
+  result = backgroundPositions;
+}
+
+inline void
+fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, std::vector<BackgroundRepeat> &result)
+{
+  react_native_expect(value.hasType<std::vector<RawValue>>());
+  if (!value.hasType<std::vector<RawValue>>()) {
+    result = {};
+    return;
+  }
+
+  std::vector<BackgroundRepeat> backgroundRepeats{};
+  auto rawBackgroundRepeats = static_cast<std::vector<RawValue>>(value);
+
+  for (const auto &rawBackgroundRepeatValue : rawBackgroundRepeats) {
+    if (rawBackgroundRepeatValue.hasType<std::unordered_map<std::string, RawValue>>()) {
+      auto repeatMap = static_cast<std::unordered_map<std::string, RawValue>>(rawBackgroundRepeatValue);
+
+      BackgroundRepeat backgroundRepeat;
+
+      auto xIt = repeatMap.find("x");
+      if (xIt != repeatMap.end() && xIt->second.hasType<std::string>()) {
+        auto xStr = (std::string)(xIt->second);
+        if (xStr == "repeat") {
+          backgroundRepeat.x = BackgroundRepeatStyle::Repeat;
+        } else if (xStr == "space") {
+          backgroundRepeat.x = BackgroundRepeatStyle::Space;
+        } else if (xStr == "round") {
+          backgroundRepeat.x = BackgroundRepeatStyle::Round;
+        } else if (xStr == "no-repeat") {
+          backgroundRepeat.x = BackgroundRepeatStyle::NoRepeat;
         }
       }
 
-      if (!colorStops.empty()) {
-        radialGradient.colorStops = colorStops;
+      auto yIt = repeatMap.find("y");
+      if (yIt != repeatMap.end() && yIt->second.hasType<std::string>()) {
+        auto yStr = (std::string)(yIt->second);
+        if (yStr == "repeat") {
+          backgroundRepeat.y = BackgroundRepeatStyle::Repeat;
+        } else if (yStr == "space") {
+          backgroundRepeat.y = BackgroundRepeatStyle::Space;
+        } else if (yStr == "round") {
+          backgroundRepeat.y = BackgroundRepeatStyle::Round;
+        } else if (yStr == "no-repeat") {
+          backgroundRepeat.y = BackgroundRepeatStyle::NoRepeat;
+        }
       }
 
-      backgroundImage.emplace_back(std::move(radialGradient));
+      backgroundRepeats.emplace_back(backgroundRepeat);
     }
   }
 
-  result = backgroundImage;
+  result = backgroundRepeats;
 }
 
-inline void fromRawValue(
-    const PropsParserContext& /*context*/,
-    const RawValue& value,
-    Isolation& result) {
+inline void fromRawValue(const PropsParserContext & /*context*/, const RawValue &value, Isolation &result)
+{
   react_native_expect(value.hasType<std::string>());
   result = Isolation::Auto;
   if (!value.hasType<std::string>()) {
@@ -1373,8 +1317,10 @@ inline void fromRawValue(
   result = isolation.value();
 }
 
+#if RN_DEBUG_STRING_CONVERTIBLE
 template <size_t N>
-inline std::string toString(const std::array<float, N> vec) {
+inline std::string toString(const std::array<float, N> vec)
+{
   std::string s;
 
   s.append("{");
@@ -1387,39 +1333,48 @@ inline std::string toString(const std::array<float, N> vec) {
   return s;
 }
 
-inline std::string toString(const yoga::Direction& value) {
+inline std::string toString(const yoga::Direction &value)
+{
   return YGDirectionToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::FlexDirection& value) {
+inline std::string toString(const yoga::FlexDirection &value)
+{
   return YGFlexDirectionToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Justify& value) {
+inline std::string toString(const yoga::Justify &value)
+{
   return YGJustifyToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Align& value) {
+inline std::string toString(const yoga::Align &value)
+{
   return YGAlignToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::PositionType& value) {
+inline std::string toString(const yoga::PositionType &value)
+{
   return YGPositionTypeToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Wrap& value) {
+inline std::string toString(const yoga::Wrap &value)
+{
   return YGWrapToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Overflow& value) {
+inline std::string toString(const yoga::Overflow &value)
+{
   return YGOverflowToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Display& value) {
+inline std::string toString(const yoga::Display &value)
+{
   return YGDisplayToString(yoga::unscopedEnum(value));
 }
 
-inline std::string toString(const yoga::Style::Length& length) {
+inline std::string toString(const yoga::Style::Length &length)
+{
   if (length.isUndefined()) {
     return "undefined";
   } else if (length.isAuto()) {
@@ -1433,7 +1388,8 @@ inline std::string toString(const yoga::Style::Length& length) {
   }
 }
 
-inline std::string toString(const yoga::Style::SizeLength& length) {
+inline std::string toString(const yoga::Style::SizeLength &length)
+{
   if (length.isUndefined()) {
     return "undefined";
   } else if (length.isAuto()) {
@@ -1453,7 +1409,8 @@ inline std::string toString(const yoga::Style::SizeLength& length) {
   }
 }
 
-inline std::string toString(const yoga::FloatOptional& value) {
+inline std::string toString(const yoga::FloatOptional &value)
+{
   if (value.isUndefined()) {
     return "undefined";
   }
@@ -1461,7 +1418,8 @@ inline std::string toString(const yoga::FloatOptional& value) {
   return std::to_string(value.unwrap());
 }
 
-inline std::string toString(const LayoutConformance& value) {
+inline std::string toString(const LayoutConformance &value)
+{
   switch (value) {
     case LayoutConformance::Strict:
       return "strict";
@@ -1470,24 +1428,26 @@ inline std::string toString(const LayoutConformance& value) {
   }
 }
 
-inline std::string toString(const std::array<Float, 16>& m) {
+inline std::string toString(const std::array<Float, 16> &m)
+{
   std::string result;
-  result += "[ " + std::to_string(m[0]) + " " + std::to_string(m[1]) + " " +
-      std::to_string(m[2]) + " " + std::to_string(m[3]) + " ]\n";
-  result += "[ " + std::to_string(m[4]) + " " + std::to_string(m[5]) + " " +
-      std::to_string(m[6]) + " " + std::to_string(m[7]) + " ]\n";
-  result += "[ " + std::to_string(m[8]) + " " + std::to_string(m[9]) + " " +
-      std::to_string(m[10]) + " " + std::to_string(m[11]) + " ]\n";
-  result += "[ " + std::to_string(m[12]) + " " + std::to_string(m[13]) + " " +
-      std::to_string(m[14]) + " " + std::to_string(m[15]) + " ]";
+  result += "[ " + std::to_string(m[0]) + " " + std::to_string(m[1]) + " " + std::to_string(m[2]) + " " +
+      std::to_string(m[3]) + " ]\n";
+  result += "[ " + std::to_string(m[4]) + " " + std::to_string(m[5]) + " " + std::to_string(m[6]) + " " +
+      std::to_string(m[7]) + " ]\n";
+  result += "[ " + std::to_string(m[8]) + " " + std::to_string(m[9]) + " " + std::to_string(m[10]) + " " +
+      std::to_string(m[11]) + " ]\n";
+  result += "[ " + std::to_string(m[12]) + " " + std::to_string(m[13]) + " " + std::to_string(m[14]) + " " +
+      std::to_string(m[15]) + " ]";
   return result;
 }
 
-inline std::string toString(const Transform& transform) {
+inline std::string toString(const Transform &transform)
+{
   std::string result = "[";
   bool first = true;
 
-  for (const auto& operation : transform.operations) {
+  for (const auto &operation : transform.operations) {
     if (!first) {
       result += ", ";
     }
@@ -1495,31 +1455,21 @@ inline std::string toString(const Transform& transform) {
 
     switch (operation.type) {
       case TransformOperationType::Perspective: {
-        result +=
-            "{\"perspective\": " + std::to_string(operation.x.value) + "}";
+        result += "{\"perspective\": " + std::to_string(operation.x.value) + "}";
         break;
       }
       case TransformOperationType::Rotate: {
-        if (operation.x.value != 0 && operation.y.value == 0 &&
-            operation.z.value == 0) {
-          result +=
-              R"({"rotateX": ")" + std::to_string(operation.x.value) + "rad\"}";
-        } else if (
-            operation.x.value == 0 && operation.y.value != 0 &&
-            operation.z.value == 0) {
-          result +=
-              R"({"rotateY": ")" + std::to_string(operation.y.value) + "rad\"}";
-        } else if (
-            operation.x.value == 0 && operation.y.value == 0 &&
-            operation.z.value != 0) {
-          result +=
-              R"({"rotateZ": ")" + std::to_string(operation.z.value) + "rad\"}";
+        if (operation.x.value != 0 && operation.y.value == 0 && operation.z.value == 0) {
+          result += R"({"rotateX": ")" + std::to_string(operation.x.value) + "rad\"}";
+        } else if (operation.x.value == 0 && operation.y.value != 0 && operation.z.value == 0) {
+          result += R"({"rotateY": ")" + std::to_string(operation.y.value) + "rad\"}";
+        } else if (operation.x.value == 0 && operation.y.value == 0 && operation.z.value != 0) {
+          result += R"({"rotateZ": ")" + std::to_string(operation.z.value) + "rad\"}";
         }
         break;
       }
       case TransformOperationType::Scale: {
-        if (operation.x.value == operation.y.value &&
-            operation.x.value == operation.z.value) {
+        if (operation.x.value == operation.y.value && operation.x.value == operation.z.value) {
           result += "{\"scale\": " + std::to_string(operation.x.value) + "}";
         } else if (operation.y.value == 1 && operation.z.value == 1) {
           result += "{\"scaleX\": " + std::to_string(operation.x.value) + "}";
@@ -1531,28 +1481,22 @@ inline std::string toString(const Transform& transform) {
         break;
       }
       case TransformOperationType::Translate: {
-        if (operation.x.value != 0 && operation.y.value != 0 &&
-            operation.z.value == 0) {
+        if (operation.x.value != 0 && operation.y.value != 0 && operation.z.value == 0) {
           result += "{\"translate\": [";
-          result += std::to_string(operation.x.value) + ", " +
-              std::to_string(operation.y.value);
+          result += std::to_string(operation.x.value) + ", " + std::to_string(operation.y.value);
           result += "]}";
         } else if (operation.x.value != 0 && operation.y.value == 0) {
-          result +=
-              "{\"translateX\": " + std::to_string(operation.x.value) + "}";
+          result += "{\"translateX\": " + std::to_string(operation.x.value) + "}";
         } else if (operation.x.value == 0 && operation.y.value != 0) {
-          result +=
-              "{\"translateY\": " + std::to_string(operation.y.value) + "}";
+          result += "{\"translateY\": " + std::to_string(operation.y.value) + "}";
         }
         break;
       }
       case TransformOperationType::Skew: {
         if (operation.x.value != 0 && operation.y.value == 0) {
-          result +=
-              R"({"skewX": ")" + std::to_string(operation.x.value) + "rad\"}";
+          result += R"({"skewX": ")" + std::to_string(operation.x.value) + "rad\"}";
         } else if (operation.x.value == 0 && operation.y.value != 0) {
-          result +=
-              R"({"skewY": ")" + std::to_string(operation.y.value) + "rad\"}";
+          result += R"({"skewY": ")" + std::to_string(operation.y.value) + "rad\"}";
         }
         break;
       }
@@ -1570,5 +1514,6 @@ inline std::string toString(const Transform& transform) {
   result += "]";
   return result;
 }
+#endif
 
 } // namespace facebook::react