Flatlist with initialScrollIndex will cause missing items

Description

If i have the initialScrollIndex set and the list is not bigger than the view (they all fit) then the items before initialScrollIndex will not render , it only works if i set disableVirtualization={true} but the order on how they are rendered doesnt seem right , for example if i have 8 items (and they all fit in the view) and i have set initialScrollIndex to 6th item with disableVirtualization={true} it will render 6 - 7 item first then the 0 to 5, if i dont disable it then it will only render item 6 and 7, if i have more items than they can fit in the view then it seems to work as expected.

Steps to reproduce

Set initialScrollIndex to any item excluding first one on a list that fits to the view.

React Native Version

0.81.5

Affected Platforms

Runtime - Android

Output of `npx @react-native-community/cli info`

expo  54.0.22

Stacktrace or Logs

nothing to show

MANDATORY Reproducer

/

Screenshots and Videos

No response

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
If your bug is UI related: a Snack
If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

Hi, I’d like to work on this issue. Could you please assign it to me? I’ve reviewed the description and would like to start investigating a fix for the initialScrollIndex behavior when the list fits within the view.
Thanks!

Example with initialScrollIndex={4} , 7 items in total.

Only renders:
LOG Rendering TrackItem: 4 Pentru elevi
LOG Rendering TrackItem: 5 Reviste
LOG Rendering TrackItem: 6 Teatru

With initialScrollIndex={0} (or none)

With initialScrollIndex={4} but on a bigger list that doesnt fit into the view , this is the initial render order of items.

LOG Rendering TrackItem: 4 D
LOG Rendering TrackItem: 5 E
LOG Rendering TrackItem: 6 F
LOG Rendering TrackItem: 7 G
LOG Rendering TrackItem: 8 H
LOG Rendering TrackItem: 9 I
LOG Rendering TrackItem: 10 J
LOG Rendering TrackItem: 11 K
LOG Rendering TrackItem: 12 L
LOG Rendering TrackItem: 13 M
LOG ***onLayout event
LOG Rendering TrackItem: 1 A
LOG Rendering TrackItem: 2 B
LOG Rendering TrackItem: 3 C
LOG Rendering TrackItem: 14 N
LOG Rendering TrackItem: 15 O
LOG Rendering TrackItem: 16 P
LOG Rendering TrackItem: 17 Q
LOG Rendering TrackItem: 18 R
LOG Rendering TrackItem: 19 S
LOG Rendering TrackItem: 20 T
LOG Rendering TrackItem: 0 0
LOG Rendering TrackItem: 21 U
LOG Rendering TrackItem: 22 V
LOG Rendering TrackItem: 23 W
LOG Rendering TrackItem: 24 Y
LOG Rendering TrackItem: 25 Z

I tried different options but i couldnt fix this:

            <FlatList
                ref={listRef}
                data={listData}
                //keyExtractor={(item, index) => item.key ? `${item.key}-${index}` : `${item.name}-${index}`}
                keyExtractor={item => item.id.toString()}
                renderItem={renderItem}
               //  contentContainerStyle={{ paddingBottom: 10, }}
                ItemSeparatorComponent={memo(() => <View style={{ height: SEPARATOR_HEIGHT }} />)}
                showsVerticalScrollIndicator={false}
           //     snapToInterval={TOTAL_ITEM_HEIGHT}
           //     decelerationRate={0.9}
                initialScrollIndex={4 || 0} // testing
              //  maintainVisibleContentPosition={{ disabled: true, }}
                
               //     windowSize={21}
              //  removeClippedSubviews={true} 

             //  onLayout={onContainerLayout}
             //   getItemLayout={getItemLayout}
                   onScrollToIndexFailed={(info) => {
                    console.log('Scroll to index failed:', info);
                }}
            />

Hello,
I’d like to work on this issue related to FlatList and initialScrollIndex.
I’ve reviewed the problem description and tested the behaviour locally, and I’m interested in investigating a possible fix or providing a minimal reproducible example if needed.
Could you please assign this issue to me so I can start working on it?

@izyspania

@izyspania You can review the PR now.

@ish1416 where is the new commit so i can test?

0fa10dd

@ish1416

@ish1416 everything is working fine if i set getItemLayout but if i dont set getItemLayout i cant scroll up , and in some situations if i scroll down the list will go at the start (without getItemLayout )


 const getItemLayout = useCallback((_, index) => ({
        length: TOTAL_ITEM_HEIGHT,
        offset: TOTAL_ITEM_HEIGHT * index,
        index,
    }), []);


            <FlatList
                ref={listRef}
                data={listData}
                keyExtractor={item => item.id.toString()}

                renderItem={renderItem}
                ItemSeparatorComponent={memo(() => <View style={{ height: SEPARATOR_HEIGHT }} />)}
                showsVerticalScrollIndicator={false}
                snapToInterval={TOTAL_ITEM_HEIGHT}
                decelerationRate={0.9}

                initialScrollIndex={initialScrollIndex || 0}

               getItemLayout={getItemLayout}
                onScrollToIndexFailed={(info) => {
                    console.log('Scroll to index failed:', info);
                }}
            />

Edit: in console i also saw this warnings:



    [TOO BIG formatValueCalls 333 exceeded limit of 200],
    [TOO BIG formatValueCalls 334 exceeded limit of 200],
   [TOO BIG formatValueCalls 335 exceeded limit of 200],
     [TOO BIG formatValueCalls 336 exceeded limit of 200],
       [TOO BIG formatValueCalls 337 exceeded limit of 200],

The list has A to Z items and the initialScrollIndex was set on W and it renders like this without getItemLayout set.

@izyspania

@izyspania Lets fix this too

@izyspania

@izyspania Can you check now its fixed i guess..
e6f1300

@ish1416

@ish1416 sadly it has the same problems without getItemLayout , i am using it in this project but i dont know how it will impact others that dont , i think we need more people to test this out, thanks for your effort.

@izyspania

@izyspania Can you get this PR merge if possible this is for evaluation?

@ish1416

@ish1416 can i do that? sorry i dont really know what you want me to do, do you want me to create a Snack with a flatlist? I am using expo

@izyspania

@izyspania How do i get this merge? I think you need to close the Issue with makreked as resolved such that my Pr gets merged

@ish1416

@ish1416 i am not sure if it works that way , did you manage to fix it when getItemLayout is not used?

This still happens in 2026, unfortunately...

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.

Not stale

25. Not stale

Can confirm, I just encountered it in version 0.86.3. Is there a workaround for it? My initial attempt involved useEffect but that throws an error telling me to use initialScrollIndex.

Navigation Menu

Repository navigation

Flatlist with initialScrollIndex will cause missing items #54409

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flatlist with initialScrollIndex will cause missing items #54409

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx @react-native-community/cli info

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Activity

react-native-bot commented on Nov 4, 2025

ish1416 commented on Nov 5, 2025

izyspania commented on Nov 5, 2025

sanjana2505006 commented on Nov 9, 2025

ish1416 commented on Nov 9, 2025

7 remaining items

ish1416 commented on Nov 9, 2025

izyspania commented on Nov 9, 2025

ish1416 commented on Nov 9, 2025

ish1416 commented on Nov 9, 2025

izyspania commented on Nov 9, 2025

ish1416 commented on Nov 9, 2025

izyspania commented on Nov 9, 2025

ish1416 commented on Nov 9, 2025

izyspania commented on Nov 10, 2025

DragomirAndrei19 commented on Mar 27, 2026

react-native-bot commented on Sep 23, 2026

DragomirAndrei19 commented on Sep 23, 2026

Belllene commented on Oct 13, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`