chore: inverted support for all virtualized lists

Author: kirillzyusko

FabricExample/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx

@@ -49,7 +49,9 @@ const VirtualizedListScrollView = forwardRef<
         ref={ref}
         automaticallyAdjustContentInsets={false}
         contentContainerStyle={
-          inverted ? invertedContentContainerStyle : contentContainerStyle
+          isInvertedSupported
+            ? invertedContentContainerStyle
+            : contentContainerStyle
         }
         contentInsetAdjustmentBehavior="never"
         freeze={freeze}

FabricExample/src/screens/Examples/KeyboardChatScrollView/index.tsx

@@ -101,7 +101,9 @@ function KeyboardChatScrollViewPlayground() {
         {mode === "legend" && (
           <LegendList
             ref={legendRef}
+            alignItemsAtEnd={inverted}
             data={messages}
+            initialScrollAtEnd={inverted}
             keyExtractor={(item) => item.text}
             renderItem={({ item }) => <Message {...item} />}
             renderScrollComponent={memoList}
@@ -110,8 +112,11 @@ function KeyboardChatScrollViewPlayground() {
         {mode === "flash" && (
           <FlashList
             ref={flashRef}
-            data={inverted ? reversedMessages : messages}
+            data={messages}
             keyExtractor={(item) => item.text}
+            maintainVisibleContentPosition={{
+              startRenderingFromBottom: inverted,
+            }}
             renderItem={({ item }) => <Message {...item} />}
             renderScrollComponent={VirtualizedListScrollView}
           />

example/src/screens/Examples/KeyboardChatScrollView/VirtualizedListScrollView.tsx

@@ -33,8 +33,9 @@ const VirtualizedListScrollView = forwardRef<
     () => ({ paddingTop: TEXT_INPUT_HEIGHT + MARGIN }),
     [],
   );
-  // on new arch only FlatList supports `inverted` prop
-  const isInvertedSupported = inverted && mode === "flat" ? inverted : false;
+  // on old arch only FlatList and FlashList supports `inverted` prop
+  const isInvertedSupported =
+    inverted && (mode === "flat" || mode === "flash") ? inverted : false;
   const onLayout = useCallback(
     (e: LayoutChangeEvent) => {
       setLayoutPass((l) => l + 1);

example/src/screens/Examples/KeyboardChatScrollView/index.tsx

@@ -101,6 +101,7 @@ function KeyboardChatScrollViewPlayground() {
         {mode === "legend" && (
           <LegendList
             ref={legendRef}
+            alignItemsAtEnd={inverted}
             data={messages}
             keyExtractor={(item) => item.text}
             renderItem={({ item }) => <Message {...item} />}
@@ -111,6 +112,7 @@ function KeyboardChatScrollViewPlayground() {
           <FlashList
             ref={flashRef}
             data={inverted ? reversedMessages : messages}
+            inverted={inverted}
             keyExtractor={(item) => item.text}
             renderItem={({ item }) => <Message {...item} />}
             renderScrollComponent={VirtualizedListScrollView}