Skip to main content

Announcing Yoga 3.1

· 2 min read
Nick Gerleman

Yoga 3.1 is a new minor version of Yoga, used by React Native 0.75.

Highlights​

  1. Percentage support for gap properties
  2. Layout conformance and regression fixes
  3. Additional JavaScript bindings

Percentage support for gap properties​

Yoga now supports gap values specified as percentages instead of points.

warning

Percentages in Yoga do not always act consistently with browsers when a definite container size is not provided. This may be improved in a future version of Yoga.

<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      columnGap: "10%",
      width: 200,
      height: 100,
    }}>
    <Node style={{flexGrow: 1}} />
    <Node style={{flexGrow: 1}} />
    <Node style={{flexGrow: 1}} />
  </Node>
</Layout>

Alignment changes to overflowed containers​

Yoga has made several fixes to how flex-children of overflowed containers are aligned when using justify-content, align-content, or margin: "auto". This includes some cases where adding an alignment keyword could cause items to overlap, or padding to be removed.

<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 100,
      height: 100,
      padding: 10,
      justifyContent: 'space-evenly',
    }}
  >
    <Node style={{height: 100, width: 100}} />
  </Node>
</Layout>

Fixes for regressions in Yoga 3.0​

We fixed a couple of regressions added in Yoga 3.0, around percentage insets applied to some absolute containers (#1657), and start/end resolution when physical edge styles are also present (#1658).

Additional JavaScript bindings​

We've added JavaScript bindings for setting layout direction to Yoga 3.1, along with JavaScript additions made in patch releases to Yoga 3.0, including bindings for hasNewLayout flag manipulation, and an entrypoint for users who are unable to use top-level await.