yoga/website/blog/2024-12-02-announcing-yoga-3.2.md

slug, title, authors

slug	title	authors
announcing-yoga-3.2	Announcing Yoga 3.2	NickGerleman

import Playground from '@site/src/components/Playground';

Yoga 3.2 is a new minor version of Yoga, used by React Native 0.77.

Highlights

1. Support for box-sizing
2. Support for display: contents
3. Bug fixes and improvements

box-sizing

Yoga now supports box-sizing on styles, allowing sizing values to influence the content box instead of the border box.

:::warning

To preserve compatibility, Yoga nodes default to box-sizing: border-box, even if UseWebDefaults is set. We recommend manually setting node defaults instead of using the UseWebDefaults API.

:::

<Playground code={<Layout config={{useWebDefaults: true}}> <Node style={{ width: 100, height: 100, padding: 50, boxSizing: "border-box", }}> </Node> </Layout>} />

<Playground code={<Layout config={{useWebDefaults: true}}> <Node style={{ width: 100, height: 100, padding: 50, boxSizing: "content-box", }}> </Node> </Layout>} />

display: contents

Yoga nodes may now be set to display: contents to remove them from the layout flow, while preserving and hoisting the node's children. This may be used by the higher level UI framework to allow more easily composing wrapper components (such as those which may need to handle events, without influencing child layout). Thanks @j-piasecki for the contribution!

<Playground code={`<Layout config={{useWebDefaults: false}}> <Node style={{ width: 100, height: 100, gap: 10, }}

<Node style={{display: "contents"}}>
  <Node style={{flexGrow: 1}} />
  <Node style={{flexGrow: 1}} />
  <Node style={{flexGrow: 1}} />
</Node>

`} />

Removal of legacy absolute positioning

Yoga 3.0 introduced a new algorithm used for absolute positioning. This algorithm is more correct than the one previously used, but led to observed compatibility issues with existing code, so we left the option to disable it via the AbsolutePositioningIncorrect erratum (enabled by default in frameworks like React Native). Yoga 3.2 removes the legacy absolute positioning path, but ports over the main compatibility quirk under a new erratum AbsolutePositionWithoutInsetsExcludesPadding (where the previous incorrect behavior would omit padding when a position was not specified on the absolute node). Errata users should see more correct absolute positioning behavior, while preserving compatibility with existing code.

Fixed non-global YogaConfig in Java bindings

Yoga would previously allow garbage collection of a YogaConfig if it was not retained outside of the Yoga tree. This could result in confusing errors caused by use-after free. Yoga nodes now correctly retain the configs they are using. Thanks @michaeltroger for this fix!

Fixed behavior when combining align-items with align-content

A regression was fixed in how Yoga handles some combinations of align-content and align-items. Thanks @phuccvx12 for this fix!