marcocesarato/react-native-big-list

onViewableItemsChanged called 2 times

kotsh23 opened this issue · 4 comments

Hello
i love this package its the best really
but there is issue really annoying me
i use this package for videos timeline like tiktok so i have 1 item per window height
the problem is after 6 or 8 elements onViewableItemsChanged start to be called 2 by 2 not 1 by 1 like normal
so the item on the viewport is isViewable = false and the next one is true

 <BigList
        data={data}
        keyExtractor={(i, x) => `item_${i.id.toString()}`}
        renderItem={renderItem}
        itemHeight={height}
        snapToInterval={height}
        windowSize={1}
        initialNumToRender={1}
        maxToRenderPerBatch={1}
        removeClippedSubviews={true}
        showsVerticalScrollIndicator={false}
        pagingEnabled
        snapToAlignment="center"
        decelerationRate="fast"
        disableIntervalMomentum
        viewabilityConfig={{
          itemVisiblePercentThreshold: 100,
          minimumViewTime: 500,
          viewAreaCoveragePercentThreshold: 100,
        }}
        onViewableItemsChanged={onViewableItemsChanged}
      />

const onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
    const now = viewableItems[0].item;
    const old = changed[0].item;

    console.log("old.id", old.id);
    console.log("now.id", now.id);
  }, []);

any idea about why this behavior

facing the same issue here? any idea how to solve it ?
for me since the item height = Dimensions.get('window').height when i scroll to the next item it plays the 3 item and it fires two times:

  • if i am in index = 0 then scroll to index 2 it play the index 3

Any Solution to this?