Accordion

Expandable accordion panels

Import: import { Accordion } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { Collapse, Button, Paper, Text } from 'react-native-mantine';

const AccordionItem = ({ title, children }) => {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Button
        variant="subtle"
        fullWidth
        onPress={() => setOpened(!opened)}
      >
        {title}
      </Button>
      <Collapse in={opened}>
        <Paper p="md">
          <Text>{children}</Text>
        </Paper>
      </Collapse>
    </>
  );
};

Props

Prop	Type	Description
`children` (required)	`React.ReactNode`	Accordion items
`multiple`	`boolean`	Allow multiple items to be opened at once
`defaultValue`	`string \| string[]`	Default opened items (uncontrolled)
`value`	`string \| string[]`	Controlled opened items
`onChange`	`(value: string \| string[]) => void`	Called when opened items change
`variant`	`'default' \| 'contained' \| 'separated'`	Accordion variant
`radius`	`MantineNumberSize`	Border radius
`spacing`	`SpacingValue`	Spacing between items (separated variant only)
`style`	`any`	Additional styles
`testID`	`string`	Test identifier used by testing frameworks

Source on GitHub · npm