Add native prop to signal reversed lists

Summary: While we certainly can check the order of content container children in a scroll view to determine if a list is in reverse order, this doesn't tell us definitively whether the semantic intent of the list is reverse ordered items. Instead, we can pass the same indicator that we use to determine list cell metrics to the native component. ## Changelog [General][Added] Native prop to signal that a ScrollView has reverse ordered children Differential Revision: D64759218
rozele · Oct 22, 2024 · c49807e · c49807e
1 parent bff0eb4
commit c49807e
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 2 deletions.
diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent.js
@@ -90,7 +90,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             process: require('../../StyleSheet/processColor').default,
           },
           pointerEvents: true,
-          isInvertedVirtualizedList: true,
+          isReversedVirtualizedList: true,
         },
       }
     : {
@@ -140,6 +140,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           disableIntervalMomentum: true,
           indicatorStyle: true,
           inverted: true,
+          isReversedVirtualizedList: true,
           keyboardDismissMode: true,
           maintainVisibleContentPosition: true,
           maximumZoomScale: true,

diff --git a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -6,6 +6,7 @@ exports[`FlatList ignores invalid data 1`] = `
   data={123456}
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={null}
   onLayout={[Function]}
@@ -87,6 +88,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
   getItem={[Function]}
   getItemCount={[Function]}
   getItemLayout={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -201,6 +203,7 @@ exports[`FlatList renders array-like data 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={null}
   onLayout={[Function]}
@@ -287,6 +290,7 @@ exports[`FlatList renders empty list 1`] = `
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -309,6 +313,7 @@ exports[`FlatList renders null list 1`] = `
 <RCTScrollView
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -344,6 +349,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -417,6 +423,7 @@ exports[`FlatList renders simple list 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -481,6 +488,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -554,6 +562,7 @@ exports[`FlatList renders simple list using ListItemComponent 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}

diff --git a/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap b/packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
@@ -19,6 +19,7 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -80,6 +81,7 @@ exports[`SectionList renders a footer when there is no data 1`] = `
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -131,6 +133,7 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
   }
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -214,6 +217,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
   getItem={[Function]}
   getItemCount={[Function]}
   initialNumToRender={Infinity}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}
@@ -401,6 +405,7 @@ exports[`SectionList renders empty list 1`] = `
   data={Array []}
   getItem={[Function]}
   getItemCount={[Function]}
+  isReversedVirtualizedList={false}
   keyExtractor={[Function]}
   onContentSizeChange={[Function]}
   onLayout={[Function]}

diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.cpp
@@ -372,6 +372,15 @@ ScrollViewProps::ScrollViewProps(
                     rawProps,
                     "isInvertedVirtualizedList",
                     sourceProps.isInvertedVirtualizedList,
+                    {})),
+      isReversedVirtualizedList(
+          CoreFeatures::enablePropIteratorSetter
+              ? sourceProps.isReversedVirtualizedList
+              : convertRawProp(
+                    context,
+                    rawProps,
+                    "isReversedVirtualizedList",
+                    sourceProps.isReversedVirtualizedList,
                     {})) {}
 
 void ScrollViewProps::setProp(
@@ -425,6 +434,7 @@ void ScrollViewProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(contentInsetAdjustmentBehavior);
     RAW_SET_PROP_SWITCH_CASE_BASIC(scrollToOverflowEnabled);
     RAW_SET_PROP_SWITCH_CASE_BASIC(isInvertedVirtualizedList);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(isReversedVirtualizedList);
   }
 }
 
@@ -559,7 +569,11 @@ SharedDebugStringConvertibleList ScrollViewProps::getDebugProps() const {
           debugStringConvertibleItem(
               "isInvertedVirtualizedList",
               snapToEnd,
-              defaultScrollViewProps.isInvertedVirtualizedList)};
+              defaultScrollViewProps.isInvertedVirtualizedList),
+          debugStringConvertibleItem(
+              "isReversedVirtualizedList",
+              snapToEnd,
+              defaultScrollViewProps.isReversedVirtualizedList)};
 }
 #endif
 

diff --git a/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h b/packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollViewProps.h
@@ -74,6 +74,7 @@ class ScrollViewProps final : public ViewProps {
       ContentInsetAdjustmentBehavior::Never};
   bool scrollToOverflowEnabled{false};
   bool isInvertedVirtualizedList{false};
+  bool isReversedVirtualizedList{false};
 
 #pragma mark - DebugStringConvertible
 

diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -1090,6 +1090,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
         ? [inversionStyle, this.props.style]
         : this.props.style,
       isInvertedVirtualizedList: this.props.inverted,
+      isReversedVirtualizedList: this._orientation().reversed,
       maintainVisibleContentPosition:
         this.props.maintainVisibleContentPosition != null
           ? {