Summary: X-link: https://github.com/facebook/react-native/pull/47732 This pull request addresses the issue where combining align-content and align-items properties resulted in incorrect layout behavior in Yoga version 3.1.0, as reported in [Issue https://github.com/facebook/yoga/issues/1739](https://github.com/facebook/yoga/issues/1739). # Changes Made: Alignment Logic Update: Modified the alignment calculations to ensure that the combination of align-content and align-items properties produces the expected layout, consistent with CSS Flexbox standards and previous Yoga versions. Test Cases Added: Introduced new test cases to cover scenarios involving various combinations of align-content and align-items properties to prevent future regressions. # Testing: All existing tests pass successfully. New test cases confirm that the layout behaves as expected when align-content and align-items are used together. # Impact: This fix ensures that layouts using both align-content and align-items properties render correctly, aligning with the behavior observed in Yoga version 1.19.0 and standard web browsers. Pull Request resolved: https://github.com/facebook/yoga/pull/1742 Reviewed By: joevilches Differential Revision: D65953882 Pulled By: zeyap fbshipit-source-id: 7e12a21b1d442b35c3f3536cad32dc4b82130d15
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);