Summary: X-link: https://github.com/facebook/react-native/pull/36991 D15296732 added a byte to each YGNode exposed via private API, to stash random junk in. At the time, not adding to node size because of how fields ended up aligning. I'm not sure if this is still the case, but this is subject to change (e.g. adding a single extra flag). There is a per-node "context" already that can store arbitrary data, and this reserved space isn't public, so this API is already a bit suspect. The only place it is used is in instrumentation in fbandroid, enabled only in benchmarks, to store an enum to forward to QPL for what framework it thinks created the Yoga Node. This is already broken for React Native (worked for Paper only), and afaict isn't used anywhere. But it also has little reason to be caching more information on the node (beyond maybe saving a couple memory accesses) since it derives this information from the node config already. This removes the field. Changelog: [Internal] Reviewed By: rshest Differential Revision: D45137133 fbshipit-source-id: 75755b21102f7928b3ad947051c35b1a6566ef40
Yoga

Yoga is an embeddable and performant flexbox layout engine with bindings for multiple languages.
Building
Yoga's main implementation targets C++ 14 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:
- Run
bundle install
in thegentest
directory to install dependencies of the test generator. - Run
ruby gentest.rb
in thegentest
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).