LibraryActive

Yoga

Yoga is a cross-platform layout engine implementing Flexbox, with incremental layout support to avoid re-layout of unchanged subtrees.

Open source page ↗

Field note

What it does

Yoga is a cross-platform layout engine that implements Flexbox. It supports incremental layout: when a node's style or children change, Yoga marks the node and ancestors as dirty. On subsequent layouts, clean nodes are skipped if parent constraints unchanged. The HasNewLayout flag indicates whether a node or its children have new layout, allowing efficient application of results.

Capabilities

Available capabilities

Incremental LayoutLayout SystemFlexbox LayoutCSS SubsetFlexboxTree-based layout

Tags

Tags

Layout engineFlexbox

Ways to use it

Ways to use it

sdk

C/C++ / Not filed

sdk

Java / Not filed

sdk

JavaScript / Not filed

sdk

JavaScript / https://reactnative.dev/docs/layout-props

sdk

Java / com.facebook.yoga

npm

JavaScript / yoga-layout

Product features

Product features

Box sizing border-box

Yoga acts as if box-sizing: border-box is set, including padding and border in specified dimensions.

C API

Provides a public C API for use by many languages.

Cross-platform

Enables sharing code between native platforms and the browser.

Cross-platform bindings

Provides bindings for C/C++, Java, and JavaScript.

Default styles

Default node style similar to display:flex with exceptions: flex-direction column, align-content flex-start, flex-shrink 0, position relative.

Dirty Marking

Yoga automatically marks a node and its ancestors as dirty when style or children change.

Edge support

Margin, padding, position, border set against edges: relative to writing direction, physical, or collections.

Embeddable

Yoga can be embedded in other applications.

HasNewLayout Flag

Yoga exposes whether the layout of a node or its children have changed via the HasNewLayout flag.

Incremental layout

Reuses cached layout results for unchanged subtrees to improve performance.

Non-standard properties

aspect-ratio and flex shorthand behave differently from CSS.

Point units

Works on points, an arbitrary canonical absolute unit, and percentage, not CSS units like px or em.

Skip Clean Subtrees

On subsequent layout, nodes that are not dirty are skipped if parent constraints have not changed.

Yoga Node tree

Each box in Yoga is represented as a Yoga Node, forming a tree for styles and layout results.