CODEWITHSUNDEEP
reactjsreact-native
DennyHiu
DennyHiu

Reputation: 6130

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

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

Upvotes: 3

Views: 2653

Answers (1)

Haider Ali
Haider Ali

Reputation: 1285

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}) => {}}
 />

Upvotes: 3

Related Questions