Skip to content

scrollToIndex not working on a FlatList #31617

@kenpower

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions