Version: 3.0.0-next.40

Accordion

Implements#

Import#

import { Accordion } from 'native-base';

Examples#

Basic#

Multiple#

Default Index#

Toggle#

Expanded Style#

Accessing Internal State#

Props#

Accordion#

NameTypeDescriptionDefault
allowMultiplebooleanIf true, multiple accordion items can be expanded at once.-
allowTogglebooleanIf true, any expanded accordion item can be collapsed again.-
indexNumber[], numberThe index(es) of the expanded accordion item.-
defaultIndexNumber[], numberThe initial index(es) of the expanded accordion item. Must be an array for allowMultiple={true} to work.-
onChangefunctionThe callback invoked when accordion items are expanded or collapsed.-

Accordion uses Collapse to provide height animation.

AccordionItem#

NameTypeDescriptionDefault
idstringA unique id for the accordion item.-
isDisabledbooleanIf true, the accordion header will be disabled.-

Accordion.Summary#

Accrodion.Summary renders a button and composes Box. All the Box props can be passed to Accrodion.Summary and you can style it by passing pseudo style props like _expanded, _disabled, _hover, etc.

Accordion.Details#

AccordionDetails composes Collapse to provide height animation.

Accordion.Icon#

AccordionIcon renders an Icon and composes Icon.

Accessibility#

WIP (Work in progress)