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>
)