From e0218248aa3106446d0d16a3c02fd633bcd5c596 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Mon, 12 Feb 2024 15:43:18 -0800
Subject: [PATCH 01/16] add support for bottomViewabilityInsetRef

---
 .vscode/settings.json                   | 2 +-
 src/FlashListProps.ts                   | 7 +++++++
 src/__tests__/ViewabilityHelper.test.ts | 5 ++++-
 src/viewability/ViewabilityHelper.ts    | 3 ++-
 src/viewability/ViewabilityManager.ts   | 5 +++++
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a486feb3d..e668f936c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,7 +18,7 @@
     "**/node_modules": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact"],
   "editor.formatOnSave": true,
diff --git a/src/FlashListProps.ts b/src/FlashListProps.ts
index 90bb51176..9f03ee7dc 100644
--- a/src/FlashListProps.ts
+++ b/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>;
 }
diff --git a/src/__tests__/ViewabilityHelper.test.ts b/src/__tests__/ViewabilityHelper.test.ts
index af92e98a4..9c2cef498 100644
--- a/src/__tests__/ViewabilityHelper.test.ts
+++ b/src/__tests__/ViewabilityHelper.test.ts
@@ -256,6 +256,7 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper,
     horizontal,
     scrollOffset,
+    bottomVisibilityInset,
     listSize,
     getLayout,
     runAllTimers,
@@ -263,6 +264,7 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper: ViewabilityHelper;
     horizontal?: boolean;
     scrollOffset?: number;
+    bottomVisibilityInset?: number;
     listSize?: Dimension;
     getLayout?: (index: number) => Layout | undefined;
     runAllTimers?: boolean;
