react-native-tvos 0.85.3-0 → 0.86.0-0rc2

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

@@ -11,6 +11,7 @@
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
 #include <react/renderer/graphics/Point.h>
+#include <react/timing/primitives.h>
 
 namespace facebook::react {
 
@@ -53,9 +54,15 @@ struct BaseTouch {
 
   /*
    * The time in seconds when the touch occurred or when it was last mutated.
+   * @deprecated Use timeStamp instead.
    */
   Float timestamp{0.0f};
 
+  /*
+   * The time when the touch occurred.
+   */
+  HighResTimeStamp timeStamp{};
+
   /*
    * The particular implementation of `Hasher` and (especially) `Comparator`
    * make sense only when `Touch` object is used as a *key* in indexed

package/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -540,6 +540,14 @@ void BaseViewProps::setProp(
     VIEW_EVENT_CASE(PointerOverCapture);
     VIEW_EVENT_CASE(PointerOut);
     VIEW_EVENT_CASE(PointerOutCapture);
+    VIEW_EVENT_CASE(Click);
+    VIEW_EVENT_CASE(ClickCapture);
+    VIEW_EVENT_CASE(PointerDown);
+    VIEW_EVENT_CASE(PointerDownCapture);
+    VIEW_EVENT_CASE(PointerUp);
+    VIEW_EVENT_CASE(PointerUpCapture);
+    VIEW_EVENT_CASE(GotPointerCapture);
+    VIEW_EVENT_CASE(LostPointerCapture);
     VIEW_EVENT_CASE(MoveShouldSetResponder);
     VIEW_EVENT_CASE(MoveShouldSetResponderCapture);
     VIEW_EVENT_CASE(StartShouldSetResponder);

package/ReactCommon/react/renderer/components/view/PointerEvent.cpp

@@ -98,6 +98,8 @@ std::vector<DebugStringConvertibleObject> getDebugProps(
        .value = getDebugDescription(pointerEvent.isPrimary, options)},
       {.name = "button",
        .value = getDebugDescription(pointerEvent.button, options)},
+      {.name = "timeStamp",
+       .value = getDebugDescription(pointerEvent.timeStamp, options)},
   };
 }
 

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

@@ -11,6 +11,7 @@
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
 #include <react/renderer/graphics/Point.h>
+#include <react/timing/primitives.h>
 
 namespace facebook::react {
 
@@ -110,6 +111,10 @@ struct PointerEvent : public EventPayload {
    * was fired.
    */
   int button;
+  /*
+   * The time when the event occurred.
+   */
+  HighResTimeStamp timeStamp{};
 
   /*
    * EventPayload implementations

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

@@ -9,8 +9,6 @@
 
 #include <react/renderer/debug/DebugStringConvertible.h>
 
-#include <unordered_set>
-
 #include <react/renderer/components/view/Touch.h>
 
 namespace facebook::react {

package/ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp

@@ -42,26 +42,38 @@ static jsi::Value touchEventPayload(
   return object;
 }
 
+static HighResTimeStamp getTimestampFromTouchEvent(const TouchEvent& event) {
+  if (!event.changedTouches.empty()) {
+    const auto& firstChangedTouch = *event.changedTouches.begin();
+    return firstChangedTouch.timeStamp;
+  }
+  return HighResTimeStamp::now();
+}
+
 void TouchEventEmitter::dispatchTouchEvent(
     std::string type,
     TouchEvent event,
     RawEvent::Category category) const {
+  auto eventTimestamp = getTimestampFromTouchEvent(event);
   dispatchEvent(
       std::move(type),
       [event = std::move(event)](jsi::Runtime& runtime) {
         return touchEventPayload(runtime, event);
       },
-      category);
+      category,
+      eventTimestamp);
 }
 
 void TouchEventEmitter::dispatchPointerEvent(
     std::string type,
     PointerEvent event,
     RawEvent::Category category) const {
+  auto eventTimestamp = event.timeStamp;
   dispatchEvent(
       std::move(type),
       std::make_shared<PointerEvent>(std::move(event)),
-      category);
+      category,
+      eventTimestamp);
 }
 
 void TouchEventEmitter::onTouchStart(TouchEvent event) const {
@@ -70,10 +82,13 @@ void TouchEventEmitter::onTouchStart(TouchEvent event) const {
 }
 
 void TouchEventEmitter::onTouchMove(TouchEvent event) const {
+  auto eventTimestamp = getTimestampFromTouchEvent(event);
   dispatchUniqueEvent(
-      "touchMove", [event = std::move(event)](jsi::Runtime& runtime) {
+      "touchMove",
+      [event = std::move(event)](jsi::Runtime& runtime) {
         return touchEventPayload(runtime, event);
-      });
+      },
+      eventTimestamp);
 }
 
 void TouchEventEmitter::onTouchEnd(TouchEvent event) const {
@@ -101,8 +116,11 @@ void TouchEventEmitter::onPointerDown(PointerEvent event) const {
 }
 
 void TouchEventEmitter::onPointerMove(PointerEvent event) const {
+  auto eventTimestamp = event.timeStamp;
   dispatchUniqueEvent(
-      "pointerMove", std::make_shared<PointerEvent>(std::move(event)));
+      "pointerMove",
+      std::make_shared<PointerEvent>(std::move(event)),
+      eventTimestamp);
 }
 
 void TouchEventEmitter::onPointerUp(PointerEvent event) const {

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

@@ -13,6 +13,7 @@
 #include <react/renderer/core/LayoutMetrics.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
+#include <react/timing/primitives.h>
 
 namespace facebook::react {
 

package/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -899,6 +899,11 @@ yoga::Config& YogaLayoutableShadowNode::initializeYogaConfig(
     YGConfigSetErrata(&config, YGConfigGetErrata(previousConfig));
   }
 
+  if (ReactNativeFeatureFlags::fixYogaFlexBasisFitContentInMainAxis()) {
+    YGConfigSetExperimentalFeatureEnabled(
+        &config, YGExperimentalFeatureFixFlexBasisFitContent, true);
+  }
+
   return config;
 }
 

package/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp

@@ -147,35 +147,40 @@ void YogaStylableProps::setProp(
     REBUILD_FIELD_SWITCH_CASE_YSP(flexBasis, setFlexBasis);
     REBUILD_FIELD_SWITCH_CASE2(positionType, setPositionType, "position");
     REBUILD_FIELD_YG_GUTTER(gap, setGap, "rowGap", "columnGap", "gap");
-    REBUILD_FIELD_SWITCH_CASE_YSP(aspectRatio, setAspectRatio);
-    REBUILD_FIELD_SWITCH_CASE_YSP(boxSizing, setBoxSizing);
-    REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height");
-    REBUILD_FIELD_YG_DIMENSION(
-        minDimension, setMinDimension, "minWidth", "minHeight");
-    REBUILD_FIELD_YG_DIMENSION(
-        maxDimension, setMaxDimension, "maxWidth", "maxHeight");
-    REBUILD_FIELD_YG_EDGES_POSITION();
-    REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", "");
-    REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", "");
-    REBUILD_FIELD_YG_EDGES(border, setBorder, "border", "Width");
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("aspectRatio"): {
+      yogaStyle.setAspectRatio(
+          value.hasValue() ? convertAspectRatio(context, value)
+                           : ygDefaults.aspectRatio());
+      return;
+    }
+      REBUILD_FIELD_SWITCH_CASE_YSP(boxSizing, setBoxSizing);
+      REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height");
+      REBUILD_FIELD_YG_DIMENSION(
+          minDimension, setMinDimension, "minWidth", "minHeight");
+      REBUILD_FIELD_YG_DIMENSION(
+          maxDimension, setMaxDimension, "maxWidth", "maxHeight");
+      REBUILD_FIELD_YG_EDGES_POSITION();
+      REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", "");
+      REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", "");
+      REBUILD_FIELD_YG_EDGES(border, setBorder, "border", "Width");
 
-    // Aliases
-    RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd");
-    RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart");
-    RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd");
-    RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart");
-    RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline");
-    RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart");
-    RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd");
-    RAW_SET_PROP_SWITCH_CASE(marginBlock, "marginBlock");
-    RAW_SET_PROP_SWITCH_CASE(marginBlockStart, "marginBlockStart");
-    RAW_SET_PROP_SWITCH_CASE(marginBlockEnd, "marginBlockEnd");
-    RAW_SET_PROP_SWITCH_CASE(paddingInline, "paddingInline");
-    RAW_SET_PROP_SWITCH_CASE(paddingInlineStart, "paddingInlineStart");
-    RAW_SET_PROP_SWITCH_CASE(paddingInlineEnd, "paddingInlineEnd");
-    RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock");
-    RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart");
-    RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd");
+      // Aliases
+      RAW_SET_PROP_SWITCH_CASE(insetBlockEnd, "insetBlockEnd");
+      RAW_SET_PROP_SWITCH_CASE(insetBlockStart, "insetBlockStart");
+      RAW_SET_PROP_SWITCH_CASE(insetInlineEnd, "insetInlineEnd");
+      RAW_SET_PROP_SWITCH_CASE(insetInlineStart, "insetInlineStart");
+      RAW_SET_PROP_SWITCH_CASE(marginInline, "marginInline");
+      RAW_SET_PROP_SWITCH_CASE(marginInlineStart, "marginInlineStart");
+      RAW_SET_PROP_SWITCH_CASE(marginInlineEnd, "marginInlineEnd");
+      RAW_SET_PROP_SWITCH_CASE(marginBlock, "marginBlock");
+      RAW_SET_PROP_SWITCH_CASE(marginBlockStart, "marginBlockStart");
+      RAW_SET_PROP_SWITCH_CASE(marginBlockEnd, "marginBlockEnd");
+      RAW_SET_PROP_SWITCH_CASE(paddingInline, "paddingInline");
+      RAW_SET_PROP_SWITCH_CASE(paddingInlineStart, "paddingInlineStart");
+      RAW_SET_PROP_SWITCH_CASE(paddingInlineEnd, "paddingInlineEnd");
+      RAW_SET_PROP_SWITCH_CASE(paddingBlock, "paddingBlock");
+      RAW_SET_PROP_SWITCH_CASE(paddingBlockStart, "paddingBlockStart");
+      RAW_SET_PROP_SWITCH_CASE(paddingBlockEnd, "paddingBlockEnd");
   }
 }
 

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

@@ -7,7 +7,6 @@
 
 #pragma once
 
-#include <folly/dynamic.h>
 #include <glog/logging.h>
 #include <react/debug/react_native_assert.h>
 #include <react/debug/react_native_expect.h>

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

@@ -22,6 +22,7 @@
 #include <react/renderer/css/CSSTransform.h>
 #include <react/renderer/css/CSSTransformOrigin.h>
 #include <react/renderer/css/CSSValueParser.h>
+#include <react/renderer/debug/DebugStringConvertible.h>
 #include <react/renderer/debug/flags.h>
 #include <react/renderer/graphics/BackgroundPosition.h>
 #include <react/renderer/graphics/BackgroundRepeat.h>
@@ -133,6 +134,8 @@ inline DisplayType displayTypeFromYGDisplay(YGDisplay display)
       return DisplayType::Contents;
     case YGDisplayFlex:
       return DisplayType::Flex;
+    case YGDisplayGrid:
+      return DisplayType::Grid;
   }
 }
 
@@ -498,6 +501,23 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
   result = value.hasType<float>() ? yoga::FloatOptional((float)value) : yoga::FloatOptional();
 }
 
+inline yoga::FloatOptional convertAspectRatio(const PropsParserContext & /*context*/, const RawValue &value)
+{
+  if (value.hasType<float>()) {
+    return yoga::FloatOptional((float)value);
+  }
+  if (ReactNativeFeatureFlags::enableNativeCSSParsing() && value.hasType<std::string>()) {
+    auto ratio = parseCSSProperty<CSSRatio>((std::string)value);
+    if (std::holds_alternative<CSSRatio>(ratio)) {
+      auto r = std::get<CSSRatio>(ratio);
+      if (!r.isDegenerate()) {
+        return yoga::FloatOptional(r.numerator / r.denominator);
+      }
+    }
+  }
+  return {};
+}
+
 inline std::optional<Float> toRadians(const RawValue &value)
 {
   if (value.hasType<Float>()) {
@@ -1573,9 +1593,9 @@ inline std::string toString(const std::array<float, N> vec)
 
   s.append("{");
   for (size_t i = 0; i < N - 1; i++) {
-    s.append(std::to_string(vec[i]) + ", ");
+    s.append(toString(vec[i]) + ", ");
   }
-  s.append(std::to_string(vec[N - 1]));
+  s.append(toString(vec[N - 1]));
   s.append("}");
 
   return s;
@@ -1628,9 +1648,9 @@ inline std::string toString(const yoga::Style::Length &length)
   } else if (length.isAuto()) {
     return "auto";
   } else if (length.isPoints()) {
-    return std::to_string(length.value().unwrap());
+    return toString(length.value().unwrap());
   } else if (length.isPercent()) {
-    return std::to_string(length.value().unwrap()) + "%";
+    return toString(length.value().unwrap()) + "%";
   } else {
     return "unknown";
   }
@@ -1643,9 +1663,9 @@ inline std::string toString(const yoga::Style::SizeLength &length)
   } else if (length.isAuto()) {
     return "auto";
   } else if (length.isPoints()) {
-    return std::to_string(length.value().unwrap());
+    return toString(length.value().unwrap());
   } else if (length.isPercent()) {
-    return std::to_string(length.value().unwrap()) + "%";
+    return toString(length.value().unwrap()) + "%";
   } else if (length.isMaxContent()) {
     return "max-content";
   } else if (length.isFitContent()) {
@@ -1663,7 +1683,7 @@ inline std::string toString(const yoga::FloatOptional &value)
     return "undefined";
   }
 
-  return std::to_string(value.unwrap());
+  return toString(value.unwrap());
 }
 
 inline std::string toString(const LayoutConformance &value)
