onViewableItemsChanged - getting an ID of an item

[chrisedington]

I use flashlist to render Items in fullScreen, and it render 2 items each time when I scroll, is there any possible way to render 1 item each time?

This is because when I try to use the onViewableItemsChanged to get the item.id of the currently visible item on screen (videos show as full screen), I get multiple results and an undefined ID on first load.

The reason I want to do this, is based on the item.id, I need to overlay specific visuals, so I'm desperately looking for a way to reliably get the item.id

The log on first load:

----------------------------------------------------
VIEWABLE ID:undefined
ITEM ID:184
----------------------------------------------------
VIEWABLE ID:undefined
ITEM ID:246
----------------------------------------------------

Log on subsequent scrolls (ids just dont match?? this is the main problem)

VIEWABLE ID:238
ITEM ID:184

The rowRenderer (with the logging lines)

function RowRenderer({ item, viewable }) {
    console.log(`VIEWABLE ID:${viewable[0]}`),
    console.log(`ITEM ID:${item.id}`),
    console.log("----------------------------------------------------"),

FlashList

return (
    <View style={styles.container}>
      {liveData.length > 0 && (
        <FlashList
          data={liveData}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item, index }) => (
            <RowRenderer item={item} viewable={Viewable} />
          )}
          estimatedItemSize={1920}
          ref={mainScroll}
          onViewableItemsChanged={onViewRef.current}
          viewabilityConfig={viewConfigRef.current}
          initialNumToRender={1}
          snapToInterval={height}
          itemHeight={height}
          snapToAlignment={"start"}
          decelerationRate="fast"
        />
      )}
    </View>
  );

[fortmarek]

I use flashlist to render Items in fullScreen, and it render 2 items each time when I scroll, is there any possible way to render 1 item each time?

I suppose the number of rendered items is related to how many items are loaded during the first render?

This is because when I try to use the onViewableItemsChanged to get the item.id of the currently visible item on screen (videos show as full screen), I get multiple results and an undefined ID on first load.

In the documentation we already call out that if you are tracking the time a view becomes (non-)visible, use the timestamp property. We make no guarantees that in the future viewability callbacks will be invoked as soon as they happen - for example, they might be deferred until JS thread is less busy. While the callback is currently triggered synchronously, it still does not occur before the first load.

There are two possible solutions:

• We ensure onViewableItemsChanged is called synchronously and before the first load. However, this might have implications for performance.
• We create a new FlashList method isItemViewable(index: number) => boolean that will synchronously check whether a given item is viewable or not.

[chrisedington]

Thanks for the reply @fortmarek .

It ended up being something quite simple -- we extracted the RowRenderer to it's own component and passed the props as attributes, and it's running very smoothly now. No more flashing.

Thanks for the assistance.