@@ -270,11 +272,12 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper.updateViewableItems(
       horizontal ?? false,
       scrollOffset ?? 0,
+      bottomVisibilityInset ?? 0,
       listSize ?? { height: 300, width: 300 },
       getLayout ??
         ((index) => {
           return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
-        })
+        }),
     );
     if (runAllTimers ?? true) {
       jest.runAllTimers();
diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index c5697b58d..db8c47c66 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -48,9 +48,10 @@ class ViewabilityHelper {
   public updateViewableItems(
     horizontal: boolean,
     scrollOffset: number,
+    bottomVisibilityInset: number,
     listSize: Dimension,
     getLayout: (index: number) => Layout | undefined,
-    viewableIndices?: number[]
+    viewableIndices?: number[],
   ) {
     if (viewableIndices !== undefined) {
       this.possiblyViewableIndices = viewableIndices;
diff --git a/src/viewability/ViewabilityManager.ts b/src/viewability/ViewabilityManager.ts
index 425f1ce54..5f6a2d338 100644
--- a/src/viewability/ViewabilityManager.ts
+++ b/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 bottomVisibilityInset =
+      this.flashListRef.props.bottomVisibilityInset ?? 0;
+
     this.viewabilityHelpers.forEach((viewabilityHelper) => {
       viewabilityHelper.updateViewableItems(
         this.flashListRef.props.horizontal ?? false,
         scrollOffset,
+        bottomVisibilityInset,
         listSize,
         (index: number) =>
           this.flashListRef.recyclerlistview_unsafe?.getLayout(index),

From c0cb6a8e981e27f443ad10cbc367d7d50ee3f8f7 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Mon, 12 Feb 2024 16:52:41 -0800
Subject: [PATCH 02/16] fixes

---
 .vscode/settings.json                   | 2 +-
 src/__tests__/ViewabilityHelper.test.ts | 2 +-
 src/viewability/ViewabilityHelper.ts    | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e668f936c..f96c7d41c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,7 +18,7 @@
     "**/node_modules": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "true"
   },
   "eslint.validate": ["typescript", "typescriptreact"],
   "editor.formatOnSave": true,
diff --git a/src/__tests__/ViewabilityHelper.test.ts b/src/__tests__/ViewabilityHelper.test.ts
index 9c2cef498..b4b25f84b 100644
--- a/src/__tests__/ViewabilityHelper.test.ts
+++ b/src/__tests__/ViewabilityHelper.test.ts
@@ -277,7 +277,7 @@ describe("ViewabilityHelper", () => {
       getLayout ??
         ((index) => {
           return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
-        }),
+        })
     );
     if (runAllTimers ?? true) {
       jest.runAllTimers();
diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index db8c47c66..15750915e 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -51,7 +51,7 @@ class ViewabilityHelper {
     bottomVisibilityInset: number,
     listSize: Dimension,
     getLayout: (index: number) => Layout | undefined,
-    viewableIndices?: number[],
+    viewableIndices?: number[]
   ) {
     if (viewableIndices !== undefined) {
       this.possiblyViewableIndices = viewableIndices;
@@ -77,6 +77,7 @@ class ViewabilityHelper {
         index,
         horizontal,
         scrollOffset,
+        bottomVisibilityInset,
         listSize,
         this.viewabilityConfig?.viewAreaCoveragePercentThreshold,
         this.viewabilityConfig?.itemVisiblePercentThreshold,
@@ -123,6 +124,7 @@ class ViewabilityHelper {
     index: number,
     horizontal: boolean,
     scrollOffset: number,
+    bottomVisibilityInset: number,
     listSize: Dimension,
     viewAreaCoveragePercentThreshold: number | null | undefined,
     itemVisiblePercentThreshold: number | null | undefined,

From 2b50ba62a1495775aebf87313233befb34ce8045 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Mon, 12 Feb 2024 16:53:13 -0800
Subject: [PATCH 03/16] forgot to save

---
 src/viewability/ViewabilityHelper.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index 15750915e..49ae8e6f7 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -134,7 +134,7 @@ class ViewabilityHelper {
     if (itemLayout === undefined) {
       return false;
     }
-    const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
+    const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset + bottomVisibilityInset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
     const listMainSize = horizontal ? listSize.width : listSize.height;
     const pixelsVisible =

From 19a736adc81fabc9e63d48519d3b3040cd95d3a2 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 12:12:05 -0800
Subject: [PATCH 04/16] fix

---
 .vscode/settings.json                | 2 +-
 src/viewability/ViewabilityHelper.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f96c7d41c..a486feb3d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,7 +18,7 @@
     "**/node_modules": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "true"
+    "source.fixAll.eslint": true
   },
   "eslint.validate": ["typescript", "typescriptreact"],
   "editor.formatOnSave": true,
diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index 49ae8e6f7..d97cdb8b6 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -134,9 +134,9 @@ class ViewabilityHelper {
     if (itemLayout === undefined) {
       return false;
     }
-    const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset + bottomVisibilityInset;
+    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 - bottomVisibilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 

From 0b7cb48243fa872a09d451fbc161de2d74074c14 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 12:56:38 -0800
Subject: [PATCH 05/16] fixes and debug logs

---
 src/__tests__/ViewabilityHelper.test.ts |  6 +++---
 src/viewability/ViewabilityHelper.ts    | 10 ++++++----
 src/viewability/ViewabilityManager.ts   |  6 +++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/__tests__/ViewabilityHelper.test.ts b/src/__tests__/ViewabilityHelper.test.ts
index b4b25f84b..711eb072f 100644
--- a/src/__tests__/ViewabilityHelper.test.ts
+++ b/src/__tests__/ViewabilityHelper.test.ts
@@ -256,7 +256,7 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper,
     horizontal,
     scrollOffset,
-    bottomVisibilityInset,
+    bottomViewabilityInset,
     listSize,
     getLayout,
     runAllTimers,
@@ -264,7 +264,7 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper: ViewabilityHelper;
     horizontal?: boolean;
     scrollOffset?: number;
-    bottomVisibilityInset?: number;
+    bottomViewabilityInset?: number;
     listSize?: Dimension;
     getLayout?: (index: number) => Layout | undefined;
     runAllTimers?: boolean;
@@ -272,7 +272,7 @@ describe("ViewabilityHelper", () => {
     viewabilityHelper.updateViewableItems(
       horizontal ?? false,
       scrollOffset ?? 0,
-      bottomVisibilityInset ?? 0,
+      bottomViewabilityInset ?? 0,
       listSize ?? { height: 300, width: 300 },
       getLayout ??
         ((index) => {
diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index d97cdb8b6..6dd0d8a90 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -48,7 +48,7 @@ class ViewabilityHelper {
   public updateViewableItems(
     horizontal: boolean,
     scrollOffset: number,
-    bottomVisibilityInset: number,
+    bottomViewabilityInset: number,
     listSize: Dimension,
     getLayout: (index: number) => Layout | undefined,
     viewableIndices?: number[]
@@ -77,7 +77,7 @@ class ViewabilityHelper {
         index,
         horizontal,
         scrollOffset,
-        bottomVisibilityInset,
+        bottomViewabilityInset,
         listSize,
         this.viewabilityConfig?.viewAreaCoveragePercentThreshold,
         this.viewabilityConfig?.itemVisiblePercentThreshold,
@@ -124,7 +124,7 @@ class ViewabilityHelper {
     index: number,
     horizontal: boolean,
     scrollOffset: number,
-    bottomVisibilityInset: number,
+    bottomViewabilityInset: number,
     listSize: Dimension,
     viewAreaCoveragePercentThreshold: number | null | undefined,
     itemVisiblePercentThreshold: number | null | undefined,
@@ -136,10 +136,12 @@ class ViewabilityHelper {
     }
     const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
-    const listMainSize = horizontal ? listSize.width : listSize.height - bottomVisibilityInset;
+    const listMainSize = horizontal ? listSize.width : listSize.height - bottomViewabilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 
+    console.log(`pikachu ViewabilityHelpers. itemTop: ${itemTop}. itemSize: ${itemSize}. pixelsVisible: ${pixelsVisible}. listMainSize: ${listMainSize}. listSize.height: ${listSize.height}. bottomViewabilityInset: ${bottomViewabilityInset}`)
+
     // Always consider item fully viewable if it is fully visible, regardless of the `viewAreaCoveragePercentThreshold`
     // Account for floating point imprecision.
     if (Math.abs(pixelsVisible - itemSize) <= 0.001) {
diff --git a/src/viewability/ViewabilityManager.ts b/src/viewability/ViewabilityManager.ts
index 5f6a2d338..e5cee7ac1 100644
--- a/src/viewability/ViewabilityManager.ts
+++ b/src/viewability/ViewabilityManager.ts
@@ -77,14 +77,14 @@ export default class ViewabilityManager<T> {
       (this.flashListRef.recyclerlistview_unsafe?.getCurrentScrollOffset() ??
         0) - this.flashListRef.firstItemOffset;
 
-    const bottomVisibilityInset =
-      this.flashListRef.props.bottomVisibilityInset ?? 0;
+    const bottomViewabilityInset =
+      this.flashListRef.props.bottomViewabilityInsetRef.current ?? 0;
 
     this.viewabilityHelpers.forEach((viewabilityHelper) => {
       viewabilityHelper.updateViewableItems(
         this.flashListRef.props.horizontal ?? false,
         scrollOffset,
-        bottomVisibilityInset,
+        bottomViewabilityInset,
         listSize,
         (index: number) =>
           this.flashListRef.recyclerlistview_unsafe?.getLayout(index),

From 7ddd9c8f8083157fe9d3193104a5441f96c0bbd3 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 13:08:34 -0800
Subject: [PATCH 06/16] fix

---
 src/viewability/ViewabilityManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/viewability/ViewabilityManager.ts b/src/viewability/ViewabilityManager.ts
index e5cee7ac1..cc23bfe9b 100644
--- a/src/viewability/ViewabilityManager.ts
+++ b/src/viewability/ViewabilityManager.ts
@@ -78,7 +78,7 @@ export default class ViewabilityManager<T> {
         0) - this.flashListRef.firstItemOffset;
 
     const bottomViewabilityInset =
-      this.flashListRef.props.bottomViewabilityInsetRef.current ?? 0;
+      this.flashListRef.props.bottomViewabilityInsetRef?.current ?? 0;
 
     this.viewabilityHelpers.forEach((viewabilityHelper) => {
       viewabilityHelper.updateViewableItems(

From 2d20f7f66926bf09c43bb233de6af05dfbec17de Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 13:50:51 -0800
Subject: [PATCH 07/16] debug logs

---
 src/FlashList.tsx                    | 2 ++
 src/viewability/ViewabilityHelper.ts | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index ac2b56fa7..107be1655 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -535,6 +535,8 @@ class FlashList<T> extends React.PureComponent<
       ? event.nativeEvent.layout.x
       : event.nativeEvent.layout.y;
 
+    console.log(`pikachu FlashList updateDistanceFromWindow. newDistanceFromWindow: ${newDistanceFromWindow}. distanceFromWindow: ${this.distanceFromWindow}`)
+
     if (this.distanceFromWindow !== newDistanceFromWindow) {
       this.distanceFromWindow = newDistanceFromWindow;
       this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;
diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index 6dd0d8a90..4fbb879e0 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -140,8 +140,6 @@ class ViewabilityHelper {
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 
-    console.log(`pikachu ViewabilityHelpers. itemTop: ${itemTop}. itemSize: ${itemSize}. pixelsVisible: ${pixelsVisible}. listMainSize: ${listMainSize}. listSize.height: ${listSize.height}. bottomViewabilityInset: ${bottomViewabilityInset}`)
-
     // Always consider item fully viewable if it is fully visible, regardless of the `viewAreaCoveragePercentThreshold`
     // Account for floating point imprecision.
     if (Math.abs(pixelsVisible - itemSize) <= 0.001) {

From 448c7c38fa24c3e59751cb7f400a60daaa459cec Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 15:09:31 -0800
Subject: [PATCH 08/16] attempting to make updateViewableItems usable from ref

---
 src/FlashList.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index 107be1655..d14273943 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -283,6 +283,10 @@ class FlashList<T> extends React.PureComponent<
     return null;
   };
 
+  updateViewableItems() {
+    this.viewabilityManager.updateViewableItems();
+  }
+
   componentDidMount() {
     if (this.props.data?.length === 0) {
       this.raiseOnLoadEventIfNeeded();
@@ -876,4 +880,16 @@ class FlashList<T> extends React.PureComponent<
   };
 }
 
-export default FlashList;
+const FlashListComponent = React.forwardRef(FlashList);
+
+const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T> & {myRef: React.Ref<typeof FlashListComponent>}) => {
+  const flashListRef = React.useRef<FlashList<T> | null>(null);
+
+  React.useImperativeHandle(flashListRef, () => ({
+    updateViewabableItems: () => flashListRef.current?.updateViewableItems(),
+  }), []);
+
+  return<FlashListComponent ref={flashListRef} {...props} />;
+}
+
+export default FlashListComponentWrapper;

From 3db2708cfb1d0f6193d3492d1d41183f5c608e18 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 15:13:59 -0800
Subject: [PATCH 09/16] Fix

---
 src/FlashList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index d14273943..0dd36866a 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -882,6 +882,10 @@ class FlashList<T> extends React.PureComponent<
 
 const FlashListComponent = React.forwardRef(FlashList);
 
+/**
+ * Wrap the component using method 2 in https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+ * to support the forward ref with a generic type.
+ */
 const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T> & {myRef: React.Ref<typeof FlashListComponent>}) => {
   const flashListRef = React.useRef<FlashList<T> | null>(null);
 
@@ -892,4 +896,8 @@ const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T>
   return<FlashListComponent ref={flashListRef} {...props} />;
 }
 
-export default FlashListComponentWrapper;
+/**
+ * Then wrap this in another forwardRef because createAnimatedComponent only works with
+ * class components or components wrapped in React.forwardRef().
+ */
+export default React.forwardRef(FlashListComponentWrapper);

From 8d0f577e1f673c816e0032f86c53ef8d59830aa2 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 15:31:39 -0800
Subject: [PATCH 10/16] wip

---
 src/FlashList.tsx | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index 0dd36866a..b7f33f58e 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -880,24 +880,30 @@ class FlashList<T> extends React.PureComponent<
   };
 }
 
-const FlashListComponent = React.forwardRef(FlashList);
+export default FlashList;
 
-/**
- * Wrap the component using method 2 in https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
- * to support the forward ref with a generic type.
- */
-const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T> & {myRef: React.Ref<typeof FlashListComponent>}) => {
-  const flashListRef = React.useRef<FlashList<T> | null>(null);
+// const FlashListComponent = React.forwardRef(FlashList) as <T extends any>(props: FlashListProps<T> & { ref?: React.Ref<FlashList<T>> }) => {
+//   React.useImperativeHandle(ref, () => ({
+//         updateViewabableItems: () => ref?.current?.updateViewableItems(),
+//       }), [])
 
-  React.useImperativeHandle(flashListRef, () => ({
-    updateViewabableItems: () => flashListRef.current?.updateViewableItems(),
-  }), []);
+//   return <FlashList ref={ref} {...props} />
+// }
 
-  return<FlashListComponent ref={flashListRef} {...props} />;
-}
 
-/**
- * Then wrap this in another forwardRef because createAnimatedComponent only works with
- * class components or components wrapped in React.forwardRef().
- */
-export default React.forwardRef(FlashListComponentWrapper);
+// const FRefOutputComp1 = React.forwardRef(FRefInputComp) as
+//   <T extends Option>(p: Props<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement
+
+// const FlashListComponent = React.forwardRef(FlashList);
+
+// const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T> & {myRef: React.Ref<typeof FlashListComponent>}) => {
+//   const flashListRef = React.useRef<FlashList<T> | null>(null);
+
+//   React.useImperativeHandle(flashListRef, () => ({
+//     updateViewabableItems: () => flashListRef.current?.updateViewableItems(),
+//   }), []);
+
+//   return<FlashListComponent ref={flashListRef} {...props} />;
+// }
+
+// export default FlashListComponentWrapper;

From 92620d51f0ccabb6492cf6c49eb64f4e9e9f41e3 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Tue, 13 Feb 2024 15:40:01 -0800
Subject: [PATCH 11/16] make it public

---
 src/FlashList.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index b7f33f58e..b933f3106 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -283,10 +283,6 @@ class FlashList<T> extends React.PureComponent<
     return null;
   };
 
-  updateViewableItems() {
-    this.viewabilityManager.updateViewableItems();
-  }
-
   componentDidMount() {
     if (this.props.data?.length === 0) {
       this.raiseOnLoadEventIfNeeded();
@@ -790,6 +786,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));
   }

From 980c6c0f7434dcccbb9d9fd76abf67a59577ab8a Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Wed, 14 Feb 2024 08:30:05 -0800
Subject: [PATCH 12/16] cleanup

---
 src/FlashList.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index b933f3106..06a5ed35c 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -535,8 +535,6 @@ class FlashList<T> extends React.PureComponent<
       ? event.nativeEvent.layout.x
       : event.nativeEvent.layout.y;
 
-    console.log(`pikachu FlashList updateDistanceFromWindow. newDistanceFromWindow: ${newDistanceFromWindow}. distanceFromWindow: ${this.distanceFromWindow}`)
-
     if (this.distanceFromWindow !== newDistanceFromWindow) {
       this.distanceFromWindow = newDistanceFromWindow;
       this.windowCorrectionConfig.value.windowShift = -this.distanceFromWindow;

From 008d6307aa8ae063617f88a3a3042cfcb0b25876 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Wed, 14 Feb 2024 09:24:17 -0800
Subject: [PATCH 13/16] cleanup

---
 src/FlashList.tsx | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/src/FlashList.tsx b/src/FlashList.tsx
index 06a5ed35c..96cfb1c88 100644
--- a/src/FlashList.tsx
+++ b/src/FlashList.tsx
@@ -879,29 +879,3 @@ class FlashList<T> extends React.PureComponent<
 }
 
 export default FlashList;
-
-// const FlashListComponent = React.forwardRef(FlashList) as <T extends any>(props: FlashListProps<T> & { ref?: React.Ref<FlashList<T>> }) => {
-//   React.useImperativeHandle(ref, () => ({
-//         updateViewabableItems: () => ref?.current?.updateViewableItems(),
-//       }), [])
-
-//   return <FlashList ref={ref} {...props} />
-// }
-
-
-// const FRefOutputComp1 = React.forwardRef(FRefInputComp) as
-//   <T extends Option>(p: Props<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement
-
-// const FlashListComponent = React.forwardRef(FlashList);
-
-// const FlashListComponentWrapper = <T extends any>({...props}: FlashListProps<T> & {myRef: React.Ref<typeof FlashListComponent>}) => {
-//   const flashListRef = React.useRef<FlashList<T> | null>(null);
-
-//   React.useImperativeHandle(flashListRef, () => ({
-//     updateViewabableItems: () => flashListRef.current?.updateViewableItems(),
-//   }), []);
-
-//   return<FlashListComponent ref={flashListRef} {...props} />;
-// }
-
-// export default FlashListComponentWrapper;

From c485f154599c86d70a4f3e9876088507f6090a01 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Wed, 14 Feb 2024 09:32:21 -0800
Subject: [PATCH 14/16] lint fix hopefully

---
 src/viewability/ViewabilityHelper.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index 4fbb879e0..899822ea5 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -136,7 +136,8 @@ class ViewabilityHelper {
     }
     const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
-    const listMainSize = horizontal ? listSize.width : listSize.height - bottomViewabilityInset;
+    const listMainSize = horizontal ? listSize.width :
+      listSize.height - bottomViewabilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 

From d21cd618eee0afd718ca976c44ba26b2637c1212 Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Wed, 14 Feb 2024 09:59:05 -0800
Subject: [PATCH 15/16] another attempt at fixing the lint error

---
 src/viewability/ViewabilityHelper.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index 899822ea5..fbd1f8c86 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -136,8 +136,8 @@ class ViewabilityHelper {
     }
     const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
-    const listMainSize = horizontal ? listSize.width :
-      listSize.height - bottomViewabilityInset;
+    const listMainSize = horizontal ? listSize.width
+      : listSize.height - bottomViewabilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);
 

From 36119977ce8e76fe3cd5125340622c514febe12a Mon Sep 17 00:00:00 2001
From: Donald Chen <donald.chen@discordapp.com>
Date: Wed, 14 Feb 2024 09:59:33 -0800
Subject: [PATCH 16/16] actually, let's try this

---
 src/viewability/ViewabilityHelper.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/viewability/ViewabilityHelper.ts b/src/viewability/ViewabilityHelper.ts
index fbd1f8c86..e39bef9b2 100644
--- a/src/viewability/ViewabilityHelper.ts
+++ b/src/viewability/ViewabilityHelper.ts
@@ -136,7 +136,8 @@ class ViewabilityHelper {
     }
     const itemTop = (horizontal ? itemLayout.x : itemLayout.y) - scrollOffset;
     const itemSize = horizontal ? itemLayout.width : itemLayout.height;
-    const listMainSize = horizontal ? listSize.width
+    const listMainSize = horizontal
+      ? listSize.width
       : listSize.height - bottomViewabilityInset;
     const pixelsVisible =
       Math.min(itemTop + itemSize, listMainSize) - Math.max(itemTop, 0);