The Yoga Enigma
summary
A layout bug crops text in a row because Yoga initially asks native text measurement with the full available width, so the text reports too-large line widths and overflows; adding flexShrink: 1 lets Yoga recalculate with reduced remaining space and fixes it. Debugging uses an Expo app, breakpoints inside Yoga’s C++ calculateLayout, and native text measures (iOS UIKit / Android StaticLayout). Native text measurement costs around 50–60% of Yoga time; enabling useWebDefaults restores web-like defaults.
AI-written summary · about
chapters (9)
- 0:00Introduction and bug example
- 1:48What is Yoga layout engine
- 3:58History of Yoga development
- 7:12Yoga algorithm deep dive
- 14:23Bug origin in Yoga algorithm
- 16:51Fixing the bug with flexShrink
- 19:01Why flexShrink is default zero
- 20:49Performance impact of text measuring
- 21:11Future of Yoga and web defaults
related talks
30mReact Native, The Native Bits
09mBuilding blocks of React Native
27mMulti-Child Algorithm Deep Dive
23mUsing SwiftUI as a Language
39mView performance deep dive
36mHorror Stories From Hacking the DOM Into a Native Platform
48mLet's sprinkle some #PerfMatters on our ViewGroups (fr)
22mCoding Session: React Native Practice