Version: 3.0.0-next.37

Wrap

Wrap is a layout component that adds a defined space between its children and 'wraps' its children automatically if there's not enough space to fit any child.

Import#

import { Wrap } from 'native-base';

Implements#

Example#

Basic#

You can see that the Box gets wrapped to the next line.

Spacing#

You can pass spacing prop to add consistent spacing between its child components.

Alignment and Justify#

You can pass shorthands for alignItems and justifyContent as align and justify respectively.

align prop changes the alignment of the child along the main axis.

The justify prop changes the alignment of the child along the cross axis.

Props#

In addition to this, all the Flex Props can be passed to Wrap.

NameTypeDescriptionDefault
spacingstring, numberThe divider element to use between elements.-
justifyjustifyContentThe justifyContent value (for cross axis alignment).-
alignalignItemsThe alignItems value (for main axis alignment).-
directionflexDirectionThe flexDirection value.-