Skip to main content

Insets

Insets refer to the position property that you can assign to an edge (not to be confused with position type) using one of the following APIs:

YGNodeStyleSetPosition(node, edge, position);

This property will offset the node in a specific way depending on what position type the node has.

  • If the node is static then insets have no effect.
  • If the node is relative then insets will move the node the designated amount from where the node would normally be in the container. Each inset property is relative to the node's corresponding physical edge. So YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f) will offset the node so that the right edge is 10 units away from where the right edge would be originally.
  • If the node is absolute then insets will move the node the designated amount away from the node's containing block. So YGNodeStyleSetPosition(node, YGEdgeRight, 10.0f) will offset the node so that the right edge is 10 units away from the containing block's right edge.

In the event that a node has a fixed size and opposite insets are defined (e.g. a value assigned to the right edge and left edge) then the left and top edge will have priority.

<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
    }}>
    <Node
      style={{
        height: 50,
        width: 50,
        top: 50,
        left: 50,
      }}
    />
  </Node>
</Layout>