Horizontal paging: How to find which page that's currently active?

Question

Here's my code to generate a paging scrollview in React-native:

        <ScrollView
          horizontal
          pagingEnabled
          onScrollEndDrag={this.handlePagerScroll}
          scrollsToTop={false}
          scrollEventThrottle={100}
          removeClippedSubviews={false}
          automaticallyAdjustContentInsets={false}
          directionalLockEnabled
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
        >
          { renderPageHere() }
        </ScrollView>

The code above is working. Function this.handlePagerScroll which attached to onScrollEndDrag event is working too. The problem is that I can't determine which page that's currently active, since onScrollEndDrag has no event paremeter

I think to use simple math using value in x or y to no avail since I have no idea how to obtain them

Does anyone familiar with my problem and can offer me any solution? Thank you

because I just follow this example here : https://stackoverflow.com/questions/43212931/react-native-horizontal-scroll-view-pagination-preview-next-page-card — DennyHiu, Sep 30 '18 at 11:42
I have made a horizontal paging view using FlatList and identifying visible item in FlatList is fairly easy like this. { this.viewableItem(data) }} renderItem={this.renderRow} keyExtractor={(item, index) => item.id} /> — Haider Ali, Sep 30 '18 at 13:15
it works! Thank you, if you can provide me an example as an answer, then I can close this thread. — DennyHiu, Oct 04 '18 at 06:05
AND also can you help me to make `onViewableItemsChanged` event only fired once after the page is done switching ? I have mine fires several time as I swipe the page — DennyHiu, Oct 04 '18 at 06:14
Never mind, I found out myself. It turns out, that I need to use `viewabilityConfig: { waitForInteraction: true, viewAreaCoveragePercentThreshold: 95 }` — DennyHiu, Oct 04 '18 at 06:42
Yes, I use flatList, just like your answer. Thank you for your help! — DennyHiu, Oct 05 '18 at 03:55

Haider Ali · Accepted Answer · 2018-10-04T07:14:11.027

I have made a horizontal paging view using FlatList and identifying visible item in FlatList is fairly easy like this.

<FlatList 
horizontal={true} 
pagingEnabled 
removeClippedSubviews={false} 
data={listData} 
onViewableItemsChanged={data => { this.viewableItem(data) }} renderItem={this.renderRow} 
keyExtractor={(item, index) => item.id}
/>

UPDATE

As per issue posted on GitHub and also mentioned by @DennyHiu

you can use

viewabilityConfig={this.viewabilityConfig}

like this

this.viewabilityConfig = {
            itemVisiblePercentThreshold: 50,
            minimumViewTime: 1,
        };

<FlatList
  key={this.state.key}
  onViewableItemsChanged={this.handleViewableItemsChanged}
  viewabilityConfig={this.viewabilityConfig}
  data={this.state.timeline}
  renderItem={({item}) => {}}
 />

Horizontal paging: How to find which page that's currently active?

1 Answers1