Skip to main content

Announcing Yoga 3.1

· 2 min read
Joe Vilches
Nick Gerleman

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

  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 unrelated spacing between children could shrink of become negative.

Before

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

Before alignment changes

After

<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.

Integrating Yoga into your project​

Yoga includes a reference CMake build, and has official bindings published across several package managers:

JavaScript

// package.json
{
  "dependencies": {
    "yoga-layout": "^3.1.0"
   }
}

Android

// build.gradle.kts
dependencies {
  implementation("com.facebook.yoga:yoga:3.1.0")
}

CocoaPods

# Podfile
pod 'Yoga', '~> 3.1.0'

SwiftPM

// Package.swift
import PackageDescription

let package = Package(
    dependencies: [
        .package(url: "https://github.com/facebook/yoga.git", from: "3.1.0")
    ],
)