React Native FlatList scrollToIndex() is not working when screen loaded for the first time

Question

I have this category filter component in my react native application. For the first time this component is loaded it does not scroll to given index item (i.e 3). I checked and the function scrollToIndex is calling. But after loading the screen when do component re-rendering it is working.

Why does it not scroll down at the first time screen loaded ?

import React, { useCallback, useRef } from 'react'
import { StyleSheet, TouchableOpacity, FlatList, View } from 'react-native'
import { Badge, Text } from 'native-base'
import { connect } from 'react-redux'
import * as categoryActions from '../../Redux/Actions/categoryActions'
import { useFocusEffect } from '@react-navigation/native'

const CategoryFilter = (props) => {
  const flatlistRef = useRef()

  const handleSetSelectedCategoryId = (categoryId) => {
    props.setSelectedCategoryId(categoryId)
  }

  const getItemLayout = (data, index) => ({
    length: 50,
    offset: 50 * index,
    index,
  })

  const scrollToIndex = () => {
    console.log('scroll to index called !')
    let index = 3
    flatlistRef.current.scrollToIndex({ animated: true, index: index })
  }

  useFocusEffect(
    useCallback(() => {
      scrollToIndex()
    }, [])
  )

  const renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        key={item._id}
        onPress={() => {
          handleSetSelectedCategoryId(item._id)
        }}
      >
        <Badge
          style={[
            styles.center,
            { margin: 5, flexDirection: 'row' },
            item._id == props.selectedCategoryId
              ? styles.active
              : styles.inactive,
          ]}
        >
          <Text style={{ color: 'white' }}>{item.name}</Text>
        </Badge>
      </TouchableOpacity>
    )
  }

  return (
    <View>
      <FlatList
        data={props.categories}
        renderItem={renderItem}
        keyExtractor={(item) => item._id}
        horizontal={true}
        ref={flatlistRef}
        getItemLayout={getItemLayout}
      />
    </View>
  )
}
....

`useFocusEffect(useCallback(() => {wait(2000).then(() => scrollToIndex())}, []))` adding a timeout worked for me. — John Stuart, May 08 '21 at 05:52

Danielkent · Accepted Answer · 2021-05-08T12:16:11.467

I had a similar problem and these were my findings:

It seems there could be a race condition where scrollToIndex is occuring before flatlist has finished calculating the item sizes using getItemLayout. So it doesn't throw an out of range error and considers the scroll successful.

One solution is:

setTimeout(() => scrollToIndex(), 500);

However this is not a great solution as there is no guarantee the flatlist will be 'ready' to scroll within the arbitrarily given 500ms, which would mean our delayed call would still not work.

The recommended way:

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.

You should also note (from the docs):

This disables the "scroll to top" optimization that keeps the first initialNumToRender items always rendered and immediately renders the items starting at this initial index.

More info here: https://reactnative.dev/docs/flatlist#initialscrollindex

Have you tried increasing the timeout @fatemehkazemi? Also as stated, this is a more hacky solution and `initialScrollIndex` is the recommended solution. — Danielkent, Mar 03 '22 at 06:23

score 1 · Answer 2 · answered Sep 29 '22 at 08:56

1

You can use react scrollToIndex with initialScrollIndex

answered Sep 29 '22 at 08:56

Code ninja

181
1
5

score 0 · Answer 3 · answered May 16 '22 at 10:56

for initial rendering its better to use initialScrollIndex instead of scrollToIndex, have to use getItemLayout in addition to that as follows:

const getItemLayout = (data, index) => { return { length: screenWidth, offset: screenWidth * index, index, }; };

get the screenWidth from dimensions prop from react natie

score 0 · Answer 4 · answered Feb 15 '23 at 11:54

This worked for me. Just invoke the scrollToIndex (eg: scrollToIndex(1);) and you are set.

import React, {useRef} from 'react';

const App = () => {
    const ref = useRef();

    const scrollToIndex = index => {
        ref?.current?.scrollToIndex({
            animated: true,
            index: index,
        });
    }

    return (
        <View style={styles.root}>
            <FlatList
              ref={ref}
              data={data}
              renderItem={renderItem}
              keyExtractor={item => item.id}
            />
        </View>
    );
}

React Native FlatList scrollToIndex() is not working when screen loaded for the first time

4 Answers4