search

react-native-elements / react-native-elements

Cross-Platform React Native UI Toolkit
https://reactnativeelements.com
MIT License
25.08k stars 4.64k forks source link

Is ListItem based on react-native's FlatList? #2291

Closed imAunAbbas closed 4 years ago

imAunAbbas commented 4 years ago

I've used React Native Elements 1.1.0 version for my app showing contacts. Its ListItem is a great option to use with contacts containing avatars. But issue is when the array length increases, loading time also increases. So my question is that is this based on React Native's FlatList or not? If yes, then why it takes much time on bigger arrays. And if no, I wonder why this team is not adopting FlatList? I've not used latest 1.2.0 version so I'm questioning on my experience with previous version.

Kindly implement it on FlatList's behavior, if it is not. Thanks

oxyii commented 4 years ago

@aunabbas007 you are a little confused. FlatList (and any others components based on VirtualizedList) is a lists. RNE ListItem is something like card and it can be list item )

<FlatList
  data={yourArray}
  ...
  renderItem={({ item }) => <ListItem {...item} otherProps />}
/>
imAunAbbas commented 4 years ago

@oxyii I'm also saying that if it is not implemented as FlatList behavior, then it should be. As we know that if it is like a card and we have a huge array (i.e. 1000+ contacts) then it will take some sec to render all the data at once. Then why should not implement it on FlatList's behavior? It will be fast and responsive for large data.

I think you didn't understand my point of view, I'm just requesting a feature to implement in next React-Native-Elements version.

oxyii commented 4 years ago

@aunabbas007

The window adapts to scrolling behavior, and items are rendered incrementally with low-pri (after any running interactions) if they are far from the visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.

Original https://reactnative.dev/docs/virtualizedlist

So list item components (including RNE ListItem) cannot affect VirtualizedList behavior. List items components depend on VirtualizedList behavior via renderItem prop of VirtualizedList-based components including FlatList. And one more: I consider it a bad practice to load immediately "1000+" items. Please see official docs for onEndReached and onEndReachedThreshold FlatList props. Please divide your data into parts of 30-50 items and add parts as you scroll via onEndReached callable prop