Menu
I have a horizontal flat list where each item is width:300 All I am trying to do is to get index of currently visible item.
<FlatList onScroll={(e) => this.handleScroll(e)} horizontal={true} data={this.state.data} renderItem... Tried this:
handleScroll(event) { let index = Math.ceil( event.nativeEvent.contentOffset.x / 300 ); And something like this:
handleScroll(event) { let contentOffset = event.nativeEvent.contentOffset; let index = Math.floor(contentOffset.x / 300); but nothing is accurate I always get one index up or one index down.
What am I doing wrong and how to get correct current index in flat list?
For example I get to list item that is 8th in a list but I get index 9 or 10. 
605
To get the index of the currently visible item in a React Native flat list, we can set the onViewableItemsChange prop to a function that gets the current visible items. to define the onViewableItemsChanged function that gets the viewableItems property. viewableItems has the items that are current visible on the screen.
keyExtractor (item: object, index: number) => string; Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item. key , then item.id , and then falls back to using the index, like React does.
The FlatList component takes two required props: data and renderItem. The data is the source of elements for the list, and renderItem takes one item from the source and returns a formatted component to render. To implement the FlatList component, we need to import FlatList from 'react-native' library.
The extraData prop is used to re-render the FlatList items dynamically. So what we are doing is that we make 2 Array in our tutorial and render the FlatList using first array object. We would also make 1 button.
UPD. thanks to @ch271828n for pointing that onViewableItemsChanged shouldn`t be updated
You can use FlatList onViewableItemsChanged prop to get what you want.
class Test extends React.Component { onViewableItemsChanged = ({ viewableItems, changed }) => { console.log("Visible items are", viewableItems); console.log("Changed in this iteration", changed); } render () => { return ( <FlatList onViewableItemsChanged={this.onViewableItemsChanged } viewabilityConfig={{ itemVisiblePercentThreshold: 50 }} /> ) } } viewabilityConfig can help you to make whatever you want with viewability settings. In code example 50 means that item is considered visible if it is visible for more than 50 percents.
Config stucture can be found here
67
With related to @fzyzcjy's and @Roman's answers. In react, 16.8+ you can use useCallback to handle the changing onViewableItemsChanged on the fly is not supported error.
function MyComponent(props) { const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => { console.log("Visible items are", viewableItems); console.log("Changed in this iteration", changed); }, []); const _viewabilityConfig = { itemVisiblePercentThreshold: 50 } return <FlatList onViewableItemsChanged={_onViewableItemsChanged} viewabilityConfig={_viewabilityConfig} {...props} />; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
