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>
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.
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.
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.
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!
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});
};
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});
};
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