Summary: X-link: https://github.com/facebook/react-native/pull/52073 Pull Request resolved: https://github.com/facebook/yoga/pull/1820 Fixes https://github.com/facebook/yoga/issues/1819 Yoga has a fast path when measuring a node, if it thinks it knows its dimensions ahead of time. This path has some eroneous logic, to set both axis to owner size, if *either* will evaluate to zero, while having an `YGMeasureModeAtMost`/`FitContent` constraint. This means that if a node is given a zero width, and Yoga later measures with with `FitContent`, its height will become the maximum allowable height, even if it shouldn't be that large. We can fix this, by only allowing if both axis are this fixed case, instead of just one. This bug has existed for about a decade (going back to at least D3312496). Changelog: [General][Fixed] - Fix possible invalid measurements with width or height is zero pixels Reviewed By: yungsters Differential Revision: D76793705 fbshipit-source-id: ea4c00e688912a58c08801e4a14ddf1b293a5d86
Yoga

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.
Building
Yoga's main implementation targets C++ 20 with accompanying build logic in CMake. A wrapper is provided to build the main library and run unit tests.
./unit_tests <Debug|Release>
While not required, this script will use ninja if it is installed for faster builds.
Yoga is additionally part of the vcpkg collection of ports maintained by Microsoft and community contributors. If the version is out of date, please create an issue or pull request on the vcpkg repository.
Adding Tests
Many of Yoga's tests are automatically generated, using HTML fixtures describing node structure. These are rendered in Chrome to generate an expected layout result for the tree. New fixtures can be added to gentest/fixtures
.
<div id="my_test" style="width: 100px; height: 100px; align-items: center;">
<div style="width: 50px; height: 50px;"></div>
</div>
To generate new tests from added fixtures:
- Ensure you have yarn classic installed.
- Run
yarn install
to install dependencies for the test generator. - Run
yarn gentest
in theyoga
directory.
Debugging
Yoga provides a VSCode "launch.json" configuration which allows debugging unit tests. Simply add your breakpoints, and run "Debug C++ Unit tests (lldb)" (or "Debug C++ Unit tests (vsdbg)" on Windows).