add support for bottomViewabilityInsetRef

src/FlashList.tsx

@@ -784,6 +784,10 @@ class FlashList<T> extends React.PureComponent<
     }
   }
 
+  public updateViewableItems() {
+    this.viewabilityManager.updateViewableItems();
+  }
+
   public scrollToEnd(params?: { animated?: boolean | null | undefined }) {
     this.rlvRef?.scrollToEnd(Boolean(params?.animated));
   }

src/FlashListProps.ts

@@ -337,4 +337,11 @@ export interface FlashListProps<TItem> extends ScrollViewProps {
   disableAutoLayout?: boolean;
 
   initialScrollOffset?: number;
+
+  /**
+   * If the FlashList is in a bottom sheet, some rendered items can be off screen.
+   * The value in this ref represents the height of the off-screen area, so onViewableItemsChanged
+   * can consider the visible area of the bottom sheet in its calculations.
+   */
+  bottomViewabilityInsetRef?: React.MutableRefObject<number>;
 }

src/__tests__/ViewabilityHelper.test.ts

@@ -256,20 +256,23 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper,
     horizontal,
     scrollOffset,
+    bottomViewabilityInset,
     listSize,
     getLayout,
     runAllTimers,
   }: {
     viewabilityHelper: ViewabilityHelper;
     horizontal?: boolean;
     scrollOffset?: number;
+    bottomViewabilityInset?: number;
     listSize?: Dimension;
     getLayout?: (index: number) => Layout | undefined;
     runAllTimers?: boolean;
   }) => {
     viewabilityHelper.updateViewableItems(
       horizontal ?? false,
       scrollOffset ?? 0,
+      bottomViewabilityInset ?? 0,
       listSize ?? { height: 300, width: 300 },
       getLayout ??
         ((index) => {

src/viewability/ViewabilityHelper.ts

@@ -48,6 +48,7 @@ class ViewabilityHelper {
   public updateViewableItems(
     horizontal: boolean,
     scrollOffset: number,
+    bottomViewabilityInset: number,
     listSize: Dimension,
     getLayout: (index: number) => Layout | undefined,
     viewableIndices?: number[]
@@ -76,6 +77,7 @@ class ViewabilityHelper {
         index,
         horizontal,
         scrollOffset,
+        bottomViewabilityInset,
         listSize,
         this.viewabilityConfig?.viewAreaCoveragePercentThreshold,
         this.viewabilityConfig?.itemVisiblePercentThreshold,
@@ -122,6 +124,7 @@ class ViewabilityHelper {
     index: number,
     horizontal: boolean,
     scrollOffset: number,
+    bottomViewabilityInset: number,
     listSize: Dimension,
     viewAreaCoveragePercentThreshold: number | null | undefined,
     itemVisiblePercentThreshold: number | null | undefined,
@@ -133,7 +136,9 @@ class ViewabilityHelper {
     }
     const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
-    const listMainSize = horizontal ? listSize.width : listSize.height;
+    const listMainSize = horizontal
+      ? listSize.width
+      : listSize.height - bottomViewabilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 

src/viewability/ViewabilityManager.ts

@@ -76,10 +76,15 @@ export default class ViewabilityManager<T> {
     const scrollOffset =
       (this.flashListRef.recyclerlistview_unsafe?.getCurrentScrollOffset() ??
         0) - this.flashListRef.firstItemOffset;
+
+    const bottomViewabilityInset =
+      this.flashListRef.props.bottomViewabilityInsetRef?.current ?? 0;
+
     this.viewabilityHelpers.forEach((viewabilityHelper) => {
       viewabilityHelper.updateViewableItems(
         this.flashListRef.props.horizontal ?? false,
         scrollOffset,
+        bottomViewabilityInset,
         listSize,
         (index: number) =>
           this.flashListRef.recyclerlistview_unsafe?.getLayout(index),