Skip to main content
Version: 4.0.0-rc.2

ListItem.Accordion

This allows making a accordion list which can show/hide content.

Usage

<ListItem.Accordion
content={
<>
<Icon name="place" size={30} />
<ListItem.Content>
<ListItem.Title>List Accordion</ListItem.Title>
</ListItem.Content>
</>
}
isExpanded={expanded}
onPress={() => {
setExpanded(!expanded);
}}
>
{list2.map((l, i) => (
<ListItem key={i} onPress={log} bottomDivider>
<Avatar title={l.name[0]} source={{ uri: l.avatar_url }} />
<ListItem.Content>
<ListItem.Title>{l.name}</ListItem.Title>
<ListItem.Subtitle>{l.subtitle}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron />
</ListItem>
))}
</ListItem.Accordion>

Props

note

Includes all ListItem props.

NameTypeDefaultDescription
animationAnimated.TimingAnimationConfigObject with duration 350ms and type timingDecide whether to show animation.
contentReactNodeSimilar to ListItem's child.
expandIconIconNodeIcon when Accordion is expanded, if not provided icon will be rotated 180deg.
iconIconNodeIcon for unexpanded Accordion.
isExpandedbooleanfalseDecide if Accordion is Expanded.
noIconbooleanDon't show accordion icon.
noRotationbooleanDon't rotate when Accordion is expanded.