diff --git a/packages/virtualized-lists/Lists/ViewabilityHelper.js b/packages/virtualized-lists/Lists/ViewabilityHelper.js index b49455794d5f57..f2d82fcbcf327d 100644 --- a/packages/virtualized-lists/Lists/ViewabilityHelper.js +++ b/packages/virtualized-lists/Lists/ViewabilityHelper.js @@ -65,6 +65,16 @@ export type ViewabilityConfig = $ReadOnly<{ * render. */ waitForInteraction?: boolean, + + /** + * Offset from top of the screen + */ + absoluteTopOffset?: number, + + /** + * Offset from bottom of the screen + */ + absoluteBottomOffset?: number, }>; /** @@ -148,10 +158,13 @@ class ViewabilityHelper { if (!metrics) { continue; } - const top = Math.floor(metrics.offset - scrollOffset); + const absoluteTopOffset = this._config.absoluteTopOffset ?? 0; + const absoluteBottomOffset = this._config.absoluteBottomOffset ?? 0; + + const top = Math.floor(metrics.offset - scrollOffset - absoluteTopOffset); const bottom = Math.floor(top + metrics.length); - if (top < viewportHeight && bottom > 0) { + if (top < viewportHeight - absoluteTopOffset && bottom > 0) { firstVisible = idx; if ( _isViewable( @@ -159,7 +172,7 @@ class ViewabilityHelper { viewablePercentThreshold, top, bottom, - viewportHeight, + viewportHeight - absoluteTopOffset - absoluteBottomOffset, metrics.length, ) ) { diff --git a/packages/virtualized-lists/Lists/VirtualizedList.d.ts b/packages/virtualized-lists/Lists/VirtualizedList.d.ts index a4c93f58a266b5..f49ee4ef1870d3 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.d.ts +++ b/packages/virtualized-lists/Lists/VirtualizedList.d.ts @@ -53,6 +53,16 @@ export interface ViewabilityConfig { * render. */ waitForInteraction?: boolean | undefined; + + /** + * Offset from top of the screen + */ + absoluteTopOffset?: number | undefined; + + /** + * Offset from bottom of the screen + */ + absoluteBottomOffset?: number | undefined; } export interface ViewabilityConfigCallbackPair {