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.
Related
I have a large form (should support infinite number of fields) and the way formik or react-hook-forms do "field arrays" is with a single component (<useFieldArray /> or <FieldArray />) that takes in a render function.
while the way Flatlist works is that it takes in a data prop and a render function.
So how can I integrate the two together? If I simply "place" the <FieldArray /> inside of my FlatList the entire component will count as one row and will have terrible performance as the entire component will be rendered when it is in view.
The way I will be solving is by forgoing the <FieldArray /> component and manually rendering my array of fields in the Flatlist render prop but I will be losing the functionality that FieldArray offers.
So, my question is can I use FieldArray or, any large component that is, inside flatlist so that only the DOM elements currently visible are rendered instead of the normal behavior that renders the visible rows?
I try to render a dropdown-picker (react-native-dropdownpicker) in a sectionlist but it's impossable to scroll the content of the dropdown. It only shows the first results.
I tried many things with zIndex, view with flex: 1 as parent but im unable to find the solution.
Is it possible to render in a sectionlist or should i be looking for another solution?
sectionlist with dropdown-picker
I think this is what you want.
List Modes
You have 3 options when choosing the list mode.
DEFAULT
FLATLIST
SCROLLVIEW
MODAL
listMode="FLATLIST"
Notes
The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning.
If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise, you have to use the MODAL mode.
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/dropdown-picker
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
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
I need to print dates as accordion that containt many times inside,
I saved the whole date and time on one state of array, i loop my dates using collapsible like this:
<Collapsible collapsed={ this.state.date_tab !== date_index }>
{ this._renderTimes( date_index ) }
</Collapsible>
the date_tab used as selected accordion, so there's only one active collapsible allowed.
When i change the date_tab state, the whole dates and content rerender it's view so, it's make my collapsible slow to open caused all view rerender from begining.
Is there a way to close the activated collapsible, then open the pressed collapsible without rerender the other collapsible?
I tried using array, but not work, when i set state the array, it still rerender all view
Move collapsible and renderTimes to a separate component. Make the component a PureComponent. Supply collapsed prop and times array to the collapsible component.
PureComponent will render only if the props are different. So, only two of the collapsible components will render, and not all of them.