Layout Engine

SootSim uses Yoga (the same layout engine as React Native) for flexbox computation.

#Yoga integration

Every SootSimNode gets a corresponding Yoga node. When the tree is committed, SootSim:

1. creates/updates Yoga nodes for new/changed SootSimNodes
2. applies style properties as Yoga config
3. calls yogaRoot.calculateLayout() to compute layout
4. reads computed values (x, y, width, height) back into SootSimNodes
5. computes absolute positions by walking the tree

#Supported styles

All standard React Native flexbox properties:

• flex, flexGrow, flexShrink, flexBasis
• flexDirection (row, column, row-reverse, column-reverse)
• alignItems, alignSelf, alignContent
• justifyContent
• flexWrap
• gap, rowGap, columnGap
• padding*, margin*, border*Width
• width, height, minWidth, maxWidth, minHeight, maxHeight
• position (relative, absolute)
• top, left, right, bottom
• aspectRatio
• display (flex, none)
• overflow (visible, hidden, scroll)

#Text measurement

Text nodes use CanvasKit’s font metrics to measure text dimensions. The measured size is set on the Yoga node via the measureFunc callback, allowing text to participate in flexbox layout.