react-native 0.68.1 → 0.69.0-rc.0

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

@@ -21,8 +21,9 @@ namespace react {
 ViewProps::ViewProps(
     const PropsParserContext &context,
     ViewProps const &sourceProps,
-    RawProps const &rawProps)
-    : YogaStylableProps(context, sourceProps, rawProps),
+    RawProps const &rawProps,
+    bool shouldSetRawProps)
+    : YogaStylableProps(context, sourceProps, rawProps, shouldSetRawProps),
       AccessibilityProps(context, sourceProps, rawProps),
       opacity(convertRawProp(
           context,
@@ -125,24 +126,7 @@ ViewProps::ViewProps(
           "onLayout",
           sourceProps.onLayout,
           {})),
-      pointerEnter(convertRawProp(
-          context,
-          rawProps,
-          "pointerenter",
-          sourceProps.pointerEnter,
-          {})),
-      pointerLeave(convertRawProp(
-          context,
-          rawProps,
-          "pointerleave",
-          sourceProps.pointerLeave,
-          {})),
-      pointerMove(convertRawProp(
-          context,
-          rawProps,
-          "pointermove",
-          sourceProps.pointerMove,
-          {})),
+      events(convertRawProp(context, rawProps, sourceProps.events, {})),
       collapsable(convertRawProp(
           context,
           rawProps,
@@ -154,13 +138,53 @@ ViewProps::ViewProps(
           rawProps,
           "removeClippedSubviews",
           sourceProps.removeClippedSubviews,
-          false)),
+          false))
+#ifdef ANDROID
+      ,
       elevation(convertRawProp(
           context,
           rawProps,
           "elevation",
           sourceProps.elevation,
-          {})){};
+          {})),
+      nativeBackground(convertRawProp(
+          context,
+          rawProps,
+          "nativeBackgroundAndroid",
+          sourceProps.nativeBackground,
+          {})),
+      nativeForeground(convertRawProp(
+          context,
+          rawProps,
+          "nativeForegroundAndroid",
+          sourceProps.nativeForeground,
+          {})),
+      focusable(convertRawProp(
+          context,
+          rawProps,
+          "focusable",
+          sourceProps.focusable,
+          {})),
+      hasTVPreferredFocus(convertRawProp(
+          context,
+          rawProps,
+          "hasTVPreferredFocus",
+          sourceProps.hasTVPreferredFocus,
+          {})),
+      needsOffscreenAlphaCompositing(convertRawProp(
+          context,
+          rawProps,
+          "needsOffscreenAlphaCompositing",
+          sourceProps.needsOffscreenAlphaCompositing,
+          {})),
+      renderToHardwareTextureAndroid(convertRawProp(
+          context,
+          rawProps,
+          "renderToHardwareTextureAndroid",
+          sourceProps.renderToHardwareTextureAndroid,
+          {}))
+#endif
+          {};
 
 #pragma mark - Convenience Methods
 

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

@@ -17,6 +17,8 @@
 #include <react/renderer/graphics/Geometry.h>
 #include <react/renderer/graphics/Transform.h>
 
