@shopify/flash-list 2.2.3 → 2.3.0

package/src/recyclerview/ViewHolderCollection.tsx

@@ -56,6 +56,8 @@ export interface ViewHolderCollectionProps<TItem> {
   hideStickyHeaderRelatedCell: boolean;
   /** Returns whether the item at the given index is in the last row of the layout */
   isInLastRow: (index: number) => boolean;
+  /** Whether the list is inverted */
+  inverted: FlashListProps<TItem>["inverted"];
 }
 
 /**
@@ -93,6 +95,7 @@ export const ViewHolderCollection = <TItem,>(
     currentStickyIndex,
     hideStickyHeaderRelatedCell,
     isInLastRow,
+    inverted,
   } = props;
 
   const [renderId, setRenderId] = React.useState(0);
@@ -202,6 +205,7 @@ export const ViewHolderCollection = <TItem,>(
               hidden={
                 hideStickyHeaderRelatedCell && currentStickyIndex === index
               }
+              inverted={inverted}
             />
           );
         })}

package/src/recyclerview/components/StickyHeaders.tsx

@@ -44,6 +44,8 @@ export interface StickyHeaderProps<TItem> {
   recyclerViewManager: RecyclerViewManager<TItem>;
   /** Additional data to trigger re-renders */
   extraData: FlashListProps<TItem>["extraData"];
+  /** Whether the list is inverted */
+  inverted: FlashListProps<TItem>["inverted"];
 }
 
 /**
@@ -69,6 +71,7 @@ export const StickyHeaders = <TItem,>({
   data,
   extraData,
   onChangeStickyIndex,
+  inverted,
 }: StickyHeaderProps<TItem>) => {
   const [stickyHeaderState, setStickyHeaderState] = useState<StickyHeaderState>(
     {
@@ -214,6 +217,7 @@ export const StickyHeaders = <TItem,>({
             trailingItem={null}
             target="StickyHeader"
             hidden={false}
+            inverted={inverted}
           />
         ) : null}
       </CompatAnimatedView>
@@ -227,6 +231,7 @@ export const StickyHeaders = <TItem,>({
     refHolder,
     extraData,
     stickyHeaderOffset,
+    inverted,
   ]);
 
   if (PlatformConfig.isRN083OrAbove && currentStickyIndex === -1) {

package/src/recyclerview/hooks/useSecondaryProps.tsx

@@ -5,6 +5,7 @@ import { RecyclerViewProps } from "../RecyclerViewProps";
 import { getValidComponent, isComponentClass } from "../utils/componentUtils";
 import { CompatView } from "../components/CompatView";
 import { CompatAnimatedScroller } from "../components/CompatScroller";
+import { getInvertedTransformStyle } from "../utils/getInvertedTransformStyle";
 
 /**
  * Hook that manages secondary props and components for the RecyclerView.
@@ -30,6 +31,7 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     ListFooterComponent,
     ListFooterComponentStyle,
     ListEmptyComponent,
+    ListEmptyComponentStyle,
     renderScrollComponent,
     refreshing,
     progressViewOffset,
@@ -37,8 +39,14 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     data,
     refreshControl: customRefreshControl,
     stickyHeaderConfig,
+    inverted,
+    horizontal,
   } = props;
 
+  const invertedTransformStyle = inverted
+    ? getInvertedTransformStyle(horizontal)
+    : undefined;
+
   /**
    * Creates the refresh control component if onRefresh is provided.
    */
@@ -65,11 +73,11 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       return null;
     }
     return (
-      <CompatView style={ListHeaderComponentStyle}>
+      <CompatView style={[ListHeaderComponentStyle, invertedTransformStyle]}>
         {getValidComponent(ListHeaderComponent)}
       </CompatView>
     );
-  }, [ListHeaderComponent, ListHeaderComponentStyle]);
+  }, [ListHeaderComponent, ListHeaderComponentStyle, invertedTransformStyle]);
 
   /**
    * Creates the footer component with optional styling.
@@ -79,11 +87,11 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       return null;
     }
     return (
-      <CompatView style={ListFooterComponentStyle}>
+      <CompatView style={[ListFooterComponentStyle, invertedTransformStyle]}>
         {getValidComponent(ListFooterComponent)}
       </CompatView>
     );
-  }, [ListFooterComponent, ListFooterComponentStyle]);
+  }, [ListFooterComponent, ListFooterComponentStyle, invertedTransformStyle]);
 
   /**
    * Creates the empty state component when there's no data.
@@ -93,8 +101,21 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     if (!ListEmptyComponent || (data && data.length > 0)) {
       return null;
     }
-    return getValidComponent(ListEmptyComponent);
-  }, [ListEmptyComponent, data]);
+    const emptyContent = getValidComponent(ListEmptyComponent);
+    if (!invertedTransformStyle && !ListEmptyComponentStyle) {
+      return emptyContent;
+    }
+    return (
+      <CompatView style={[ListEmptyComponentStyle, invertedTransformStyle]}>
+        {emptyContent}
+      </CompatView>
+    );
+  }, [
+    ListEmptyComponent,
+    data,
+    invertedTransformStyle,
+    ListEmptyComponentStyle,
+  ]);
 
   /**
    * Creates the sticky header backdrop component.
@@ -105,16 +126,19 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     }
     return (
       <CompatView
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-        }}
+        style={[
+          {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+          },
+          invertedTransformStyle,
+        ]}
       >
         {getValidComponent(stickyHeaderConfig?.backdropComponent)}
       </CompatView>
     );
-  }, [stickyHeaderConfig?.backdropComponent]);
+  }, [stickyHeaderConfig?.backdropComponent, invertedTransformStyle]);
 
   /**
    * Creates an animated scroll component based on the provided renderScrollComponent.

package/src/recyclerview/utils/getInvertedTransformStyle.ts

@@ -0,0 +1,7 @@
+import { PlatformConfig } from "../../native/config/PlatformHelper";
+
+export function getInvertedTransformStyle(horizontal?: boolean | null) {
+  return horizontal
+    ? PlatformConfig.invertedTransformStyleHorizontal
+    : PlatformConfig.invertedTransformStyle;
+}