Fix few more types

Author: naqvitalha

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     "@shopify/jsx-no-complex-expressions": "off",
     "@shopify/react-prefer-private-members": "off",
     "eslint-comments/disable-enable-pair": "off",
+    "@shopify/strict-component-boundaries": "off",
     "import/no-cycle": "off",
     "import/no-named-as-default": "off",
     "max-params": "off",

src/FlashList.tsx

@@ -42,6 +42,7 @@ import {
   hasUnsupportedKeysInContentContainerStyle,
   updateContentStyle,
 } from "./utils/ContentContainerUtils";
+import { FlashListRef, ScrollToEdgeParams } from "./FlashListRef";
 
 interface StickyProps extends StickyContainerProps {
   children: any;
@@ -62,10 +63,10 @@ interface ExtraData<T> {
   value?: T;
 }
 
-class FlashList<T> extends React.PureComponent<
-  FlashListProps<T>,
-  FlashListState<T>
-> {
+class FlashList<T>
+  extends React.PureComponent<FlashListProps<T>, FlashListState<T>>
+  implements FlashListRef<T>
+{
   private rlvRef?: RecyclerListView<RecyclerListViewProps, any>;
   private stickyContentContainerRef?: PureComponentWrapper;
   private listFixedDimensionSize = 0;
@@ -788,7 +789,7 @@ class FlashList<T> extends React.PureComponent<
     this.rlvRef?.scrollToEnd(Boolean(params?.animated));
   }
 
-  public scrollToIndex(params: {
+  public async scrollToIndex(params: {
     animated?: boolean | null | undefined;
     index: number;
     viewOffset?: number | undefined;
@@ -885,7 +886,7 @@ class FlashList<T> extends React.PureComponent<
    * @returns {Object} The dimensions of the child container.
    */
   public getChildContainerDimensions() {
-    return this.rlvRef?.getContentDimension();
+    return this.rlvRef!.getContentDimension();
   }
 
   /**
@@ -902,7 +903,7 @@ class FlashList<T> extends React.PureComponent<
    * @returns {Object} The size of the list.
    */
   public getWindowSize() {
-    return this.rlvRef?.getRenderedSize();
+    return this.rlvRef!.getRenderedSize();
   }
 
   /**
@@ -924,6 +925,30 @@ class FlashList<T> extends React.PureComponent<
   public getFirstVisibleIndex() {
     return this.rlvRef?.findApproxFirstVisibleIndex() ?? -1;
   }
+
+  flashScrollIndicators() {
+    this.getNativeScrollRef()?.flashScrollIndicators();
+  }
+
+  getNativeScrollRef() {
+    console.log("hello");
+    return (this.rlvRef as any)?._scrollComponent?._scrollViewRef;
+  }
+
+  getScrollResponder() {
+    return this.getNativeScrollRef()?.getScrollResponder();
+  }
+
+  scrollToTop(params?: ScrollToEdgeParams) {
+    this.rlvRef?.scrollToTop(params?.animated);
+  }
+
+  computeVisibleIndices() {
+    console.warn(
+      "computeVisibleIndices is not implemented in old architecture"
+    );
+    return { startIndex: -1, endIndex: -2 };
+  }
 }
 
 export default FlashList;

src/FlashListRef.ts

@@ -1,5 +1,6 @@
 import type { RVLayout } from "./recyclerview/layout-managers/LayoutManager";
 import { RecyclerViewProps } from "./recyclerview/RecyclerViewProps";
+import { CompatScroller } from "./recyclerview/components/CompatScroller";
 
 /**
  * Base parameters for scrolling to the edges of the list.
@@ -112,7 +113,7 @@ export interface FlashListRef<T> {
    *
    * @returns The native scroll view reference
    */
-  getNativeScrollRef: () => any;
+  getNativeScrollRef: () => CompatScroller | null;
 
   /**
    * Returns a reference to the scroll responder.
@@ -121,7 +122,7 @@ export interface FlashListRef<T> {
    *
    * @returns The scroll responder
    */
-  getScrollResponder: () => any;
+  getScrollResponder: CompatScroller["getScrollResponder"];
 
   /**
    * Returns the underlying scrollable node.
@@ -231,7 +232,7 @@ export interface FlashListRef<T> {
    * const itemLayout = listRef.current?.getLayout(5);
    * console.log(`Item 5 position: (${itemLayout.x}, ${itemLayout.y})`);
    */
-  getLayout: (index: number) => RVLayout;
+  getLayout: (index: number) => RVLayout | undefined;
 
   /**
    * Returns the absolute last scroll offset.
@@ -268,7 +269,7 @@ export interface FlashListRef<T> {
    * const { startIndex, endIndex } = listRef.current?.getVisibleIndices();
    * console.log(`Visible items: ${startIndex} to ${endIndex}`);
    */
-  getVisibleIndices: () => { startIndex: number; endIndex: number };
+  computeVisibleIndices: () => { startIndex: number; endIndex: number };
 
   /**
    * Returns the index of the first visible item.
@@ -283,7 +284,7 @@ export interface FlashListRef<T> {
   getFirstVisibleIndex: () => number;
 
   /**
-   * Forces recalculation of viewable items.
+   * Forces recalculation of viewable items (vieability callbacks).
    *
    * Call this after any operation that might affect item visibility but
    * doesn't trigger a scroll event.

src/index.ts

@@ -5,6 +5,7 @@ import { RecyclerView } from "./recyclerview/RecyclerView";
 
 // Keep this unmodified for TS type checking
 export { default as FlashList } from "./FlashList";
+export { FlashListRef } from "./FlashListRef";
 export {
   FlashListProps,
   ContentStyle,
@@ -63,6 +64,7 @@ if (
 ) {
   Object.defineProperty(module.exports, "FlashList", {
     get() {
+      return OriginalFlashList;
       return isNewCoreEnabled() ? RecyclerView : OriginalFlashList;
     },
     configurable: true,

src/recyclerview/RecyclerView.tsx

@@ -19,6 +19,8 @@ import {
   NativeSyntheticEvent,
 } from "react-native";
 
+import { FlashListRef } from "../FlashListRef";
+
 import { RVDimension } from "./layout-managers/LayoutManager";
 import {
   areDimensionsNotEqual,
@@ -55,7 +57,7 @@ import { RenderTimeTracker } from "./helpers/RenderTimeTracker";
  */
 const RecyclerViewComponent = <T,>(
   props: RecyclerViewProps<T>,
-  ref: React.Ref<any>
+  ref: React.Ref<FlashListRef<T>>
 ) => {
   // Destructure props and initialize refs
   const {
@@ -535,7 +537,7 @@ const RecyclerViewComponent = <T,>(
 
 // Type definition for the RecyclerView component
 type RecyclerViewType = <T>(
-  props: RecyclerViewProps<T> & { ref?: React.Ref<any> }
+  props: RecyclerViewProps<T> & { ref?: React.Ref<FlashListRef<T>> }
 ) => React.JSX.Element;
 
 // Create and export the memoized, forwarded ref component

src/recyclerview/RecyclerViewManager.ts

@@ -262,7 +262,7 @@ export class RecyclerViewManager<T> {
     return this.layoutManager !== undefined;
   }
 
-  getVisibleIndices() {
+  computeVisibleIndices() {
     if (!this.layoutManager) {
       throw new Error(
         "LayoutManager is not initialized, visible indices are not unavailable"
@@ -302,7 +302,7 @@ export class RecyclerViewManager<T> {
       this.itemViewabilityManager.updateViewableItems(
         this.propsRef.masonry
           ? this.engagedIndicesTracker.getEngagedIndices().toArray()
-          : this.getVisibleIndices().toArray()
+          : this.computeVisibleIndices().toArray()
       );
   }
 
@@ -396,7 +396,7 @@ export class RecyclerViewManager<T> {
     const layoutManager = this.layoutManager;
     if (layoutManager) {
       this.applyInitialScrollAdjustment();
-      const visibleIndices = this.getVisibleIndices();
+      const visibleIndices = this.computeVisibleIndices();
       // console.log("---------> visibleIndices", visibleIndices);
       this.hasRenderedProgressively = visibleIndices.every(
         (index) =>

src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -157,7 +157,7 @@ export function useRecyclerViewController<T>(
       // Update the tracked first visible item
       const firstVisibleIndex = Math.max(
         0,
-        recyclerViewManager.getVisibleIndices().startIndex
+        recyclerViewManager.computeVisibleIndices().startIndex
       );
       if (firstVisibleIndex !== undefined && firstVisibleIndex >= 0) {
         firstVisibleItemKey.current = keyExtractor(
@@ -431,7 +431,12 @@ export function useRecyclerViewController<T>(
         return recyclerViewManager.getWindowSize();
       },
       getLayout: (index: number) => {
-        return recyclerViewManager.getLayout(index);
+        try {
+          return recyclerViewManager.getLayout(index);
+        } catch (error) {
+          console.warn(error);
+          return undefined;
+        }
       },
       getAbsoluteLastScrollOffset: () => {
         return recyclerViewManager.getAbsoluteLastScrollOffset();
@@ -442,11 +447,11 @@ export function useRecyclerViewController<T>(
       recordInteraction: () => {
         recyclerViewManager.recordInteraction();
       },
-      getVisibleIndices: () => {
-        return recyclerViewManager.getVisibleIndices();
+      computeVisibleIndices: () => {
+        return recyclerViewManager.computeVisibleIndices();
       },
       getFirstVisibleIndex: () => {
-        return recyclerViewManager.getVisibleIndices().startIndex;
+        return recyclerViewManager.computeVisibleIndices().startIndex;
       },
       recomputeViewableItems: () => {
         recyclerViewManager.recomputeViewableItems();