OptionalalignDefines how lines are distributed along the cross axis when flexWrap is WRAP or WRAP_REVERSE.
Has no effect when there is only one line of flex items.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalalignDefines how flex items are aligned along the cross axis of the container.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalalignAllows overriding the parent's alignItems value for a specific flex item.
AUTO, FLEX_START, CENTER, FLEX_END, STRETCH, BASELINE, SPACE_BETWEEN, SPACE_AROUND)OptionalaspectLocks the aspect ratio (width / height) of the node. If set, Yoga might adjust the height based on the calculated width or vice versa.
OptionalbackdropGraphical effects applied to whatever is painted behind the node, in CSS filter notation.
The filtered backdrop is clipped to the node's own box, corners included, and the node's background paints over the result — so a translucent background over a blurred backdrop is the frosted glass CSS produces. A node with no background of its own shows the backdrop filtered and nothing else.
Only what has already been drawn is a backdrop: a sibling declared after this node paints over it and is not included, as in CSS.
OptionalbackgroundSets the background color of the node. Drawn beneath the content and padding, extending to the border edge. Accepts standard CSS color strings.
OptionalbackgroundA picture painted across the node's box, behind its content and over its background colour.
CSS background-image and the properties that place it. The source is fetched and decoded
before layout, the same way an ImageProps.src is, and shares the same cache — a picture
used as one node's background and another's image is loaded once.
Unlike an Image, this never affects layout: the box is whatever the box was.
Optionalcolor?: stringRecolours an SVG's fills before it is rasterised, as ImageProps.color does.
OptionalhttpOptions?: RequestInitOptions for a remote fetch. Ignored for a local path or a buffer.
Optionalposition?: { x?: number | `${number}%`; y?: number | `${number}%` }Where the first tile sits, from the box's top-left. Percentages place the picture the way CSS
does — '100%' puts its far edge against the box's far edge rather than pushing it outside.
Optionalx?: number | `${number}%`Distance from the left edge, or the share of the slack CSS lines the picture up by.
Optionaly?: number | `${number}%`Distance from the top edge, read the same way.
Optionalrepeat?: How the picture tiles to fill the box.
Optionalsize?: How big each tile is drawn. A number is a width in pixels with the height following the
picture's own proportions; a pair sizes both edges; Cover and Contain scale to the box.
A URL, a file path, or the bytes themselves.
OptionalborderSets the width of the node's border. Can be a single number for all edges or an object specifying individual edges.
OptionalborderColour of the node's border — one colour for every edge, or a colour per edge.
Accepts standard CSS colour strings ('red', '#FF0000', 'rgba(255,0,0,0.5)'). Given an
object, an edge left out falls back to black. Where two edges of different colours meet at a
rounded corner the arc is split between them, as CSS joins them.
OptionalborderSets the radius of the node's corners, creating rounded effects.
Can be a single number for all corners or an object specifying individual corners (TopLeft, TopRight, BottomLeft, BottomRight).
OptionalborderSets the style of the node's border.
OptionalboxApplies one or more box-shadow effects to the node. Can be a single shadow object or an array of shadow objects. Shadows are drawn in the order specified.
OptionalboxDefines how the width and height properties are interpreted regarding padding and border.
CONTENT_BOX: Width/height apply only to the content area. Padding and border are added outside.
BORDER_BOX: Width/height include content, padding, and border.
OptionalchildrenChild nodes to be laid out within this node. Can be a single BoxNode or an array of BoxNodes.
OptionalcolorText color. Accepts standard CSS color strings.
OptionaldirectionSets the primary text and layout direction (Left-to-Right or Right-to-Left).
Affects the meaning of Start and End edges for properties like position, margin, padding, border.
INHERIT: Uses the direction of the parent node.
INHERIT, LTR, RTL)OptionaldisplayControls whether the node and its children are included in the layout calculation and rendering.
FLEX: The node participates in a flex layout.
NONE: The node and its subtree are ignored by layout and rendering.
FLEX, NONE)OptionalditherDither this node's drawing, trading a little noise for the banding an eight-bit surface shows across a long, subtle gradient.
Costs nothing where nothing bands: a flat fill, text and a blurred shadow encode to identical bytes either way, because a dither only perturbs a pixel whose colour falls between two the surface can hold. On a gradient reckon on about a third again the PNG bytes, and near nothing for WebP or JPEG, whose quantizers absorb the noise.
Inherited by descendants, so setting it on Root covers the page and a node overrides it for
its own subtree without touching its siblings. Pointless under a float colorType, which has
the precision to draw the ramp outright.
OptionalfilterGraphical effects applied to the node and everything inside it, in CSS filter notation.
The whole subtree is drawn once and the chain applied to the result, which is what CSS does — so two overlapping children are filtered together rather than each on its own. Functions run left to right, and anything that does not parse is ignored rather than throwing.
saturate on an ImageProps is the same machinery: where both are given, the shorthand
runs first, then this chain.
A blur reaches past the node's box, as it does in CSS, and is not clipped to it.
OptionalflexDefines the default size of a flex item along the main axis before the remaining space is distributed.
OptionalflexDefines the direction of the main axis for flex items within this container.
COLUMN, ROW, COLUMN_REVERSE, ROW_REVERSE)OptionalflexDefines the ability of a flex item to grow if necessary, relative to other items. A non-negative number indicating the proportion of available space the item should take.
OptionalflexDefines the ability of a flex item to shrink if necessary, relative to other items. A non-negative number indicating the proportion of overflow space the item should lose.
OptionalflexControls whether flex items are forced onto a single line or can wrap onto multiple lines.
NO_WRAP, WRAP, WRAP_REVERSE)OptionalfontFont family (e.g., 'Arial', 'Helvetica', 'sans-serif'). Ensure the font is available in the rendering environment.
OptionalfontFont size.
OptionalfontFont style.
OptionalfontSpecifies font variation settings. Provides fine control over font variation axis. Accepts string in CSS font-variation-settings format.
OptionalfontFont weight (e.g., 'normal', 'bold', 400, 700).
OptionalgapDefines the space between flex items along the main axis.
OptionalgradientSets a linear gradient as the background. Overrides backgroundColor if provided.
colors: Array of CSS color strings for the gradient stops.
direction: Array of four numbers [x0, y0, x1, y1] defining the start and end points of the gradient line, relative to the node's top-left corner.
OptionalgridRow and column together, as CSS grid-area writes them: '1 / 2 / 3 / 4' is
row-start / column-start / row-end / column-end.
OptionalgridWhich columns the item occupies, in the notation CSS grid-column uses: a line-to-line range
like '1 / 3', or 'span 2' to take that many from wherever the item lands.
OptionalgridWhich rows the item occupies, read the same way as gridColumn.
OptionalheightSets the height of the node.
OptionaljustifyDefines how flex items are distributed along the main axis of the container.
FLEX_START, CENTER, FLEX_END, SPACE_BETWEEN, SPACE_AROUND, SPACE_EVENLY)OptionalkeyOptional key identifier for component reconciliation.
OptionalletterSets the spacing between letters (tracking). Accepts CSS units like 'normal', '2px', '0.1em'.
OptionallineAdditional vertical spacing between lines of text.
OptionallineHeight of each line box.
Left unset, a line is the face's own height — its ascent plus its descent — which is what
line-height: normal means in CSS and is a little over 1.3em for most text faces. Set smaller
than that and the lines overlap rather than the box quietly growing, again as CSS does.
OptionalmarginSets the margin space on the outside of the node's border. Can be a single number for all edges or an object specifying individual edges.
OptionalmaskLimits what of this node is drawn — see Mask.
Covers everything the node renders, its background, border, content and children alike. A shape
or path clips; a gradient fades. Inherited by every component, so Text, Image, Chart and
Grid take it too.
OptionalmaxSets the maximum height of the node.
OptionalmaxSets the maximum width of the node.
OptionalminSets the minimum height of the node.
OptionalminSets the minimum width of the node.
OptionalmixHow the node and everything inside it is combined with what is already painted behind it.
CSS mix-blend-mode. The subtree is drawn once and the blend applied to the result, so two
overlapping children blend with the backdrop together rather than each in turn.
Only what has already been painted counts as a backdrop, which is the same rule
backdropFilter follows.
OptionalnameOptional display name for debugging purposes.
OptionalopacitySets the opacity of the node and its children when drawing. A value between 0 (fully transparent) and 1 (fully opaque).
The node's whole drawing — background, border, content and children — is composited once and then faded, as CSS does. Two overlapping children inside a half-transparent parent are exactly as dark as one of them, rather than compounding into a darker patch where they meet.
Nesting multiplies: a child at 0.5 inside a parent at 0.5 draws at 0.25 against the page.
OptionaloverflowDefines how content that overflows the node's bounds is handled.
VISIBLE: Content is not clipped and may render outside the node's box.
HIDDEN: Content is clipped and the rest is invisible.
SCROLL: Yoga lays the node out as a scroll container, but nothing is clipped — a scroll
container is a box a reader moves, and nothing here is interactive. It draws as VISIBLE.
VISIBLE, HIDDEN, SCROLL)OptionalpaddingSets the padding space on the inside of the node's border, around the content. Can be a single number for all edges or an object specifying individual edges.
OptionalpaintWhether a glyph's stroke is painted over its fill or under it. CSS paint-order.
OptionalpositionSpecifies the offset distances for positioned elements (positionType: 'ABSOLUTE' or RELATIVE).
Can be a single number for all edges or an object specifying individual edges (Top, Right, Bottom, Left, Start, End).
Start and End are affected by direction (LTR/RTL).
OptionalpositionSpecifies the positioning method used for the node.
RELATIVE: Positioned according to the normal flow, then offset relative to that position.
ABSOLUTE: Taken out of the flow and positioned against its immediate parent.
That last part is where this differs from CSS, and the difference is Yoga's rather than this library's. CSS resolves an absolute node against the nearest positioned ancestor, skipping every static box in between; Yoga always uses the parent, whether or not it is positioned. A layout ported from the browser that relies on skipping an intermediate box will land somewhere else — give the node's own parent the offsets instead.
RELATIVE, ABSOLUTE)OptionaltextHorizontal text alignment within the node's bounds.
OptionaltextLines drawn on the text, in the notation CSS text-decoration uses.
A line keyword on its own is the common case; a style, a colour and a thickness may follow in any order, and two line keywords may be combined. Anything that does not parse draws nothing rather than throwing. Inherited, so a heading and its nested spans are decorated together.
OptionaltextAn outline drawn on the glyphs, as CSS -webkit-text-stroke.
The stroke is centred on the glyph's outline, so half of it falls inside the letter. Painted over the fill — which is what CSS does unless told otherwise — a thick stroke eats inward and thins the letterform; TextProps.paintOrder moves it under the fill, where it only widens the glyph outward.
Optionalcolor?: stringColour of the outline.
Optionalwidth?: numberThickness of the outline, centred on the glyph — half falls inside the letter, half outside.
OptionaltransformDefines the 2D transformations (translate, rotate, scale) applied to the node after layout.
OptionalverticalVertical text alignment within the node's bounds. Note: Simple implementation aligns based on the first line.
OptionalwidthSets the width of the node.
OptionalwordSets the spacing between words. Accepts CSS units like 'normal', '10px', '0.5em'. This space is added to the intrinsic width of the space character.
OptionalzStack order among absolutely positioned siblings. A larger value paints over a smaller one, and equal values paint in the order they were declared.
Only absolutely positioned nodes take part. An in-flow child is painted in flow order and is
never lifted by a zIndex.
Leaving it unset is CSS's z-index: auto, which shares a layer with 0 — so an absolutely
positioned child still paints above in-flow siblings, whether it is declared before or after
them. A negative value puts it below them instead, which is how a decoration is placed behind
the content of its own parent.
Defines the properties for a GridItemNode. Includes all BoxProperties plus Grid placement properties.