General RN Question: what's the best way to make an expandable flatlist?


#1

What’s the best way to make an expandable FlatList? ie limit the list to 3 rows, and upon tapping something, expand the list to its full height?

the way I do it now is by animating the height but because you can’t use the native driver, it’s really stuttery (see gif at bottom). I also tried toggling between mapping data.slice(0, 3) and a flatlist, but the rerender to mount the flatlist also makes the animation stuttery. anyone have any other ideas?

Relevant code (edited for readability):

    List = () => {
        const { data, expanded, animatingExpansion } = this.state
        return (
            <AnimatedFlatlist 
            data={data}
            style={{ height: !expanded || animatingExpansion ? this.FlatListHeight : null, flex: expanded && !animatingExpansion ? 1 : null }}
            ListFooterComponent={<this.Footer />}
            onEndReachedThreshold={1}                    
            keyExtractor={this.peopleKeyExtractor}
            />
        )
    }
    Footer = () => (
        <TouchableOpacity style={{ alignItems: 'center', width: '100%' }} onPress={this.toggleExpansion} >
            <ArrowIcon name={`ios-arrow-${this.state.expanded ? 'up' : 'down'}`} size={40} style={{ color: Colors.grayColor }} />
        </TouchableOpacity>
    )


closed #2

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.