Collapsible

Component to reveal and hide content

Usage

Uncontrolled

Toggle

<Collapsible title="Toggle" initialIsOpen={false}>
  <Box
    marginVertical={16}
    justifyContent="center"
    alignItems="center"
    height={300}
    backgroundColor="#67c6bb"
  />
</Collapsible>

<Collapsible title="Toggle" initialIsOpen={false}>
  <Box
    marginVertical={16}
    justifyContent="center"
    alignItems="center"
    height={300}
    backgroundColor="#67c6bb"
  />
</Collapsible>

Controlled

Open collapsible

<Toggle initial={false}>
  {({ on, toggle }) => (
    <Collapsible
      title={on ? 'Close collapsible' : 'Open collapsible'}
      isOpen={on}
      onOpen={toggle}
      onClose={toggle}
    >
      <Box
        marginVertical={16}
        justifyContent="center"
        alignItems="center"
        height={300}
        backgroundColor="#67c6bb"
      />
    </Collapsible>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle }) => (
    <Collapsible
      title={on ? 'Close collapsible' : 'Open collapsible'}
      isOpen={on}
      onOpen={toggle}
      onClose={toggle}
    >
      <Box
        marginVertical={16}
        justifyContent="center"
        alignItems="center"
        height={300}
        backgroundColor="#67c6bb"
      />
    </Collapsible>
  )}
</Toggle>

Partial<{ touchable: overridewithstyle<collapsiblebaseprops, touchableprops, styleprop<viewstyle>>; title: overridewithstyle<collapsiblebaseprops, titleprops, style<textprops, textstyle>>; iconopen: overridewithstyle<...>; iconclose: overridewithstyle<...>; content: overridewithstyle<...>; }> | undefined

title

Optionalstring

children

Reactnode

initialIsOpen

Boolean | undefined

false

isOpen

Boolean | undefined

false

onOpen

(() => void) | undefined

onClose

(() => void) | undefined

testID

String | undefined

Overrides

export interface CollapsibleOverrides {
  Touchable: TouchableProps;
  Title: TitleProps;
  IconOpen: IconProps;
  IconClose: IconProps;
  Content: ContentProps;
}

Collapsible

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Usage

Uncontrolled

Controlled

Props

Overrides

Usage