Summary: X-link: https://github.com/facebook/react-native/pull/46984 Pull Request resolved: https://github.com/facebook/yoga/pull/1725 The legacy (wrong) absolute positioning path positions in two places, including work that is definitely always overwritten in the new absolute layout path. This came up before for position: static, but we didn't clean this up at the time. This code is also now leading display: contents impl being more annoying. This diff tries to converge to the more spec correct implementation of positioning here, that also only happens in one place. Previous path would potentially also incorrectly justify when `justify-content` was non-default, but not handled in the previous few cases? We don't have access to the flexLine at this point later, and apart from the existing tests now passing I reused the new correct logic for justification (spec says we should position child as if its the only child in the container https://www.w3.org/TR/css-flexbox-1/#abspos-items). I added a new, more scoped errata `AbsolutePositionWithoutInsetsExcludesPadding` to preserve some of the legacy behavior that showed as very breaking. I also did not try removing `AbsolutePercentAgainstInnerSize` which I suspect would be more breaking than this change. Changelog: [General][Breaking] - More spec compliant absolute positioning Reviewed By: joevilches Differential Revision: D64244949 fbshipit-source-id: ca97570e0de82e8f0424a0912adfd0b05254559e
yoga-layout
This package provides prebuilt WebAssembly bindings for the Yoga layout engine.
See more at https://yogalayout.dev
Usage
import {Yoga, Align} from 'yoga-layout';
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);
Objects created by Yoga.<>.create()
are not automatically garbage collected and should be freed once they are no longer in use.
// Free a config
config.free();
// Free a tree of Nodes
node.freeRecursive();
// Free a single Node
node.free();
Requirements
yoga-layout
requires a toolchain that supports ES Modules and top-level await.
If top-level-await is not supported, use the yoga-layout/load
entry point instead. This requires to load yoga manually:
import {loadYoga, Align} from 'yoga-layout/load';
const node = (await loadYoga).Node.create();
node.setAlignContent(Align.Center);