Declare ScrollView's fadingEdgeLength once, in the shared props

fadingEdgeLength is a shared ScrollView prop in Flow and TypeScript, but
the C++ props declared it twice: on Android's HostPlatformScrollViewProps
and on a cxx HostPlatformScrollViewProps written only to carry it. It now
lives in BaseScrollViewProps, where both platforms parse it, and the cxx
props are an alias of the base again. Android's diff keeps reporting it
among the base props.

horizontal now resets to false when the prop is removed, as its declared
default is. It reset to true, which only iOS reads, so a ScrollView whose
horizontal prop was removed faded along its width.

Author: YevheniiKotyrlo

packages/react-native/React/Tests/Mounting/RCTScrollViewComponentViewTests.mm

@@ -10,10 +10,18 @@
 #import <react/renderer/components/scrollview/ScrollViewProps.h>
 #import <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #import <react/renderer/core/LayoutMetrics.h>
+#import <react/renderer/core/PropsParserContext.h>
+#import <react/renderer/core/RawProps.h>
+#import <react/renderer/core/RawPropsParser.h>
+#import <react/utils/ContextContainer.h>
 
+using facebook::react::ContextContainer;
 using facebook::react::EmptyLayoutMetrics;
 using facebook::react::LayoutMetrics;
 using facebook::react::Props;
+using facebook::react::PropsParserContext;
+using facebook::react::RawProps;
+using facebook::react::RawPropsParser;
 using facebook::react::ScrollViewProps;
 using facebook::react::ScrollViewShadowNode;
 
@@ -34,6 +42,17 @@
   return props;
 }
 
+static Props::Shared parseScrollViewProps(const folly::dynamic &rawValue, const ScrollViewProps &sourceProps)
+{
+  ContextContainer contextContainer{};
+  PropsParserContext parserContext{-1, contextContainer};
+  auto rawProps = RawProps(rawValue);
+  auto parser = RawPropsParser();
+  parser.prepare<ScrollViewProps>();
+  rawProps.parse(parser);
+  return std::make_shared<const ScrollViewProps>(parserContext, sourceProps, rawProps);
+}
+
 @interface RCTScrollViewComponentView (Tests)
 - (void)_keyboardWillChangeFrame:(NSNotification *)notification;
 @end
@@ -120,6 +139,24 @@ - (void)testHorizontalFadingEdgeLengthFadesAlongTheWidth
   [self assertLocations:mask.locations equal:@[ @0, @0.2, @1, @1 ]];
 }
 
