Skip to main content
Version: Bleeding Edge 🚧

ListItem.Accordion

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

Import

import { ListItem } from "@rneui/themed";

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.
iconIconNode<Icon name={'chevron-down'} type="material-community" />Icon for unexpanded Accordion.
isExpandedbooleanfalseDecide if Accordion is Expanded.
leftRotatebooleanfalseRotate Icon left side
noIconbooleanDon't show accordion icon.
noRotationbooleanDon't rotate when Accordion is expanded.