Skip to main content

Wrap

Wrap is a layout component that adds a defined space between its children. It wraps its children automatically if there isn't enough space to fit anymore in the same row.

Think of it as a smarter flex-wrap with spacing support. It works really well with things like dialog buttons, tags, and chips.

💬 Feedback , 🌱 Source

Import​

import { Wrap } from 'react-native-flex-layout';

Usage​

In the example below, you see that the last Box wrapped to the next line.

<Wrap>
  <Box w={56} h={56} />
  <Box w={56} h={56} />
  <Box w={56} h={56} />
</Wrap>

Change the spacing​

Pass the spacing prop to apply consistent spacing between each child, even if it wraps.

<Wrap spacing={16}>
  <Box w={56} h={56} />
  <Box w={56} h={56} />
  <Box w={56} h={56} />
</Wrap>

Change the alignment​

Pass the align prop to change the alignment of the child along the cross axis.

Pass the justify prop to change the alignment of the child along the main axis.

<Wrap items="center" spacing={16}>
  <Box w={56} h={56} />
  <Box w={56} h={56} />
  <Box w={56} h={56} />
</Wrap>

Props​

PropTypeDescription
spacingSpacingThe spacing between children (even if it wraps).
shouldWrapChildrenbooleanIf true, the children will be wrapped in a Box and the Box will take the spacing properties.

...FlexProps , ...SelectorProps