Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onViewableItemsChanged called 2 times #184

Open
kotsh23 opened this issue Apr 22, 2022 · 4 comments
Open

onViewableItemsChanged called 2 times #184

kotsh23 opened this issue Apr 22, 2022 · 4 comments

Comments

@kotsh23
Copy link

kotsh23 commented Apr 22, 2022

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);
  }, []);
@kotsh23
Copy link
Author

kotsh23 commented Apr 23, 2022

any idea about why this behavior

@mouhcine007
Copy link

mouhcine007 commented Aug 18, 2022

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

@riddy6421
Copy link

Any Solution to this?

@dhairyasenjaliya
Copy link

dhairyasenjaliya commented Jun 14, 2024

Running on the same issue is there any solution to this, so far this is the best library for faster list thank you :)

Although I have a dirty hack that works (seems viewableItems always returns 2 index current + next so it makes sense to get first element)

onViewableItemsChanged={(e) => {
  const viewableItems = e.viewableItems
  if (viewableItems.length > 0 && viewableItems[0].isViewable) {
    setActivePostId(viewableItems[0].item.id)
  }
}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants