Add responderIgnoreScroll prop on ScrollView (#53951)

Summary:

## Changelog:

[Android] [Changed] - Add responderIgnoreScroll prop on ScrollView

When it's set to true (default), emit touchcancel from native Android ScrollView, instead of letting Responder System terminate responder at scroll. When false, `onTouchCancel` on ScrollView children will not be invoked, but
`onTouchEnd` will be invoked (if touch starts on it) - which aligns with iOS.

Allow opting in this new behavior at component level because (1) touchCancel is meaningful especially on android, and dev may be using onTouchCancel handler, if we enable this everywhere the handler is broken, (2) there's likely some issue in responder system when transferring js responder

Differential Revision: D82761242

Author: zeyap

packages/react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent.js

@@ -59,6 +59,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
       process: require('../../StyleSheet/processColor').default,
     },
     pointerEvents: true,
+    responderIgnoreScroll: true,
   },
 };
 

packages/react-native/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -586,6 +586,19 @@ export interface ScrollViewPropsAndroid {
    * Causes the scrollbars not to turn transparent when they are not in use. The default value is false.
    */
   persistentScrollbar?: boolean | undefined;
+
+  /**
+   * Emit touchcancel from native Android ScrollView, instead of letting Responder System
+   * terminate responder at scroll.
+   *
+   * When it's set to false, `onTouchCancel` on ScrollView children will not be invoked, but
+   * `onTouchEnd` will be invoked (if touch starts on it) - which aligns with iOS.
+   *
+   * The default value is true.
+   *
+   * @platform android
+   */
+  responderIgnoreScroll?: boolean | undefined;
 }
 
 export interface ScrollViewProps

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -388,6 +388,19 @@ export type ScrollViewPropsAndroid = $ReadOnly<{
    * @platform android
    */
   fadingEdgeLength?: ?number | {start: number, end: number},
+
+  /**
+   * Emit touchcancel from native Android ScrollView, instead of letting Responder System
+   * terminate responder at scroll.
+   *
+   * When it's set to false, `onTouchCancel` on ScrollView children will not be invoked, but
+   * `onTouchEnd` will be invoked (if touch starts on it) - which aligns with iOS.
+   *
+   * The default value is true.
+   *
+   * @platform android
+   */
+  responderIgnoreScroll?: ?boolean,
 }>;
 
 type StickyHeaderComponentType = component(

packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js

@@ -88,6 +88,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           },
           pointerEvents: true,
           isInvertedVirtualizedList: true,
