Version: 3.0.0-next.38

Collapse

Collapse is used to create regions of content that can expand or collapse with a simple animation.

Implements#

Import#

import { Collapse } from 'native-base';

Examples#

Basic#

Animation Duration#

With Callbacks(onAnimationStart & onAnimationEnd)#

Props#

NameTypeDescriptionDefault
isOpenbooleanIf true, the content will be visible.-
durationnumberThe animation duration(in ms) as it expands.-
startingHeightnumberThe height you want the content in it's collapsed state. Set to 0 by default.-
endingHeightnumberThe height you want the content in it's expanded state. Set to auto by default.-
onAnimationStartfunctionThe function to be called when the collapse animation starts.-
onAnimationEndfunctionThe function to be called when the collapse animation starts.-

Accessibility#

Collapse currently just provides a way to hide/show component.

Make sure you follow the disclosure accessibility spec while implementing a collapse.