+#include <optional>
+
 namespace facebook {
 namespace react {
 
@@ -30,7 +32,8 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
   ViewProps(
       const PropsParserContext &context,
       ViewProps const &sourceProps,
-      RawProps const &rawProps);
+      RawProps const &rawProps,
+      bool shouldSetRawProps = true);
 
 #pragma mark - Props
 
@@ -54,18 +57,14 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
   Transform transform{};
   BackfaceVisibility backfaceVisibility{};
   bool shouldRasterize{};
-  butter::optional<int> zIndex{};
+  std::optional<int> zIndex{};
 
   // Events
   PointerEventsMode pointerEvents{};
   EdgeInsets hitSlop{};
   bool onLayout{};
 
-  bool pointerEnter{};
-
-  bool pointerLeave{};
-
-  bool pointerMove{};
+  ViewEvents events{};
 
   bool collapsable{true};
 
@@ -73,6 +72,18 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
 
   Float elevation{}; /* Android-only */
 
+#ifdef ANDROID
+
+  std::optional<NativeDrawable> nativeBackground{};
+  std::optional<NativeDrawable> nativeForeground{};
+
+  bool focusable{false};
+  bool hasTVPreferredFocus{false};
+  bool needsOffscreenAlphaCompositing{false};
+  bool renderToHardwareTextureAndroid{false};
+
+#endif
+
 #pragma mark - Convenience Methods
 
   BorderMetrics resolveBorderMetrics(LayoutMetrics const &layoutMetrics) const;

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

@@ -44,10 +44,12 @@ static inline void interpolateViewProps(
   // mounting layer. Once we can remove this, we should change `rawProps` to
   // be const again.
 #ifdef ANDROID
-  interpolatedProps->rawProps["opacity"] = interpolatedProps->opacity;
+  if (!interpolatedProps->rawProps.isNull()) {
+    interpolatedProps->rawProps["opacity"] = interpolatedProps->opacity;
 
-  interpolatedProps->rawProps["transform"] =
-      (folly::dynamic)interpolatedProps->transform;
+    interpolatedProps->rawProps["transform"] =
+        (folly::dynamic)interpolatedProps->transform;
+  }
 #endif
 }
 

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

@@ -6,6 +6,7 @@
  */
 
 #include "ViewShadowNode.h"
+#include <react/config/ReactNativeConfig.h>
 #include <react/renderer/components/view/primitives.h>
 
 namespace facebook {
@@ -13,6 +14,37 @@ namespace react {
 
 char const ViewComponentName[] = "View";
 
+static inline bool keepRawValuesInViewProps(PropsParserContext const &context) {
+  static bool shouldUseRawProps = true;
+
+#ifdef ANDROID
+  static bool initialized = false;
+
+  if (!initialized) {
+    auto config =
+        context.contextContainer.find<std::shared_ptr<const ReactNativeConfig>>(
+            "ReactNativeConfig");
+    if (config.has_value()) {
+      initialized = true;
+      shouldUseRawProps = !config.value()->getBool(
+          "react_native_new_architecture:use_mapbuffer_for_viewprops");
+    }
+  }
+#endif
+
+  return shouldUseRawProps;
+}
+
+ViewShadowNodeProps::ViewShadowNodeProps(
+    PropsParserContext const &context,
+    ViewShadowNodeProps const &sourceProps,
+    RawProps const &rawProps)
+    : ViewProps(
+          context,
+          sourceProps,
+          rawProps,
+          keepRawValuesInViewProps(context)){};
+
 ViewShadowNode::ViewShadowNode(
     ShadowNodeFragment const &fragment,
     ShadowNodeFamily::Shared const &family,
@@ -35,7 +67,6 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.pointerEvents == PointerEventsMode::None ||
       !viewProps.nativeId.empty() || viewProps.accessible ||
       viewProps.opacity != 1.0 || viewProps.transform != Transform{} ||
-      viewProps.elevation != 0 ||
       (viewProps.zIndex.has_value() &&
        viewProps.yogaStyle.positionType() != YGPositionTypeStatic) ||
       viewProps.yogaStyle.display() == YGDisplayNone ||
@@ -46,13 +77,25 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.importantForAccessibility != ImportantForAccessibility::Auto ||
       viewProps.removeClippedSubviews;
 
+#ifdef ANDROID
+  formsStackingContext = formsStackingContext || viewProps.elevation != 0;
+#endif
+
   bool formsView = formsStackingContext ||
       isColorMeaningful(viewProps.backgroundColor) ||
-      isColorMeaningful(viewProps.foregroundColor) || viewProps.pointerEnter ||
-      viewProps.pointerLeave || viewProps.pointerMove ||
+      isColorMeaningful(viewProps.foregroundColor) ||
+      viewProps.events.bits.any() ||
       !(viewProps.yogaStyle.border() == YGStyle::Edges{}) ||
       !viewProps.testId.empty();
 
+#ifdef ANDROID
+  formsView = formsView || viewProps.nativeBackground.has_value() ||
+      viewProps.nativeForeground.has_value() || viewProps.focusable ||
+      viewProps.hasTVPreferredFocus ||
+      viewProps.needsOffscreenAlphaCompositing ||
+      viewProps.renderToHardwareTextureAndroid;
+#endif
+
   if (formsView) {
     traits_.set(ShadowNodeTraits::Trait::FormsView);
   } else {

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

@@ -15,12 +15,24 @@ namespace react {
 
 extern const char ViewComponentName[];
 
+/**
+ * Implementation of the ViewProps that propagates feature flag.
+ */
+class ViewShadowNodeProps final : public ViewProps {
+ public:
+  ViewShadowNodeProps() = default;
+  ViewShadowNodeProps(
+      const PropsParserContext &context,
+      ViewShadowNodeProps const &sourceProps,
+      RawProps const &rawProps);
+};
+
 /*
  * `ShadowNode` for <View> component.
  */
 class ViewShadowNode final : public ConcreteViewShadowNode<
                                  ViewComponentName,
-                                 ViewProps,
+                                 ViewShadowNodeProps,
                                  ViewEventEmitter> {
  public:
   static ShadowNodeTraits BaseTraits() {

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

@@ -479,7 +479,6 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
   react_native_assert(!yogaNode_.isDirty());
 
   auto contentFrame = Rect{};
-
   for (auto childYogaNode : yogaNode_.getChildren()) {
     auto &childNode =
         *static_cast<YogaLayoutableShadowNode *>(childYogaNode->getContext());
@@ -521,24 +520,36 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
 
     auto layoutMetricsWithOverflowInset = childNode.getLayoutMetrics();
     if (layoutMetricsWithOverflowInset.displayType != DisplayType::None) {
+      // The contentFrame should always union with existing child node layout +
+      // overflowInset. The transform may in a deferred animation and not
+      // applied yet.
       contentFrame.unionInPlace(insetBy(
           layoutMetricsWithOverflowInset.frame,
           layoutMetricsWithOverflowInset.overflowInset));
+
+      auto childTransform = childNode.getTransform();
+      if (childTransform != Transform::Identity()) {
+        // The child node's transform matrix will affect the parent node's
+        // contentFrame. We need to union with child node's after transform
+        // layout here.
+        contentFrame.unionInPlace(insetBy(
+            layoutMetricsWithOverflowInset.frame * childTransform,
+            layoutMetricsWithOverflowInset.overflowInset * childTransform));
+      }
     }
   }
 
   if (yogaNode_.getStyle().overflow() == YGOverflowVisible) {
-    auto transform = getTransform();
-    auto transformedContentFrame = contentFrame;
-    if (Transform::Identity() != transform) {
-      // When animation uses native driver, Yoga has no knowledge of the
-      // animation. In case the content goes out from current container, we need
-      // to union the content frame with its transformed frame.
-      transformedContentFrame = contentFrame * getTransform();
-      transformedContentFrame.unionInPlace(contentFrame);
-    }
+    // Note that the parent node's overflow layout is NOT affected by its
+    // transform matrix. That transform matrix is applied on the parent node as
+    // well as all of its child nodes, which won't cause changes on the
+    // overflowInset values. A special note on the scale transform -- the scaled
+    // layout may look like it's causing overflowInset changes, but it's purely
+    // cosmetic and will be handled by pixel density conversion logic later when
+    // render the view. The actual overflowInset value is not changed as if the
+    // transform is not happening here.
     layoutMetrics_.overflowInset =
-        calculateOverflowInset(layoutMetrics_.frame, transformedContentFrame);
+        calculateOverflowInset(layoutMetrics_.frame, contentFrame);
   } else {
     layoutMetrics_.overflowInset = {};
   }
@@ -690,44 +701,44 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
   auto &props = const_cast<ViewProps &>(typedCasting);
 
   // Swap border node values, borderRadii, borderColors and borderStyles.
-  if (props.borderRadii.topLeft.hasValue()) {
+  if (props.borderRadii.topLeft.has_value()) {
     props.borderRadii.topStart = props.borderRadii.topLeft;
-    props.borderRadii.topLeft.clear();
+    props.borderRadii.topLeft.reset();
   }
 
-  if (props.borderRadii.bottomLeft.hasValue()) {
+  if (props.borderRadii.bottomLeft.has_value()) {
     props.borderRadii.bottomStart = props.borderRadii.bottomLeft;
-    props.borderRadii.bottomLeft.clear();
+    props.borderRadii.bottomLeft.reset();
   }
 
-  if (props.borderRadii.topRight.hasValue()) {
+  if (props.borderRadii.topRight.has_value()) {
     props.borderRadii.topEnd = props.borderRadii.topRight;
-    props.borderRadii.topRight.clear();
+    props.borderRadii.topRight.reset();
   }
 
-  if (props.borderRadii.bottomRight.hasValue()) {
+  if (props.borderRadii.bottomRight.has_value()) {
     props.borderRadii.bottomEnd = props.borderRadii.bottomRight;
-    props.borderRadii.bottomRight.clear();
+    props.borderRadii.bottomRight.reset();
   }
 
-  if (props.borderColors.left.hasValue()) {
+  if (props.borderColors.left.has_value()) {
     props.borderColors.start = props.borderColors.left;
-    props.borderColors.left.clear();
+    props.borderColors.left.reset();
   }
 
-  if (props.borderColors.right.hasValue()) {
+  if (props.borderColors.right.has_value()) {
     props.borderColors.end = props.borderColors.right;
-    props.borderColors.right.clear();
+    props.borderColors.right.reset();
   }
 
-  if (props.borderStyles.left.hasValue()) {
+  if (props.borderStyles.left.has_value()) {
     props.borderStyles.start = props.borderStyles.left;
-    props.borderStyles.left.clear();
+    props.borderStyles.left.reset();
   }
 
-  if (props.borderStyles.right.hasValue()) {
+  if (props.borderStyles.right.has_value()) {
     props.borderStyles.end = props.borderStyles.right;
-    props.borderStyles.right.clear();
+    props.borderStyles.right.reset();
   }
 
   YGStyle::Edges const &border = props.yogaStyle.border();

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

@@ -22,8 +22,9 @@ namespace react {
 YogaStylableProps::YogaStylableProps(
     const PropsParserContext &context,
     YogaStylableProps const &sourceProps,
-    RawProps const &rawProps)
-    : Props(context, sourceProps, rawProps),
+    RawProps const &rawProps,
+    bool shouldSetRawProps)
+    : Props(context, sourceProps, rawProps, shouldSetRawProps),
       yogaStyle(convertRawProp(context, rawProps, sourceProps.yogaStyle)){};
 
 #pragma mark - DebugStringConvertible

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

@@ -22,7 +22,8 @@ class YogaStylableProps : public Props {
   YogaStylableProps(
       const PropsParserContext &context,
       YogaStylableProps const &sourceProps,
-      RawProps const &rawProps);
+      RawProps const &rawProps,
+      bool shouldSetRawProps = true);
 
 #pragma mark - Props
 

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

@@ -263,5 +263,38 @@ inline void fromRawValue(
   }
 }
 
+inline void fromRawValue(
+    const PropsParserContext &context,
+    const RawValue &value,
+    AccessibilityLabelledBy &result) {
+  if (value.hasType<std::string>()) {
+    result.value.push_back((std::string)value);
+  } else if (value.hasType<std::vector<std::string>>()) {
+    result.value = (std::vector<std::string>)value;
+  }
+}
+
+inline void fromRawValue(
+    const PropsParserContext &context,
+    const RawValue &value,
+    AccessibilityLiveRegion &result) {
+  react_native_assert(value.hasType<std::string>());
+  if (value.hasType<std::string>()) {
+    auto string = (std::string)value;
+    if (string == "none") {
+      result = AccessibilityLiveRegion::None;
+    } else if (string == "polite") {
+      result = AccessibilityLiveRegion::Polite;
+    } else if (string == "assertive") {
+      result = AccessibilityLiveRegion::Assertive;
+    } else {
+      LOG(ERROR) << "Unsupported AccessibilityLiveRegion value: " << string;
+      react_native_assert(false);
+    }
+  } else {
+    LOG(ERROR) << "Unsupported AccessibilityLiveRegion type";
+  }
+}
+
 } // namespace react
 } // namespace facebook

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

@@ -8,7 +8,6 @@
 #pragma once
 
 #include <butter/map.h>
-#include <butter/optional.h>
 #include <folly/Conv.h>
 #include <folly/dynamic.h>
 #include <glog/logging.h>
@@ -23,6 +22,7 @@
 #include <yoga/YGNode.h>
 #include <yoga/Yoga.h>
 #include <cmath>
+#include <optional>
 
 namespace facebook {
 namespace react {
@@ -98,9 +98,9 @@ inline YGValue yogaStyleValueFromFloat(
   return {(float)value, unit};
 }
 
-inline butter::optional<Float> optionalFloatFromYogaValue(
+inline std::optional<Float> optionalFloatFromYogaValue(
     const YGValue value,
-    butter::optional<Float> base = {}) {
+    std::optional<Float> base = {}) {
   switch (value.unit) {
     case YGUnitUndefined:
       return {};
@@ -108,9 +108,8 @@ inline butter::optional<Float> optionalFloatFromYogaValue(
       return floatFromYogaFloat(value.value);
     case YGUnitPercent:
       return base.has_value()
-          ? butter::optional<Float>(
-                base.value() * floatFromYogaFloat(value.value))
-          : butter::optional<Float>();
+          ? std::optional<Float>(base.value() * floatFromYogaFloat(value.value))
+          : std::optional<Float>();
     case YGUnitAuto:
       return {};
   }

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

@@ -7,17 +7,67 @@
 
 #pragma once
 
-#include <butter/optional.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Geometry.h>
+
 #include <array>
+#include <bitset>
 #include <cmath>
+#include <optional>
 
 namespace facebook {
 namespace react {
 
 enum class PointerEventsMode { Auto, None, BoxNone, BoxOnly };
 
+struct ViewEvents {
+  std::bitset<32> bits{};
+
+  enum class Offset : std::size_t {
+    // Pointer events
+    PointerEnter = 0,
+    PointerMove = 1,
+    PointerLeave = 2,
+
+    // PanResponder callbacks
+    MoveShouldSetResponder = 3,
+    MoveShouldSetResponderCapture = 4,
+    StartShouldSetResponder = 5,
+    StartShouldSetResponderCapture = 6,
+    ResponderGrant = 7,
+    ResponderReject = 8,
+    ResponderStart = 9,
+    ResponderEnd = 10,
+    ResponderRelease = 11,
+    ResponderMove = 12,
+    ResponderTerminate = 13,
+    ResponderTerminationRequest = 14,
+    ShouldBlockNativeResponder = 15,
+
+    // Touch events
+    TouchStart = 16,
+    TouchMove = 17,
+    TouchEnd = 18,
+    TouchCancel = 19,
+  };
+
+  constexpr bool operator[](const Offset offset) const {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  std::bitset<32>::reference operator[](const Offset offset) {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+};
+
+inline static bool operator==(ViewEvents const &lhs, ViewEvents const &rhs) {
+  return lhs.bits == rhs.bits;
+}
+
+inline static bool operator!=(ViewEvents const &lhs, ViewEvents const &rhs) {
+  return lhs.bits != rhs.bits;
+}
+
 enum class BackfaceVisibility { Auto, Visible, Hidden };
 
 enum class BorderStyle { Solid, Dotted, Dashed };
@@ -25,7 +75,7 @@ enum class BorderStyle { Solid, Dotted, Dashed };
 template <typename T>
 struct CascadedRectangleEdges {
   using Counterpart = RectangleEdges<T>;
-  using OptionalT = butter::optional<T>;
+  using OptionalT = std::optional<T>;
 
   OptionalT left{};
   OptionalT top{};
@@ -86,7 +136,7 @@ struct CascadedRectangleEdges {
 template <typename T>
 struct CascadedRectangleCorners {
   using Counterpart = RectangleCorners<T>;
-  using OptionalT = butter::optional<T>;
+  using OptionalT = std::optional<T>;
 
   OptionalT topLeft{};
   OptionalT topRight{};
@@ -178,5 +228,48 @@ struct BorderMetrics {
   }
 };
 
+#ifdef ANDROID
+
+struct NativeDrawable {
+  enum class Kind {
+    Ripple,
+    ThemeAttr,
+  };
+
+  struct Ripple {
+    std::optional<int32_t> color{};
+    bool borderless{false};
+    std::optional<Float> rippleRadius{};
+
+    bool operator==(const Ripple &rhs) const {
+      return std::tie(this->color, this->borderless, this->rippleRadius) ==
+          std::tie(rhs.color, rhs.borderless, rhs.rippleRadius);
+    }
+  };
+
+  Kind kind;
+  std::string themeAttr;
+  Ripple ripple;
+
+  bool operator==(const NativeDrawable &rhs) const {
+    if (this->kind != rhs.kind)
+      return false;
+    switch (this->kind) {
+      case Kind::ThemeAttr:
+        return this->themeAttr == rhs.themeAttr;
+      case Kind::Ripple:
+        return this->ripple == rhs.ripple;
+    }
+  }
+
+  bool operator!=(const NativeDrawable &rhs) const {
+    return !(*this == rhs);
+  }
+
+  ~NativeDrawable() = default;
+};
+
+#endif
+
 } // namespace react
 } // namespace facebook