Menu
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',
]
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.
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
423
Displaying a List with a React Native FlatList. The FlatList component requires two props: data and renderItem. A data prop takes an array of data that needs to be rendered, and renderItem defines a function that takes data via parameters and returns a formatted component to be displayed on the screen.
So it is not preferred to use ScrollView if you have a hundred or a thousand items to be displayed on the screen. It is used when you have fewer data items on the list of a limited size. Flatlist: The FlatList Component is an inbuilt react-native component that displays similarly structured data in a scrollable list.
In the above syntax, we can see that the FlatList component has two required props i.e. data and renderItem. data: It is an array of items or data. renderItem: It is used to render the data into the list. It basically needs a function to take an item from the data source and returns the list component to render.
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. FlatList - A performant interface for rendering simple, flat lists.
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.
56
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
