Prepending data to a FlatList always shows the first child

Question

this is our FlatList, say hello:

<FlatList
    data={this.state.dates}
...
/>

we feed it with the following dates:

this.state = {
    dates: [
        '21/06/2019',
        '22/06/2019',
        '23/06/2019',
    ]
};

then when the visible date changes (onViewableItemsChanged), if we end up to the first item (21/06/2019), we prepend data, so that the new state becomes:

dates: [
        '18/06/2019',
        '19/06/2019',
        '20/06/2019',
        '21/06/2019',
        '22/06/2019',
        '23/06/2019',
]

The Problem:

right after we prepend the data, instead of STILL seeing 21/06/2019 (which was the date when the prepend took place) we now see 19/06/2019.

That's because below the hood, 21/06/2019 used to be index 0, but after the prepend, index 0 corresponds to 19/06/2019.

What we want:

I'm trying to make it so that the day remains the same after prepending data.

Please don't tell me to use scrollToPosition because that's a hack really, not the solution. Is there any good solution to that problem?

Thank you

Answer 1

that maintainVisibleContentPosition does not work if you prepend data while you are at a scroll position of 0 (all the way to the top). It does work if you are prepending while not a the top. Even scroll Y of 1 would be enough.

check this

Unfortunately this still an issue even in React Native 0.63.3 and has not been solved.