@@ -1679,14 +1699,10 @@ inline std::string toString(const LayoutConformance &value)
 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 += "[ " + toString(m[0]) + " " + toString(m[1]) + " " + toString(m[2]) + " " + toString(m[3]) + " ]\n";
+  result += "[ " + toString(m[4]) + " " + toString(m[5]) + " " + toString(m[6]) + " " + toString(m[7]) + " ]\n";
+  result += "[ " + toString(m[8]) + " " + toString(m[9]) + " " + toString(m[10]) + " " + toString(m[11]) + " ]\n";
+  result += "[ " + toString(m[12]) + " " + toString(m[13]) + " " + toString(m[14]) + " " + toString(m[15]) + " ]";
   return result;
 }
 
@@ -1703,48 +1719,48 @@ inline std::string toString(const Transform &transform)
 
     switch (operation.type) {
       case TransformOperationType::Perspective: {
-        result += "{\"perspective\": " + std::to_string(operation.x.value) + "}";
+        result += "{\"perspective\": " + toString(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\"}";
+          result += R"({"rotateX": ")" + toString(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\"}";
+          result += R"({"rotateY": ")" + toString(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\"}";
+          result += R"({"rotateZ": ")" + toString(operation.z.value) + "rad\"}";
         }
         break;
       }
       case TransformOperationType::Scale: {
         if (operation.x.value == operation.y.value && operation.x.value == operation.z.value) {
-          result += "{\"scale\": " + std::to_string(operation.x.value) + "}";
+          result += "{\"scale\": " + toString(operation.x.value) + "}";
         } else if (operation.y.value == 1 && operation.z.value == 1) {
-          result += "{\"scaleX\": " + std::to_string(operation.x.value) + "}";
+          result += "{\"scaleX\": " + toString(operation.x.value) + "}";
         } else if (operation.x.value == 1 && operation.z.value == 1) {
-          result += "{\"scaleY\": " + std::to_string(operation.y.value) + "}";
+          result += "{\"scaleY\": " + toString(operation.y.value) + "}";
         } else if (operation.x.value == 1 && operation.y.value == 1) {
-          result += "{\"scaleZ\": " + std::to_string(operation.z.value) + "}";
+          result += "{\"scaleZ\": " + toString(operation.z.value) + "}";
         }
         break;
       }
       case TransformOperationType::Translate: {
         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 += toString(operation.x.value) + ", " + toString(operation.y.value);
           result += "]}";
         } else if (operation.x.value != 0 && operation.y.value == 0) {
-          result += "{\"translateX\": " + std::to_string(operation.x.value) + "}";
+          result += "{\"translateX\": " + toString(operation.x.value) + "}";
         } else if (operation.x.value == 0 && operation.y.value != 0) {
-          result += "{\"translateY\": " + std::to_string(operation.y.value) + "}";
+          result += "{\"translateY\": " + toString(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": ")" + toString(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": ")" + toString(operation.y.value) + "rad\"}";
         }
         break;
       }

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

