Method to get top index of flatlist in react native

Question

Is there a provided method to enable us to get the index of the top item of the FlatList when we scroll it ?

Answer 1

You can access the index of each row in this way:

   <FlatList data={this.state.dataList}
     ...
     renderItem={({item, index}) => this.renderRow(item, index)}
     ...
     console.log("current index is " + index)

   />

this will give you the index of the top row.

Answer 2

In order to get an index of FlatList item - spread the itemData inside renderItem.

 <FlatList
       data={someData}
       keyExtractor={(item, index) => index.toString()}
       renderItem={ ( {item, index} ) => // use {item, index} instead of itemData

        <MyComponent index={index} />    
  />

Answer 3

there is no method to get it directly.

but you can compute it by scrollview offset, if you know the layout of every item.

implement onScroll on flatlist, like

<FlatList onScroll={(e)=>{
     let offset = e.nativeEvent.contentOffset.y;
     let index = parseInt(offset / height);   // your cell height
     console.log("now index is " + index)
}}> 

ps: don't forget to subtract the header layout if contains

Answer 4

Here is the right way to get index of items of flat list:

    <FlatList
        horizontal
        data={this.state.data}
        renderItem={({ item: rowData,index }) => {
        return (
        <Card

            containerStyle={{flex:1,marginBottom:30,backgroundColor:'rgba(255,255,255,0.7)',}}>



            <Text style={{ marginBottom: 10 ,fontSize:30}}>
                {'Comments:'}
            </Text>
            <Text  style={{width:290}}>
                {rowData.comment}
            </Text>
            <Text style={styles.text }>
                {'\nIndex:'+index}
            </Text>


        </Card>
        );
        }}
        keyExtractor={(item,index) => index.toString()}
    />

Answer 5

Actually you have to use the prop onViewableItemsChanged and get from the data returned by the callback the index of the first element displayed in the list. Remember to set also the prop viewabilityConfig so the component can determine where you consider an object displayed or not.

import React from "react";
import SwiperFlatList from "react-native-swiper-flatlist";

export default class MyComponent extends React.Component { 
// INSIDE A COMPONENT
  constructor(props) {
    super(props);
    this.currentIndex = 0;
    this._updateIndex = this._updateIndex.bind(this);
    this.viewabilityConfig = {
      itemVisiblePercentThreshold: 50
    };
  }

  _updateIndex({ viewableItems }) {
  // getting the first element visible index
    this.currentIndex = viewableItems[0].index;
  }

  render() {
    return  // ...
      <SwiperFlatList
              loop={false}
              index={0}
              onViewableItemsChanged={this._updateIndex}
              viewabilityConfig={this.viewabilityConfig}
            >
             {data}
            </SwiperFlatList>;
            }
}

instead of swiper-flat-list you can use the FlatList.