scrollToIndex not working on a FlatList

[kenpower]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

calling scrollToIndex() does not scroll to index

React Native version:

Run react-native info in your terminal and copy the results here.

How do I run Run react-native info on snack (I assume snack is using a recent react)?

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. create a FlatList with 100 items, to many to fit on a page
2. call this.flatListRef.scrollToIndex({animated: true, index: 50}

Expected Results

Expect item 50 to appear at the top of the rendered FlatList

Actual Results

FlatList shows item 0 at the top of rendered list

Snack, code example, screenshot, or link to a repository:

minimal snack example

import React, { Component } from 'react';
import { Text, View, FlatList, Dimensions, Button, StyleSheet } from 'react-native';

const { width } = Dimensions.get('window');

const style = {
 justifyContent: 'center',
 alignItems: 'center',
 width: width,
 height: 50,
 flex: 1,
 borderWidth: 1,
};

const COLORS = ['deepskyblue','fuchsia', 'lightblue '];

function getData(number) {
 let data = [];
 for(var i=0; i<number; ++i)
 {
 data.push("" + i);
 }
 
 return data;
}

class ScrollToExample extends Component {
 
 getItemLayout = (data, index) => (
 { length: 50, offset: 50 * index, index }
 )
 
 getColor(index) {
 const mod = index%3;
 return COLORS[mod];
 }
 
 scrollToIndex = () => {
 this.flatListRef.scrollToIndex({animated: true, index: 50});
 }
 

 render() {
 return (
 <View style={styles.container}>
 <View style={styles.header}>
 <Button
 onPress={this.scrollToIndex}
 title="Tap to scrollToIndex"
 color="darkblue"
 />
 </View>
 <FlatList
 ref={(ref) => { this.flatListRef = ref; }}
 keyExtractor={item => item}
 getItemLayout={this.getItemLayout}
 renderItem={({ item, index}) => (
 <View style={{...style, backgroundColor: this.getColor(index)}}>
 <Text>{item}</Text>
 </View>
 )}
 data={this.props.data}
 />
 </View>
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1
 },
 header: {
 paddingTop: 20,
 backgroundColor: 'darkturquoise', 
 alignItems: 'center', 
 justifyContent: 'center'
 }
});

export default class app extends Component {
 render() {
 return <ScrollToExample
 data={getData(100)}
 />
 }
}

Note: In the snack we are calling a list index in range. But IF I call with a large index (e.g. 150), we will get "Uncaught Invariant Violation: scrollToIndex out of range: 150 vs 99", which is expected AND shows that the component is receiving the function call.

[naraB]

The snack example works perfectly fine for me. The flatlist contains 100 items with viable indices ranging from 0 to 99. If you try to scroll to an index smaller than 0 or bigger than 99 you'll naturally get an out of range exception.
Are you sure that you are not getting the exception because you're trying to scroll to an out of range index?

[israelgonzalezb]

This works on the iOS simulator, not the Web version. At the top right of the Snack, select iOS instead of Web.

[kenpower]

The snack example works perfectly fine for me. The flatlist contains 100 items with viable indices ranging from 0 to 99. If you try to scroll to an index smaller than 0 or bigger than 99 you'll naturally get an out of range exception.
Are you sure that you are not getting the exception because you're trying to scroll to an out of range index?

@naraB I am asking about why it doesn't work when the index is IN range. I mentioned the out of range exception, only to demonstrate that the component is being called. In the snack the index is in range.

[benkhlifafahmi]

@israelgonzalezb @kenpower i have a similar issue however in my case i set the initialIndex to my target index X, and also i do the scrollToIndex, however when my list has a large number of data (like 100-500 image) it just scroll the wrong index Y (which is always < X).

[SuhasParameshwara]

Any workarounds?

[Nensi9]

Any Update on this?

[karimelsaidy]

calling scrollToIndex() does not scroll to index for ios it works fine on android
"react-native": "0.72.4",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.