List.Accordion
A component used to display an expandable list item.



Usage
import * as React from 'react';
import { List } from 'react-native-paper';
const MyComponent = () => {
const [expanded, setExpanded] = React.useState(true);
const handlePress = () => setExpanded(!expanded);
return (
<List.Section title="Accordions">
<List.Accordion
title="Uncontrolled Accordion"
left={props => <List.Icon {...props} icon="folder" />}>
<List.Item title="First item" />
<List.Item title="Second item" />
</List.Accordion>
<List.Accordion
title="Controlled Accordion"
left={props => <List.Icon {...props} icon="folder" />}
expanded={expanded}
onPress={handlePress}>
<List.Item title="First item" />
<List.Item title="Second item" />
</List.Accordion>
</List.Section>
);
};
export default MyComponent;
Props
(props: { color: string }) => React.ReactNode
Callback which returns a React element to display on the left side.
(props: { isExpanded: boolean }) => React.ReactNode
Callback which returns a React element to display on the right side.
boolean
Whether the accordion is expanded
If this prop is provided, the accordion will behave as a "controlled component".
You'll need to update this prop when you want to toggle the component or on onPress
.
number
The number of milliseconds a user must touch the element before executing onLongPress
.
ThemeProp
number
1
Truncate Title text such that the total number of lines does not exceed this number.
number
2
Truncate Description text such that the total number of lines does not exceed this number.
string | number
Id is used for distinguishing specific accordion when using List.AccordionGroup. Property is required when using List.AccordionGroup and has no impact on behavior when using standalone List.Accordion.
string
Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
ViewProps['pointerEvents']
'none'
pointerEvents
passed to the View
container