Summary: X-link: https://github.com/facebook/litho/pull/1036 Pull Request resolved: https://github.com/facebook/yoga/pull/1775 X-link: https://github.com/facebook/react-native/pull/48404 ## Changelog: [Internal] - This popped up when profiling some heavy UI performance, calling `fmod` operation in Yoga's `roundLayoutResultsToPixelGrid` in `PixelGrid.cpp` can be expensive, furthermore it turns out that some of the calls were redundant. This replaces the duplicate calls to fmod with an equivalent single round operation, which for e.g. clang compiler on Windows brings the code in question from ~50 instructions (including 4 call instructions to the fmod function) down to ~30 instructions (without any external calls), and the layout operation being **~1% more efficient** for the particular benchmark I was looking into. Reviewed By: christophpurrer Differential Revision: D67689065 fbshipit-source-id: 2a074a1cb81bd7f7a3c414050b9ddda2ba90180f
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).