Create recomputeViewableItems method

[Paduado]

Description

Adds recomputeViewableItems method to FlashList. Useful to imperatively trigger viewability calculations.

Reviewers’ hat-rack 🎩

• Validate that calling the recomputeViewableItems method triggers the onViewableItemsChanged callback.

Checklist

• I have added a changelog entry following the Keep a Changelog guidelines.

[zyestin]

Use recomputeViewableItems like this, it works!

import React, { useCallback, useEffect, useRef, useState } from "react";
import { View, Text } from "react-native";
import { FlashList, MasonryFlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const DATA2 = [
  {
    title: "1- First Item",
  },
  {
    title: "2- Second Item",
  },
];

const MyList = () => {
  const [data, setData] = useState(DATA);
  const listRef = useRef();

  useEffect(() => {
    setTimeout(() => {
      setData(DATA2);
    }, 3000);
    setTimeout(() => {
      listRef.current?.recomputeViewableItems();
    }, 5000);
  }, []);

  const onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
    console.log("sa track::", viewableItems, changed);
  }, []);


  return (
    <FlashList
      ref={listRef}
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
      viewabilityConfig={{
        waitForInteraction: false,
        itemVisiblePercentThreshold: 50,
        minimumViewTime: 1000,
      }}
      onViewableItemsChanged={onViewableItemsChanged}
      contentContainerStyle={{ backgroundColor: "pink" }}
    />
  );
};

export default MyList;

But the MasonryFlashList I used in my project did not enjoy this benefit.

[zyestin]

I sumbited a PR here to fix "recomputeViewableItems" on MasonryFlashList.