search

oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.43k stars 453 forks source link

Best way to implement a high-performing "collapsible section list" - OR Is there a way to avoid rendering content when the accordion is collapsed? #333

Closed ryanphung closed 3 years ago

ryanphung commented 4 years ago

I'm trying to create a "collapsible section list", using Accordion and FlatList. Basically an Accordion where each section of data is rendered as a FlatList:

Accordion
- FlatList
- FlatList
- FlatList

However when there are hundreds of items, I start to notice performance degradation

My attempted solution is to avoid rendering the section that are collapsed. Using the isActive flag inside renderContent:

renderContent = (content, index, isActive) => {
    return (
      isActive ? <FlatList ... /> : null
    )

However I notice that the content is hidden before the animation starts. Is there any way to hide the content after the animation ends, and conversely, render the content before the animation starts?

Thank you.

ryanphung commented 4 years ago

I searched around more and looks like Pull Request #318 is a good solution to re-solve this

oblador commented 3 years ago

Released in 1.6.0