@react-native-tvos/virtualized-lists 0.76.6-0 → 0.77.0-0

package/Interaction/Batchinator.js

@@ -4,13 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
-'use strict';
-
-const {InteractionManager} = require('react-native');
+import {InteractionManager} from 'react-native';
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 
 /**
  * A simple class for batching up invocations of a low-pri callback. A timeout is set to run the
@@ -38,37 +37,47 @@ class Batchinator {
   _callback: () => void;
   _delay: number;
   _taskHandle: ?{cancel: () => void, ...};
-  constructor(callback: () => void, delayMS: number) {
-    this._delay = delayMS;
+
+  constructor(callback: () => void, delay: number) {
+    this._delay = delay;
     this._callback = callback;
   }
+
   /*
    * Cleanup any pending tasks.
    *
    * By default, if there is a pending task the callback is run immediately. Set the option abort to
    * true to not call the callback if it was pending.
    */
-  dispose(options: {abort: boolean, ...} = {abort: false}) {
+  dispose(): void {
     if (this._taskHandle) {
       this._taskHandle.cancel();
-      if (!options.abort) {
-        this._callback();
-      }
       this._taskHandle = null;
     }
   }
-  schedule() {
+
+  schedule(): void {
     if (this._taskHandle) {
       return;
     }
-    const timeoutHandle = setTimeout(() => {
-      this._taskHandle = InteractionManager.runAfterInteractions(() => {
-        // Note that we clear the handle before invoking the callback so that if the callback calls
-        // schedule again, it will actually schedule another task.
-        this._taskHandle = null;
-        this._callback();
-      });
-    }, this._delay);
+    const invokeCallback = () => {
+      // Note that we clear the handle before invoking the callback so that if the callback calls
+      // schedule again, it will actually schedule another task.
+      this._taskHandle = null;
+      this._callback();
+    };
+
+    const timeoutHandle = setTimeout(
+      // NOTE: When shipping this, delete `Batchinator` instead of only these
+      // lines of code. Without `InteractionManager`, it's just a `setTimeout`.
+      ReactNativeFeatureFlags.disableInteractionManagerInBatchinator()
+        ? invokeCallback
+        : () => {
+            this._taskHandle =
+              InteractionManager.runAfterInteractions(invokeCallback);
+          },
+      this._delay,
+    );
     this._taskHandle = {cancel: () => clearTimeout(timeoutHandle)};
   }
 }

package/Lists/ListMetricsAggregator.js

@@ -167,6 +167,30 @@ export default class ListMetricsAggregator {
       // check for invalid frames due to row re-ordering
       return frame;
     } else {
+      let offset;
+
+      const highestMeasuredCellIndex = this.getHighestMeasuredCellIndex();
+      if (highestMeasuredCellIndex < index) {
+        // If any of the cells before this one have been laid out already, we
+        // should use that information in the estimations.
+        // This is important because if the list has a header, the initial cell
+        // will have a larger offset that we should take into account here.
+        const highestMeasuredCellFrame = this.getCellMetrics(
+          highestMeasuredCellIndex,
+          props,
+        );
+        if (highestMeasuredCellFrame) {
+          offset =
+            highestMeasuredCellFrame.offset +
+            highestMeasuredCellFrame.length +
+            this._averageCellLength * (index - highestMeasuredCellIndex - 1);
+        }
+      }
+
+      if (offset == null) {
+        offset = this._averageCellLength * index;
+      }
+
       const {data, getItemCount} = props;
       invariant(
         index >= 0 && index < getItemCount(data),
@@ -174,7 +198,7 @@ export default class ListMetricsAggregator {
       );
       return {
         length: this._averageCellLength,
-        offset: this._averageCellLength * index,
+        offset,
         index,
         isMounted: false,
       };

package/Lists/ViewabilityHelper.js

@@ -35,7 +35,7 @@ export type ViewabilityConfigCallbackPair = {
   ...
 };
 
-export type ViewabilityConfig = {|
+export type ViewabilityConfig = $ReadOnly<{|
   /**
    * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
    * viewability callback will be fired. A high number means that scrolling through content without
@@ -62,7 +62,7 @@ export type ViewabilityConfig = {|
    * render.
    */
   waitForInteraction?: boolean,
-|};
+|}>;
 
 /**
  * A Utility class for calculating viewable items based on current metrics like scroll position and

package/Lists/VirtualizedList.js

@@ -357,7 +357,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
 
   _registerAsNestedChild = (childList: {
     cellKey: string,
-    ref: React.ElementRef<typeof VirtualizedList>,
+    ref: VirtualizedList,
   }): void => {
     this._nestedChildLists.add(childList.ref, childList.cellKey);
     if (this._hasInteracted) {
@@ -365,9 +365,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     }
   };
 
-  _unregisterAsNestedChild = (childList: {
-    ref: React.ElementRef<typeof VirtualizedList>,
-  }): void => {
+  _unregisterAsNestedChild = (childList: {ref: VirtualizedList}): void => {
     this._nestedChildLists.remove(childList.ref);
   };
 
@@ -690,7 +688,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (this._isNestedWithSameOrientation()) {
       this.context.unregisterAsNestedChild({ref: this});
     }
-    this._updateCellsToRenderBatcher.dispose({abort: true});
+    this._updateCellsToRenderBatcher.dispose();
     this._viewabilityTuples.forEach(tuple => {
       tuple.viewabilityHelper.dispose();
     });
@@ -1200,7 +1198,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {data, extraData} = this.props;
+    const {data, extraData, getItemLayout} = this.props;
     if (data !== prevProps.data || extraData !== prevProps.extraData) {
       // clear the viewableIndices cache to also trigger
       // the onViewableItemsChanged callback with the new data
@@ -1221,6 +1219,14 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (hiPriInProgress) {
       this._hiPriInProgress = false;
     }
+
+    // We only call `onEndReached` after we render the last cell, but when
+    // getItemLayout is present, we can scroll past the last rendered cell, and
+    // never trigger a new layout or bounds change, so we need to check again
+    // after rendering more cells.
+    if (getItemLayout != null) {
+      this._maybeCallOnEdgeReached();
+    }
   }
 
   _cellRefs: {[string]: null | CellRenderer<any>} = {};
@@ -1536,6 +1542,14 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       onEndReached,
       onEndReachedThreshold,
     } = this.props;
+    // Wait until we have real metrics
+    if (
+      !this._listMetrics.hasContentLength() ||
+      this._scrollMetrics.visibleLength === 0
+    ) {
+      return;
+    }
+
     // If we have any pending scroll updates it means that the scroll metrics
     // are out of date and we should not call any of the edge reached callbacks.
     if (this.state.pendingScrollUpdateCount > 0) {
@@ -1679,6 +1693,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     };
   };
 
+  unstable_onScroll(e: Object) {
+    this._onScroll(e);
+  }
+
   _onScroll = (e: Object) => {
     this._nestedChildLists.forEach(childList => {
       childList._onScroll(e);
@@ -1784,7 +1802,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       this._hiPriInProgress = true;
       // Don't worry about interactions when scrolling quickly; focus on filling content as fast
       // as possible.
-      this._updateCellsToRenderBatcher.dispose({abort: true});
+      this._updateCellsToRenderBatcher.dispose();
       this._updateCellsToRender();
       return;
     } else {
@@ -1831,6 +1849,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     return hiPri;
   }
 
+  unstable_onScrollBeginDrag(e: ScrollEvent) {
+    this._onScrollBeginDrag(e);
+  }
+
   _onScrollBeginDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onScrollBeginDrag(e);
@@ -1842,6 +1864,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };
 
+  unstable_onScrollEndDrag(e: ScrollEvent) {
+    this._onScrollEndDrag(e);
+  }
+
   _onScrollEndDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onScrollEndDrag(e);
@@ -1854,6 +1880,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
   };
 
+  unstable_onMomentumScrollBegin(e: ScrollEvent) {
+    this._onMomentumScrollBegin(e);
+  }
+
   _onMomentumScrollBegin = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onMomentumScrollBegin(e);
@@ -1861,6 +1891,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
   };
 
+  unstable_onMomentumScrollEnd(e: ScrollEvent) {
+    this._onMomentumScrollEnd(e);
+  }
+
   _onMomentumScrollEnd = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onMomentumScrollEnd(e);

package/Lists/VirtualizedListCellRenderer.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 import type {CellRendererProps, RenderItemType} from './VirtualizedListProps';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
@@ -69,17 +68,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
     props: Props<ItemT>,
     prevState: State<ItemT>,
   ): ?State<ItemT> {
-    if (ReactNativeFeatureFlags.enableOptimisedVirtualizedCells()) {
-      if (props.item !== prevState.separatorProps.leadingItem) {
-        return {
-          separatorProps: {
-            ...prevState.separatorProps,
-            leadingItem: props.item,
-          },
-        };
-      }
-      return null;
-    } else {
+    if (props.item !== prevState.separatorProps.leadingItem) {
       return {
         separatorProps: {
           ...prevState.separatorProps,
@@ -87,6 +76,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
         },
       };
     }
+    return null;
   }
 
   // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not

package/Lists/VirtualizedSectionList.js

@@ -146,7 +146,7 @@ class VirtualizedSectionList<
     this._listRef.scrollToIndex(toIndexParams);
   }
 
-  getListRef(): ?React.ElementRef<typeof VirtualizedList> {
+  getListRef(): ?VirtualizedList {
     return this._listRef;
   }
 
@@ -598,14 +598,12 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
   );
 }
 
-/* $FlowFixMe[class-object-subtyping] added when improving typing for this
- * parameters */
-// $FlowFixMe[method-unbinding]
-module.exports = (VirtualizedSectionList: React.AbstractComponent<
-  React.ElementConfig<typeof VirtualizedSectionList>,
-  $ReadOnly<{
-    getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
-    scrollToLocation: (params: ScrollToLocationParamsType) => void,
-    ...
-  }>,
->);
+module.exports = VirtualizedSectionList as component(
+  ref: React.RefSetter<
+    interface {
+      getListRef(): ?VirtualizedList,
+      scrollToLocation(params: ScrollToLocationParamsType): void,
+    },
+  >,
+  ...Props<SectionBase<any>>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-tvos/virtualized-lists",
-  "version": "0.76.6-0",
+  "version": "0.77.0-0",
   "description": "Virtualized lists for React Native.",
   "license": "MIT",
   "repository": {