+          responderIgnoreScroll: true,
         },
       }
     : {

packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js

@@ -63,6 +63,7 @@ export type ScrollViewNativeProps = $ReadOnly<{
   pagingEnabled?: ?boolean,
   persistentScrollbar?: ?boolean,
   pinchGestureEnabled?: ?boolean,
+  responderIgnoreScroll?: ?boolean,
   scrollEnabled?: ?boolean,
   scrollEventThrottle?: ?number,
   scrollIndicatorInsets?: ?EdgeInsetsProp,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java

@@ -133,6 +133,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView
   private @Nullable MaintainVisibleScrollPositionHelper mMaintainVisibleContentPositionHelper;
   private int mFadingEdgeLengthStart = 0;
   private int mFadingEdgeLengthEnd = 0;
+  private boolean mResponderIgnoreScroll = true;
 
   public ReactHorizontalScrollView(Context context) {
     this(context, null);
@@ -196,6 +197,7 @@ private void initView() {
     mMaintainVisibleContentPositionHelper = null;
     mFadingEdgeLengthStart = 0;
     mFadingEdgeLengthEnd = 0;
+    mResponderIgnoreScroll = true;
   }
 
   /* package */ void recycleView() {
@@ -1722,4 +1724,12 @@ public void setLastScrollDispatchTime(long lastScrollDispatchTime) {
   public long getLastScrollDispatchTime() {
     return mLastScrollDispatchTime;
   }
+
+  public void setResponderIgnoreScroll(boolean responderIgnoreScroll) {
+    mResponderIgnoreScroll = responderIgnoreScroll;
+  }
+
+  public boolean getResponderIgnoreScroll() {
+    return mResponderIgnoreScroll;
+  }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.kt

@@ -413,6 +413,14 @@ constructor(private val fpsListener: FpsListener? = null) :
     // Do Nothing: Align with static ViewConfigs
   }
 
+  @ReactProp(name = "responderIgnoreScroll")
+  public fun setResponderIgnoreScroll(
+      view: ReactHorizontalScrollView,
+      responderIgnoreScroll: Boolean,
+  ) {
+    view.responderIgnoreScroll = responderIgnoreScroll
+  }
+
   public companion object {
     public const val REACT_CLASS: String = "AndroidHorizontalScrollView"
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollView.java

@@ -131,6 +131,7 @@ public class ReactScrollView extends ScrollView
   private @Nullable MaintainVisibleScrollPositionHelper mMaintainVisibleContentPositionHelper;
   private int mFadingEdgeLengthStart;
   private int mFadingEdgeLengthEnd;
+  private boolean mResponderIgnoreScroll;
 
   public ReactScrollView(Context context) {
     this(context, null);
@@ -193,6 +194,7 @@ private void initView() {
     mMaintainVisibleContentPositionHelper = null;
     mFadingEdgeLengthStart = 0;
     mFadingEdgeLengthEnd = 0;
+    mResponderIgnoreScroll = true;
   }
 
   /* package */ void recycleView() {
@@ -1527,4 +1529,12 @@ public void setLastScrollDispatchTime(long lastScrollDispatchTime) {
   public long getLastScrollDispatchTime() {
     return mLastScrollDispatchTime;
   }
+
+  public void setResponderIgnoreScroll(boolean responderIgnoreScroll) {
+    mResponderIgnoreScroll = responderIgnoreScroll;
+  }
+
+  public boolean getResponderIgnoreScroll() {
+    return mResponderIgnoreScroll;
+  }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.kt

@@ -428,6 +428,11 @@ constructor(private val fpsListener: FpsListener? = null) :
     }
   }
 
+  @ReactProp(name = "responderIgnoreScroll")
+  public fun setResponderIgnoreScroll(view: ReactScrollView, responderIgnoreScroll: Boolean) {
+    view.responderIgnoreScroll = responderIgnoreScroll
+  }
+
   public companion object {
     public const val REACT_CLASS: String = "RCTScrollView"
 

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

@@ -38,6 +38,15 @@ HostPlatformScrollViewProps::HostPlatformScrollViewProps(
                     rawProps,
                     "nestedScrollEnabled",
                     sourceProps.nestedScrollEnabled,
+                    true)),
+      responderIgnoreScroll(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.responderIgnoreScroll
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "responderIgnoreScroll",
+                    sourceProps.responderIgnoreScroll,
                     true))
 
 {}
@@ -57,6 +66,7 @@ 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(responderIgnoreScroll);
   }
 }
 
@@ -76,7 +86,11 @@ SharedDebugStringConvertibleList HostPlatformScrollViewProps::getDebugProps()
           debugStringConvertibleItem(
               "nestedScrollEnabled",
               nestedScrollEnabled,
-              defaultScrollViewProps.nestedScrollEnabled)};
+              defaultScrollViewProps.nestedScrollEnabled),
+          debugStringConvertibleItem(
+              "responderIgnoreScroll",
+              responderIgnoreScroll,
+              defaultScrollViewProps.responderIgnoreScroll)};
 }
 #endif
 
@@ -348,6 +362,10 @@ folly::dynamic HostPlatformScrollViewProps::getDiffProps(
     result["nestedScrollEnabled"] = nestedScrollEnabled;
   }
 
+  if (responderIgnoreScroll != oldProps->responderIgnoreScroll) {
+    result["responderIgnoreScroll"] = responderIgnoreScroll;
+  }
+
   return result;
 }