Collapse

Custom component for rendering collapse panel.


import { Collapse } from "react-native-magnus";

<Collapse>
  <Collapse.Header
    active
    color="gray900"
    fontSize="md"
    p="xl"
    px="none"
    prefix={<Icon name="wallet" mr="md" color="gray400" />}
  >
    Header 1
  </Collapse.Header>
  <Collapse.Body pb="xl">
    <Text>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus nobis
      corporis ut, ex sed aperiam. Debitis, facere! Animi quis laudantium, odio
      nulla recusandae labore pariatur in, vitae corporis delectus repellendus.
    </Text>
  </Collapse.Body>
</Collapse>;

Props

Collapse

Collapse is basically a Div component. So it accepts all props of Div with the following extra props

PropertyDescriptionTypeDefault
defaultActiveshows the collapse as opened when true by defaultbooleanfalse

Collapse.Header

Collapse.Header is basically a Button component. So it accepts all props of Button with the following extra props

PropertyDescriptionTypeDefault
activeSuffixRenders a component on the right of button when activeReactNode-
activePrefixRenders a component on the left of button when activeReactNode-

Collapse.Body

CollapseHeader is basically a Div component. So it accepts all props of Div