---

Accordion component

Effect demonstration

1. Default effect

<Accordion
  sections={[
    { title: 'I am the title', content: '11111111111111111' },
    {
      title: 'I am the title',
      content: '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
    },
    {
      title: 'I am the title',
      content: `I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am`,
},
  ]}
/>

2. Only one expansion is allowed

<Accordion
  multiple={false}
  sections={[
    { title: 'I am the title', content: '11111111111111111' },
    {
      title: 'I am the title',
      content: '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
},
    {
      title: 'I am the title',
      content: `I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am`,
    },
  ]}
/>

3. Customize tab container style

<Accordion
  multiple={true}
  sections={[
{ title: 'I am the title', content: '11111111111111111' },
    {
      title: 'I am the title',
      content: '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
    },
    {
      title: 'I am the title',
      content: `I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am`,
    },
  ]}
  contentStyle={{padding: 12, backgroundColor: 'red'}}
/>

4. Custom container style

<Accordion
  multiple={true}
  sections={[
    { title: 'I am the title', content: '11111111111111111' },
    {
      title: 'I am the title',
      content: '2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
    },
    {
      title: 'I am the title',
content: `I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am Content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am content I am`,
    },
  ]}
  accordionStyle={{ borderWidth: 1, borderColor: 'red', marginHorizontal: 12 }}
/>

API

Accordion Properties

Properties	Required	Description	Type	Default Value
sections	true	Accordion tab list	Section[]
multiple	false	Whether to allow multiple expansions	boolean	true
activeOpacity	false	Opacity when pressed	number	0.6
headerHeight	false	Tab header height	number	54
accordionStyle	false	Container style	ViewStyle
contentStyle	false	tab style	ViewStyle
customIcon	false	Custom right icon	({ progress }: { progress: Animated.SharedValue<number> }) => ReactNode