Wrapping Content in Flow Layouts

In this lesson, you will learn how to create flexible, multi-line grids by controlling how React Native handles content that overflows the width of its parent container.

The Flow Layout Challenge

By default, flexDirection: 'row' forces all items into a single, potentially endless line. If you have a list of tags, icons, or chips, they will simply overflow off the side of the screen. To fix this, we use a concept borrowed from CSS Flexbox called Wrapping.

When we enable wrapping, React Native monitors the width of the container. If an item cannot fit on the current line, the layout engine automatically pushes it onto a new line, creating a "flow" effect.

Enabling the Wrap

To trigger this behavior, you apply the flexWrap property to your container. You must also set flexDirection (usually to row) for the wrapping to occur across the horizontal axis.

const TagContainer = () => (
  <View style={{
    flexDirection: 'row',
    flexWrap: 'wrap', // This enables the flow layout
    padding: 10
  }}>
    <Tag text="React" />
    <Tag text="Native" />
    <Tag text="Flexbox" />
    <Tag text="Layout" />
  </View>
);

Managing the Spacing

Once you have items wrapping onto multiple lines, they will naturally stack tightly against each other. You can use the gap property (or rowGap and columnGap) on the container to ensure your items have consistent breathing room regardless of which line they end up on.

If you find that your wrapped rows have extra vertical space, you can control their alignment using alignContent. For example, alignContent: 'flex-start' will keep all your rows packed to the top of the container, preventing them from spreading out to fill the entire height of the parent.

This technique is essential for building dynamic UI components like keyword clouds, filter sets, or icon dashboards that need to adapt gracefully to different screen sizes.

Key Takeaway: Use flexWrap: 'wrap' on a container with flexDirection: 'row' to automatically push overflowing elements onto new lines, creating a responsive flow layout.