Documentation
Components
Inset

Inset

The Inset component is a component that creates a container with additional space around its content. This extra space, also known as padding, can be customized via props.

Example

<Stack space={2}>
  <Inset space={4}>
    <Placeholder label="space = 4" />
  </Inset>
  <Placeholder />
  <Inset horizontal={4}>
    <Placeholder label="horizontal = 4" />
  </Inset>
  <Placeholder />
  <Inset vertical={4}>
    <Placeholder label="vertical = 4" />
  </Inset>
  <Placeholder />
  <Inset bottom={4}>
    <Placeholder label="bottom = 4" />
  </Inset>
  <Placeholder />
  <Inset top={4}>
    <Placeholder label="top = 4" />
  </Inset>
  <Inset left={4}>
    <Placeholder label="left = 4" />
  </Inset>
  <Inset right={4}>
    <Placeholder label="right = 4" />
  </Inset>
</Stack>
Expand code

Props

The Inset 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.

*

Unavailable Box props: padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingStart, paddingEnd

space

Type
ResponsiveProp<number>

Add padding to all sides.

horizontal

Type
ResponsiveProp<number>

Adds padding horizontally.

vertical

Type
ResponsiveProp<number>

Adds padding vertically.

top

Type
ResponsiveProp<number>

Adds padding to the top.

right

Type
ResponsiveProp<number>

Adds padding to the right.

bottom

Type
ResponsiveProp<number>

Adds padding to the bottom.

left

Type
ResponsiveProp<number>

Adds padding to the left.

start

Type
ResponsiveProp<number>

Adds padding to the left for the ltr direction, otherwise to the right.

end

Type
ResponsiveProp<number>

Adds padding to the right for the ltr direction, otherwise to the left.

InlineRows