@@ -180,7 +180,24 @@ HostPlatformViewProps::HostPlatformViewProps(
                     rawProps,
                     "nextFocusUp",
                     sourceProps.nextFocusUp,
-                    {})) {}
+                    {})) {
+  if (!ReactNativeFeatureFlags::enableCppPropsIteratorSetter()) {
+    if (ReactNativeFeatureFlags::enableNativeViewPropTransformations()) {
+      // tabIndex -> focusable
+      auto* tabIndexValue = rawProps.at("tabIndex", nullptr, nullptr);
+      if (tabIndexValue != nullptr) {
+        if (tabIndexValue->hasValue()) {
+          int tabIndex = 0;
+          fromRawValue(context, *tabIndexValue, tabIndex);
+          focusable = tabIndex == 0;
+        } else {
+          focusable = {};
+        }
+      }
+    }
+  }
+}
+
 #define VIEW_EVENT_CASE(eventType)                      \
   case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): { \
     const auto offset = ViewEvents::Offset::eventType;  \
@@ -220,6 +237,19 @@ void HostPlatformViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(nextFocusLeft);
     RAW_SET_PROP_SWITCH_CASE_BASIC(nextFocusRight);
     RAW_SET_PROP_SWITCH_CASE_BASIC(nextFocusUp);
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("tabIndex"): {
+      if (!ReactNativeFeatureFlags::enableNativeViewPropTransformations()) {
+        return;
+      }
+      if (value.hasValue()) {
+        int tabIndex = 0;
+        fromRawValue(context, value, tabIndex);
+        focusable = tabIndex == 0;
+      } else {
+        focusable = defaults.focusable;
+      }
+      return;
+    }
   }
 }
 