+- (void)testParsedFadingEdgeFollowsTheAxisWhenHorizontalIsRemoved
+{
+  RCTScrollViewComponentView *view = [[RCTScrollViewComponentView alloc] initWithFrame:CGRectMake(0, 0, 100, 200)];
+  auto horizontalProps =
+      parseScrollViewProps(folly::dynamic::object("fadingEdgeLength", 20)("horizontal", true), ScrollViewProps{});
+  [view updateProps:horizontalProps oldProps:ScrollViewShadowNode::defaultSharedProps()];
+  XCTAssertTrue(CGPointEqualToPoint([self fadingEdgeMaskOf:view].startPoint, CGPointMake(0, 0.5)));
+
+  auto verticalProps = parseScrollViewProps(
+      folly::dynamic::object("horizontal", nullptr), static_cast<const ScrollViewProps &>(*horizontalProps));
+  [view updateProps:verticalProps oldProps:horizontalProps];
+
+  CAGradientLayer *mask = [self fadingEdgeMaskOf:view];
+  XCTAssertTrue(CGPointEqualToPoint(mask.startPoint, CGPointMake(0.5, 0)));
+  XCTAssertTrue(CGPointEqualToPoint(mask.endPoint, CGPointMake(0.5, 1)));
+  [self assertLocations:mask.locations equal:@[ @0, @0.1, @0.9, @1 ]];
+}
+
 - (void)testFadingEdgesNeverOverlap
 {
   RCTScrollViewComponentView *view = [[RCTScrollViewComponentView alloc] initWithFrame:CGRectMake(0, 0, 100, 200)];

packages/react-native/ReactCommon/react/renderer/components/scrollview/BaseScrollViewProps.cpp

@@ -170,7 +170,13 @@ BaseScrollViewProps::BaseScrollViewProps(
           rawProps,
           "horizontal",
           sourceProps.horizontal,
-          true)),
+          false)),
+      fadingEdgeLength(convertRawProp(
+          context,
+          rawProps,
+          "fadingEdgeLength",
+          sourceProps.fadingEdgeLength,
+          nullptr)),
       scrollEventThrottle(convertRawProp(
           context,
           rawProps,
@@ -294,6 +300,7 @@ void BaseScrollViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(showsVerticalScrollIndicator);
     RAW_SET_PROP_SWITCH_CASE_BASIC(persistentScrollbar);
     RAW_SET_PROP_SWITCH_CASE_BASIC(horizontal);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(fadingEdgeLength);
     RAW_SET_PROP_SWITCH_CASE_BASIC(scrollEventThrottle);
     RAW_SET_PROP_SWITCH_CASE_BASIC(zoomScale);
     RAW_SET_PROP_SWITCH_CASE_BASIC(contentInset);

packages/react-native/ReactCommon/react/renderer/components/scrollview/BaseScrollViewProps.h

@@ -11,6 +11,7 @@
 
 #include <React/RendererCore.h>
 #include <React/View.h>
+#include <folly/dynamic.h>
 #include <react/renderer/components/scrollview/primitives.h>
 
 #include <optional>
@@ -57,6 +58,7 @@ class BaseScrollViewProps : public ViewProps {
   bool showsVerticalScrollIndicator{true};
   bool persistentScrollbar{false};
   bool horizontal{false};
+  folly::dynamic fadingEdgeLength{};
   Float scrollEventThrottle{};
   Float zoomScale{1.0f};
   EdgeInsets contentInset{};

packages/react-native/ReactCommon/react/renderer/components/scrollview/platform/android/react/renderer/components/scrollview/HostPlatformScrollViewProps.cpp

@@ -32,12 +32,6 @@ HostPlatformScrollViewProps::HostPlatformScrollViewProps(
           "nestedScrollEnabled",
           sourceProps.nestedScrollEnabled,
           true)),
-      fadingEdgeLength(convertRawProp(
-          context,
-          rawProps,
-          "fadingEdgeLength",
-          sourceProps.fadingEdgeLength,
-          nullptr)),
       overScrollMode(convertRawProp(
           context,
           rawProps,
@@ -66,7 +60,6 @@ void HostPlatformScrollViewProps::setProp(
   switch (hash) {
     RAW_SET_PROP_SWITCH_CASE_BASIC(sendMomentumEvents);
     RAW_SET_PROP_SWITCH_CASE_BASIC(nestedScrollEnabled);
-    RAW_SET_PROP_SWITCH_CASE_BASIC(fadingEdgeLength);
     RAW_SET_PROP_SWITCH_CASE_BASIC(overScrollMode);
     RAW_SET_PROP_SWITCH_CASE_BASIC(endFillColor);
   }
@@ -276,6 +269,10 @@ folly::dynamic HostPlatformScrollViewProps::getDiffProps(
     result["horizontal"] = horizontal;
   }
 
+  if (fadingEdgeLength != oldProps->fadingEdgeLength) {
+    result["fadingEdgeLength"] = fadingEdgeLength;
+  }
+
   if (scrollEventThrottle != oldProps->scrollEventThrottle) {
     result["scrollEventThrottle"] = scrollEventThrottle;
   }
@@ -368,10 +365,6 @@ folly::dynamic HostPlatformScrollViewProps::getDiffProps(
     result["nestedScrollEnabled"] = nestedScrollEnabled;
   }
 
-  if (fadingEdgeLength != oldProps->fadingEdgeLength) {
-    result["fadingEdgeLength"] = fadingEdgeLength;
-  }
-
   if (overScrollMode != oldProps->overScrollMode) {
     result["overScrollMode"] = overScrollMode;
   }

packages/react-native/ReactCommon/react/renderer/components/scrollview/platform/android/react/renderer/components/scrollview/HostPlatformScrollViewProps.h

@@ -35,7 +35,6 @@ class HostPlatformScrollViewProps : public BaseScrollViewProps {
 
   bool sendMomentumEvents{};
   bool nestedScrollEnabled{};
-  folly::dynamic fadingEdgeLength{};
   std::string overScrollMode{"auto"};
   SharedColor endFillColor{clearColor()};
 

packages/react-native/ReactCommon/react/renderer/components/scrollview/platform/cxx/react/renderer/components/scrollview/HostPlatformScrollViewProps.cpp

@@ -9,25 +9,8 @@
 
 #include <react/cxxstableapi/FrameworksGuard.h>
 
-#include <folly/dynamic.h>
 #include <react/renderer/components/scrollview/BaseScrollViewProps.h>
 
 namespace facebook::react {
-
-class HostPlatformScrollViewProps : public BaseScrollViewProps {
- public:
-  HostPlatformScrollViewProps() = default;
-  HostPlatformScrollViewProps(
-      const PropsParserContext &context,
-      const HostPlatformScrollViewProps &sourceProps,
-      const RawProps &rawProps);
-
-  void
-  setProp(const PropsParserContext &context, RawPropsPropNameHash hash, const char *propName, const RawValue &value);
-
-#pragma mark - Props
-
-  folly::dynamic fadingEdgeLength{};
-};
-
+using HostPlatformScrollViewProps = BaseScrollViewProps;
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/scrollview/platform/cxx/react/renderer/components/scrollview/HostPlatformScrollViewProps.h

@@ -1429,6 +1429,7 @@ class facebook::react::BaseScrollViewProps : public facebook::react::HostPlatfor
   public facebook::react::ScrollViewIndicatorStyle indicatorStyle;
   public facebook::react::ScrollViewKeyboardDismissMode keyboardDismissMode;
   public facebook::react::ScrollViewSnapToAlignment snapToAlignment;
+  public folly::dynamic fadingEdgeLength;
   public std::optional<facebook::react::ScrollViewMaintainVisibleContentPosition> maintainVisibleContentPosition;
   public std::vector<facebook::react::Float> snapToOffsets;
   public void setProp(const facebook::react::PropsParserContext& context, facebook::react::RawPropsPropNameHash hash, const char* propName, const facebook::react::RawValue& value);
@@ -2041,7 +2042,6 @@ class facebook::react::HostPlatformScrollViewProps : public facebook::react::Bas
   public bool nestedScrollEnabled;
   public bool sendMomentumEvents;
   public facebook::react::SharedColor endFillColor;
-  public folly::dynamic fadingEdgeLength;
   public std::string overScrollMode;
   public virtual facebook::react::ComponentName getDiffPropsImplementationTarget() const override;
   public virtual folly::dynamic getDiffProps(const facebook::react::Props* prevProps) const override;

scripts/cxx-api/api-snapshots/ReactAndroidFrameworksCxx.api

@@ -4026,6 +4026,7 @@ class facebook::react::BaseScrollViewProps : public facebook::react::HostPlatfor
   public facebook::react::ScrollViewIndicatorStyle indicatorStyle;
   public facebook::react::ScrollViewKeyboardDismissMode keyboardDismissMode;
   public facebook::react::ScrollViewSnapToAlignment snapToAlignment;
+  public folly::dynamic fadingEdgeLength;
   public std::optional<facebook::react::ScrollViewMaintainVisibleContentPosition> maintainVisibleContentPosition;
   public std::vector<facebook::react::Float> snapToOffsets;
   public void setProp(const facebook::react::PropsParserContext& context, facebook::react::RawPropsPropNameHash hash, const char* propName, const facebook::react::RawValue& value);

scripts/cxx-api/api-snapshots/ReactAppleFrameworksCxx.api

@@ -772,6 +772,7 @@ class facebook::react::BaseScrollViewProps : public facebook::react::HostPlatfor
   public facebook::react::ScrollViewIndicatorStyle indicatorStyle;
   public facebook::react::ScrollViewKeyboardDismissMode keyboardDismissMode;
   public facebook::react::ScrollViewSnapToAlignment snapToAlignment;
+  public folly::dynamic fadingEdgeLength;
   public std::optional<facebook::react::ScrollViewMaintainVisibleContentPosition> maintainVisibleContentPosition;
   public std::vector<Float> snapToOffsets;
   public void setProp(const facebook::react::PropsParserContext& context, facebook::react::RawPropsPropNameHash hash, const char* propName, const facebook::react::RawValue& value);