My requirement is to display in the view a new item just added to the end of the list rendered by a FlatList.
The problem is when using the scrollToEnd method, it only scrolls to the last item that is already rendered in the view (about item #20) but not to the last item in the data array.
From the React Native docs:
May be janky without getItemLayout prop.
But my list items have dynamic height according to its content. The items' height can't be calculated, since each item has a different height. so I have no way to implement the getItemLayout prop.
Any workaround?
Related
I have a simple question: why is onViewableItemsChanged called at initial render without a horizontal flatlist being even visible? This flatlist is only shown when scrolling to it.
How can I fix this?
Thank you!
It is also possible for onViewableItemsChanged to be called during the initial render of a FlatList, even if the list is not yet visible on the screen. This can happen if the initialNumToRender prop of the FlatList is set to a value greater than 0, causing the FlatList to render more items than the ones that are currently visible on the screen.
In such cases, the onViewableItemsChanged callback will receive the list of viewable items that have been rendered, but they will not yet be visible to the user. This is the expected behavior of the FlatList component, and it is designed to optimize the performance of the list by pre-rendering items that are likely to become visible in the near future.
If you want to avoid having onViewableItemsChanged being called during the initial render, you can set the initialNumToRender prop to 0, or use other techniques to control the visibility of the FlatList component, such as conditional rendering based on a state variable or a prop passed from the parent component.
I am working on gradually increasing the height of list footer component so that whatever is there is my footer be shown gradually to the user and on swipe up. Also keeping in mind that the list items doesn't get hidden by footer's view.
I have made a animated.view in the footer's component and used animated.timing to gradually increase the height but it is not working correctly.
I would like to use FlatList method scrollToOffset to scroll to a specific item in my FlatList. The reason I am not using scrollToIndex is that with scrollToIndex I cannot control the speed of the scroll. With scrollToOffset I could use Animated library to change the value gradually. However, I have no idea how to find the offset values of items in my FlatList.
have a look into flat list documentation.
onViewableItemsChanged
that might help
I use FlatList for horizontal scroll. It works as expected. I can scroll to next item or scroll to last item quickly. But i need to do scroll only to next item. So every swipe should scroll me to the closest item. Can i do it using FlatList?
Found that FlatList has disableIntervalMomentum prop. It resolved my issue
What is structure different between FlatList and ScrollView in react native?
It seems to they equal to each other for scrolling view in the application, but ScrollView is very simple rather than FlatList, so when we must use FlatList in code?
There's a big difference between FlatList and ScrollView
ScrollView will load the items (data for scrolling) immediately after the component has been loaded. As a result, all data will be stored in RAM, and you will be unable to use hundreds or thousands of items in it (due to low performance).
FlatList, on the other hand, has a better solution for this problem; it will mount 10 items (by default) to the screen, and as the user scrolls the view, other items will mount.
It's a significant advantage to use FlatList instead of ScrollView.
You can use ScrollView for a small number of items and FlatList for even 10000 items.
A really big difference that no one seems to be pointing out here is that component state is not maintained with the FlatList component but is maintained with ScrollView. This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).
They have different usages.
FlatList is built to render a large list of items. If you check the documentation, you need to pass an array of data and then render each item in the array with the renderItem callback. It is optimized to have very good performances with very large arrays because it actually only renders the items that need to be displayed at the moment.
ScrollView is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView itself. You don't pass an array of data, but you put elements inside the ScrollView in the same way you would use a normal View. Be careful however, it does not provide the same optimization of the flat list for very long content.
As a rule of thumb:
Do you need to render a list of similar items from an array? Use FlatList
Do you need to render generic content in a scrollable container? Use ScrollView