Bleed

The Bleed component is specifically designed to create a container with negative margins so that its content appears to extend beyond the container's boundaries. This is particularly useful when you want to visually break out of a parent container without having to refactor the entire component tree.

<Stack space={4}>
  <Bleed space={3}>
    <Placeholder label="space = 3" />
  </Bleed>
  <Placeholder />
  <Bleed horizontal={4}>
    <Placeholder label="horizontal = 4" />
  </Bleed>
  <Placeholder />
  <Bleed vertical={3}>
    <Placeholder label="vertical = 3" />
  </Bleed>
  <Placeholder />
  <Bleed bottom={3}>
    <Placeholder label="bottom = 3" />
  </Bleed>
  <Placeholder />
  <Placeholder />
  <Bleed top={3}>
    <Placeholder label="top = 3" />
  </Bleed>
  <Bleed left={4}>
    <Placeholder label="left = 4" />
  </Bleed>
  <Bleed right={4}>
    <Placeholder label="right = 4" />
  </Bleed>
</Stack>

This component works in contrast to the Inset component, which creates a padded container. While Inset creates a container that keeps its content within its boundaries, this component creates a container that allows its content to "bleed" into the surrounding layout.

Props

The Bleed component is created using the Box component. It extends all the props* supported by Box, as well as React Native View (opens in a new tab), and the props mentioned below.

space

horizontal

vertical

top

right

bottom

left

start

end