Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ScrolltoIndex not working react-native on a flatlist

I'm using a flatList to render items from a json file, I want to scroll to a specific index when a button is pressed, I declared the function for button press as below

goIndex = () => {
    this.flatListRef.scrollToIndex({animated: true,index:5});
};

although it doesn't show any errors, the list is not moving to specified index.

react-native: 0.55.4

Attaching code of FlatList.

<View>
    <FlatList   
        getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
        ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
        data={this.state.outverse}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>
like image 810
Joji Thomas Avatar asked Jul 25 '18 09:07

Joji Thomas


People also ask

How to scroll to a specific item’s index in React Native?

If you are using a FlatList in React Native, there’s a chance you will want to use the scrollToIndex function to scroll to a certain item’s index. Unfortunately, this function is a lot easier to use with fixed item heights where it is easy to implement the required getItemLayout function.

Why can’t i implement getitemlayout in React Native?

If you have a variable item size, as in the case above, you may not easily be able to implement getItemLayout meaning that React Native’s FlatList scrollToIndex will only be able to scroll to items that are close to the currently seen items and scrolling far down the list can cause the method to fail.

How to scroll to a specific index in a flatlist?

Set initialScrollIndex on FlatList with the index we want to scroll to. The data array (passed to FlatList) will need to already have the index you're looking for otherwise you will get an out of range error.

Is it possible to use scrolltoindex with items of dynamic size?

It is easier to use scrollToIndex with items of a fixed size, but you are not out of luck if your items are of a dynamic size. It is still possible to create a decent user experience this way, it will just take a bit longer for the scrolling to get worked out!


2 Answers

Try adding reference to your FlatList component like below :

<View>
    <FlatList   
        getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
        ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
        data={this.state.outverse}
        ref={(ref) => { this.flatListRef = ref; }}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>

And in goIndex function:

goIndex = () => {
    this.refs.flatListRef.scrollToIndex({animated: true,index:5});
};
like image 69
Kirankumar Dafda Avatar answered Sep 27 '22 22:09

Kirankumar Dafda


Try the following:

<FlatList
        style={{
          marginLeft: 50,
          paddingTop: 0,
          paddingRight: 0
        }}
        ref={ref => {
          this.flatList_Ref = ref;  // <------ ADD Ref for the Flatlist 
        }}
        removeClippedSubviews={false}
        enableEmptySections={false}
        data={this.props.list}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem1}
        ItemSeparatorComponent={this._renderSeparator}

      />

And then call a goIndex function:

goIndex = () => {

 this.flatList_Ref.scrollToIndex({animated: true,index:5});

};
like image 39
A.Matt Avatar answered Sep 27 '22 21:09

A.Matt