Search code examples
react-nativereact-native-flatlist

React native RecyclerListView and onViewableItemsChanged


i was using flatlist for my videos timeline app but i get some issues with it so i decided to change flatlist by RecyclerListView but RecyclerListView dont have onViewableItemsChanged and the onVisibleIndicesChanged is not working right and so missy any idea about how to get the isViewable item like flatlist in RecyclerListView

<RecyclerListView
          style={{ flex: 1, height, width }}
          showsVerticalScrollIndicator={false}
          dataProvider={dataProvider}
          layoutProvider={layoutProvider}
          rowRenderer={rowRenderer}
          disableRecycling={true}
          initialRenderIndex={0}
          renderAheadOffset={height}
          scrollViewProps={{
            snapToInterval: height,
            snapToAlignment: "center",
            decelerationRate: "fast",
            disableIntervalMomentum: true,
            bounces: false,
            viewabilityConfig: {
              itemVisiblePercentThreshold: 100,
              minimumViewTime: 500,
              viewAreaCoveragePercentThreshold: 100,
            },
            onViewableItemsChanged: () => console.log("Heyyyy"),
          }}
        />

Solution

  • RecyclerListViw has prop onVisibleIndicesChanged. You can use that.

    sample image

    const onVisibleIndicesChanged = (all: number[], now: number[]) => {
            console.log(now)
    };
    

    It does not support viewabilityConfig as of Sept 2022. It is something in their To Do.