@react-native-tvos/virtualized-lists 0.75.2-0rc1 → 0.76.0-0rc1

package/Lists/VirtualizedList.js

@@ -940,7 +940,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     // 2a. Add a cell for ListEmptyComponent if applicable
     const itemCount = this.props.getItemCount(data);
     if (itemCount === 0 && ListEmptyComponent) {
-      const element: React.Element<any> = ((React.isValidElement(
+      const element: ExactReactElement_DEPRECATED<any> = ((React.isValidElement(
         ListEmptyComponent,
       ) ? (
         ListEmptyComponent
@@ -1863,7 +1863,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   _updateCellsToRender = () => {
     this._updateViewableItems(this.props, this.state.cellsAroundViewport);
 
-    this.setState((state, props) => {
+    this.setState((state, props: any) => {
       const cellsAroundViewport = this._adjustCellsAroundViewport(
         props,
         state.cellsAroundViewport,
@@ -1908,12 +1908,14 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   }
 
   _getNonViewportRenderRegions = (
-    props: CellMetricProps,
+    props: CellMetricProps & {
+      additionalRenderRegions?: {first: number, last: number}[],
+    },
   ): $ReadOnlyArray<{
     first: number,
     last: number,
   }> => {
-    let nonViewportRenderRegions = [];
+    let nonViewportRenderRegions: {first: number, last: number}[] = [];
 
     if (props?.additionalRenderRegions?.length) {
       nonViewportRenderRegions = [...props.additionalRenderRegions];

package/Lists/VirtualizedListCellRenderer.js

@@ -8,6 +8,7 @@
  * @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 {
@@ -25,7 +26,7 @@ export type Props<ItemT> = {
   ItemSeparatorComponent: ?React.ComponentType<
     any | {highlighted: boolean, leadingItem: ?ItemT},
   >,
-  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListItemComponent?: ?(React.ComponentType<any> | React.MixedElement),
   cellKey: string,
   horizontal: ?boolean,
   index: number,
@@ -53,7 +54,7 @@ type State<ItemT> = {
   ...
 };
 
-export default class CellRenderer<ItemT> extends React.Component<
+export default class CellRenderer<ItemT> extends React.PureComponent<
   Props<ItemT>,
   State<ItemT>,
 > {
@@ -68,12 +69,24 @@ export default class CellRenderer<ItemT> extends React.Component<
     props: Props<ItemT>,
     prevState: State<ItemT>,
   ): ?State<ItemT> {
-    return {
-      separatorProps: {
-        ...prevState.separatorProps,
-        leadingItem: props.item,
-      },
-    };
+    if (ReactNativeFeatureFlags.enableOptimisedVirtualizedCells()) {
+      if (props.item !== prevState.separatorProps.leadingItem) {
+        return {
+          separatorProps: {
+            ...prevState.separatorProps,
+            leadingItem: props.item,
+          },
+        };
+      }
+      return null;
+    } else {
+      return {
+        separatorProps: {
+          ...prevState.separatorProps,
+          leadingItem: props.item,
+        },
+      };
+    }
   }
 
   // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not

package/Lists/VirtualizedListProps.js

@@ -155,17 +155,26 @@ type OptionalProps = {|
    * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for
    * your use-case.
    */
-  ListItemComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListItemComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Rendered when the list is empty. Can be a React Component Class, a render function, or
    * a rendered element.
    */
-  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListEmptyComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
    * a rendered element.
    */
-  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListFooterComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Styling for internal View for ListFooterComponent
    */
@@ -174,7 +183,10 @@ type OptionalProps = {|
    * Rendered at the top of all the items. Can be a React Component Class, a render function, or
    * a rendered element.
    */
-  ListHeaderComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListHeaderComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Styling for internal View for ListHeaderComponent
    */
@@ -244,7 +256,7 @@ type OptionalProps = {|
    * <RefreshControl> component built internally. The onRefresh and refreshing
    * props are also ignored. Only works for vertical VirtualizedList.
    */
-  refreshControl?: ?React.Element<any>,
+  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
   /**
    * Set this true while waiting for new data from a refresh.
    */
@@ -258,7 +270,7 @@ type OptionalProps = {|
   /**
    * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
    */
-  renderScrollComponent?: (props: Object) => React.Element<any>,
+  renderScrollComponent?: (props: Object) => ExactReactElement_DEPRECATED<any>,
   /**
    * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
    * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.

package/Lists/VirtualizedSectionList.js

@@ -38,7 +38,7 @@ export type SectionBase<SectionItemT> = {
       ...
     },
     ...
-  }) => null | React.Element<any>,
+  }) => null | React.MixedElement,
   ItemSeparatorComponent?: ?React.ComponentType<any>,
   keyExtractor?: (item: SectionItemT, index?: ?number) => string,
   ...
@@ -63,22 +63,16 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | React.Element<any>,
+  }) => null | React.Node,
   /**
    * Rendered at the top of each section. These stick to the top of the `ScrollView` by default on
    * iOS. See `stickySectionHeadersEnabled`.
    */
-  renderSectionHeader?: ?(info: {
-    section: SectionT,
-    ...
-  }) => null | React.Element<any>,
+  renderSectionHeader?: ?(info: {section: SectionT, ...}) => null | React.Node,
   /**
    * Rendered at the bottom of each section.
    */
-  renderSectionFooter?: ?(info: {
-    section: SectionT,
-    ...
-  }) => null | React.Element<any>,
+  renderSectionFooter?: ?(info: {section: SectionT, ...}) => null | React.Node,
   /**
    * Rendered at the top and bottom of each section (note this is different from
    * `ItemSeparatorComponent` which is only rendered between items). These are intended to separate
@@ -453,8 +447,8 @@ class VirtualizedSectionList<
 
   _updateHighlightMap: {[string]: (boolean) => void} = {};
   _updatePropsMap: {[string]: void | (boolean => void)} = {};
-  _listRef: ?React.ElementRef<typeof VirtualizedList>;
-  _captureRef = (ref: null | React$ElementRef<Class<VirtualizedList>>) => {
+  _listRef: ?VirtualizedList;
+  _captureRef = (ref: null | VirtualizedList) => {
     this._listRef = ref;
   };
 }

package/package.json

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