@@ -389,7 +419,7 @@ static void updateBorderStyleProps(
           break;
       }
     } else {
-      result["borderStyle"] = NULL;
+      result["borderStyle"] = folly::dynamic(nullptr);
     }
   }
 }
@@ -460,8 +490,25 @@ inline static void updateNativeDrawableProp(
       nativeDrawableResult["rippleRadius"] =
           nativeDrawableValue.ripple.rippleRadius.value();
     }
-    if (nativeDrawableValue.ripple.color.has_value()) {
-      nativeDrawableResult["color"] = nativeDrawableValue.ripple.color.value();
+    if (nativeDrawableValue.ripple.color.has_value() ||
+        nativeDrawableValue.ripple.colorResourcePaths.has_value()) {
+      if (nativeDrawableValue.ripple.colorResourcePaths.has_value()) {
+        folly::dynamic resourcePaths = folly::dynamic::array();
+        for (const auto& path :
+             nativeDrawableValue.ripple.colorResourcePaths.value()) {
+          resourcePaths.push_back(path);
+        }
+        folly::dynamic platformColorMap = folly::dynamic::object();
+        platformColorMap["resource_paths"] = resourcePaths;
+        nativeDrawableResult["color"] = platformColorMap;
+      } else {
+        nativeDrawableResult["color"] =
+            toAndroidRepr(nativeDrawableValue.ripple.color.value());
+      }
+      if (nativeDrawableValue.ripple.alpha.has_value()) {
+        nativeDrawableResult["alpha"] =
+            nativeDrawableValue.ripple.alpha.value();
+      }
     }
     nativeDrawableResult["borderless"] = nativeDrawableValue.ripple.borderless;
   } else {
@@ -633,7 +680,8 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
   }
 
   if (zIndex != oldProps->zIndex) {
-    result["zIndex"] = zIndex.value();
+    result["zIndex"] =
+        zIndex.has_value() ? zIndex.value() : folly::dynamic(nullptr);
   }
 
   if (boxShadow != oldProps->boxShadow) {

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

@@ -10,6 +10,7 @@
 #include <glog/logging.h>
 #include <react/debug/react_native_expect.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/graphicsConversions.h>
 #include <react/renderer/graphics/Float.h>
 #include <unordered_map>
 
@@ -22,14 +23,16 @@ struct NativeDrawable {
   };
 
   struct Ripple {
-    std::optional<int32_t> color{};
+    std::optional<SharedColor> color{};
+    std::optional<std::vector<std::string>> colorResourcePaths{};
     std::optional<Float> rippleRadius{};
     bool borderless{false};
+    std::optional<Float> alpha{};
 
     bool operator==(const Ripple &rhs) const
     {
-      return std::tie(this->color, this->borderless, this->rippleRadius) ==
-          std::tie(rhs.color, rhs.borderless, rhs.rippleRadius);
+      return std::tie(this->color, this->colorResourcePaths, this->borderless, this->rippleRadius, this->alpha) ==
+          std::tie(rhs.color, rhs.colorResourcePaths, rhs.borderless, rhs.rippleRadius, rhs.alpha);
     }
   };
 
@@ -59,8 +62,7 @@ struct NativeDrawable {
   ~NativeDrawable() = default;
 };
 
-static inline void
-fromRawValue(const PropsParserContext & /*context*/, const RawValue &rawValue, NativeDrawable &result)
+static inline void fromRawValue(const PropsParserContext &context, const RawValue &rawValue, NativeDrawable &result)
 {
   auto map = (std::unordered_map<std::string, RawValue>)rawValue;
 
@@ -73,24 +75,53 @@ fromRawValue(const PropsParserContext & /*context*/, const RawValue &rawValue, N
     react_native_expect(attrIterator != map.end() && attrIterator->second.hasType<std::string>());
 
     result = NativeDrawable{
-        (std::string)attrIterator->second,
-        {},
-        NativeDrawable::Kind::ThemeAttr,
+        .themeAttr = (std::string)attrIterator->second,
+        .ripple = {},
+        .kind = NativeDrawable::Kind::ThemeAttr,
     };
   } else if (type == "RippleAndroid") {
     auto color = map.find("color");
     auto borderless = map.find("borderless");
     auto rippleRadius = map.find("rippleRadius");
+    auto alpha = map.find("alpha");
+
+    std::optional<SharedColor> parsedColor{};
+    std::optional<std::vector<std::string>> parsedColorResourcePaths{};
+    if (color != map.end()) {
+      if (color->second.hasType<std::unordered_map<std::string, std::vector<std::string>>>()) {
+        auto colorMap = (std::unordered_map<std::string, std::vector<std::string>>)color->second;
+        auto pathsIt = colorMap.find("resource_paths");
+        if (pathsIt != colorMap.end()) {
+          parsedColorResourcePaths = pathsIt->second;
+        }
+      } else {
+        SharedColor resolved;
+        fromRawValue(context, color->second, resolved);
+        if (resolved) {
+          parsedColor = resolved;
+        }
+      }
+    }
+
+    std::optional<Float> parsedAlpha{};
+    if (alpha != map.end() && alpha->second.hasType<Float>()) {
+      parsedAlpha = (Float)alpha->second;
+    }
 
     result = NativeDrawable{
-        std::string{},
-        NativeDrawable::Ripple{
-            color != map.end() && color->second.hasType<int32_t>() ? (int32_t)color->second : std::optional<int32_t>{},
-            rippleRadius != map.end() && rippleRadius->second.hasType<Float>() ? (Float)rippleRadius->second
-                                                                               : std::optional<Float>{},
-            borderless != map.end() && borderless->second.hasType<bool>() ? (bool)borderless->second : false,
-        },
-        NativeDrawable::Kind::Ripple,
+        .themeAttr = std::string{},
+        .ripple =
+            NativeDrawable::Ripple{
+                .color = parsedColor,
+                .colorResourcePaths = parsedColorResourcePaths,
+                .rippleRadius = rippleRadius != map.end() && rippleRadius->second.hasType<Float>()
+                    ? (Float)rippleRadius->second
+                    : std::optional<Float>{},
+                .borderless =
+                    borderless != map.end() && borderless->second.hasType<bool>() ? (bool)borderless->second : false,
+                .alpha = parsedAlpha,
+            },
+        .kind = NativeDrawable::Kind::Ripple,
     };
   } else {
     LOG(ERROR) << "Unknown native drawable type: " << type;

package/ReactCommon/react/renderer/components/view/platform/cxx/react/renderer/components/view/HostPlatformViewTraitsInitializer.h

@@ -12,12 +12,12 @@
 
 namespace facebook::react::HostPlatformViewTraitsInitializer {
 
-inline bool formsStackingContext(const ViewProps &props)
+inline bool formsStackingContext(const ViewProps & /*props*/)
 {
   return false;
 }
 
-inline bool formsView(const ViewProps &props)
+inline bool formsView(const ViewProps & /*props*/)
 {
   return false;
 }

package/ReactCommon/react/renderer/{graphics/DoubleConversions.h → components/view/platform/tvos/react/renderer/components/view/HostPlatformTouch.h}

@@ -7,10 +7,8 @@
 
 #pragma once
 
-#include <string>
+#include <react/renderer/components/view/BaseTouch.h>
 
 namespace facebook::react {
-
-std::string toString(double doubleValue, char suffix);
-
+using HostPlatformTouch = BaseTouch;
 } // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/tvos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/components/view/BaseViewEventEmitter.h>
+
+namespace facebook::react {
+using HostPlatformViewEventEmitter = BaseViewEventEmitter;
+} // namespace facebook::react