Accordion

Layout

An animated height-expanding disclosure component. Supports single or multiple open panels simultaneously with smooth spring transitions.

GitHub

Installation

bash

npx native-mate add accordion

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Accordion } from '~/components/ui/accordion'

const items = [
  { title: 'What is native-mate?', content: <Text>A copy-paste component library for React Native.</Text> },
  { title: 'Is it free?', content: <Text>Yes, completely open source.</Text> },
  { title: 'Does it support Expo?', content: <Text>Yes, Expo and bare React Native are both supported.</Text> },
]

// Single open at a time (default)
<Accordion items={items} />

// Allow multiple open panels
<Accordion items={items} allowMultiple defaultOpen={[0]} />

Props

Prop	Type	Default	Description
items	Array<{ title: string; content: React.ReactNode }>	—	Array of accordion panel definitions.
allowMultiple	boolean	false	When true, multiple panels can be open at once.
defaultOpen	number[]	[]	Indices of panels that are open by default.
style	ViewStyle	—	Additional styles for the accordion container.

Example

tsx

import { Accordion } from '~/components/ui/accordion'
import { Text } from '@native-mate/core'
import { View } from 'react-native'

const FAQS = [
  { title: 'Getting started', content: <Text>Run npx native-mate init to scaffold your project.</Text> },
  { title: 'Customisation', content: <Text>All components are plain source files — edit them freely.</Text> },
  { title: 'Dark mode', content: <Text>Tokens automatically adapt via the useColorScheme hook.</Text> },
]

export function AccordionExample() {
  return (
    <View style={{ padding: 16 }}>
      <Accordion items={FAQS} allowMultiple defaultOpen={[0]} />
    </View>
  )
}

Sheet

Tabs