Expandable

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
>
	<span>This is demo content</span>
</Expandable>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Actions

Add extra controls to the right of the label.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
	actions={
		<Button
			icon={icons.emptyCircle}
			onPress={...}
		/>
	}
>
	<span>This is demo content</span>
</Expandable>

Keep actions on expand

If you want to keep the actions visible even when the content is expanded, you can use the keepActionsOnExpand prop.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	subtitle='Subtitle'
	actions={
		<Button
			icon={icons.emptyCircle}
			onPress={...}
		/>
	}
	keepActionsOnExpand
>
	<span>This is demo content</span>
</Expandable>

Disable focus trapping

By default, the component will trap focus when expanded. If you want to disable this behavior, you can use the noFocusHandling prop.

<Expandable
	icon={icons.emptyRect}
	label='Expandable'
	noFocusHandling
>
	<span>This is demo content</span>
</Expandable>