Yoga is an embeddable layout engine targeting web standards.
MIT License
Bot releases are hidden (Show)
hasNewLayout()
Published by NickGerleman 7 months ago
Yoga 3.0 is a new major (breaking) version of Yoga, used by React Native 0.74.
position: static
align-content: space-evenly
Learn more at https://yogalayout.dev/blog/announcing-yoga-3.0
Published by NickGerleman 12 months ago
yoga-layout/wasm-sync
exporting an async entrypoint if browser
or node
export conditions not metPublished by NickGerleman over 1 year ago
We are excited to announce a new major (breaking) version of Yoga. This release contains 198 new commits from 64 contributors, and includes the first significant changes to Yoga in open-source since 2018.
While there has been a long gap in development, the React Native team believes Yoga is a critical tool in delivering the future of React, and we have resumed development of the engine. This release of Yoga is focused on:
Yoga continuously ships to thousands of surfaces across multiple frameworks at Meta. This version of Yoga corresponds to the version which will be included in React Native 0.73 shipping this fall.
The most significant new feature for users on an older stable release of Yoga is the addition of Flexbox gap support. This powers gap
, rowGap
, and columnGap
in React Native 0.71.
// Example.cpp
YGNodeStyleSetGap(node, YGGutterRow, 2.0f);
// Example.java
node.setGap(YogaGutter.ROW, 2.0f);
// Example.ts
node.setGap(Gutter.Row, 2);
Meta uses Buck across its monorepo, but we recognize that Buck has acted as a barrier to be able to use Yoga outside of Meta. Yoga no longer ships build logic for Buck to open-source. We have instead added over 20 new validation jobs to GitHub Actions to continually validate that Yoga builds correctly in common systems and scenarios where Yoga is used in OSS.
New toolchain support includes:
Our team wants to enable engineers to be able to create a single style which renders faithfully across Yoga and web. Conformance is a moving target, with browsers like Chromium regularly making behavior changes to better achieve it. This requires making behavior changes to Yoga which break existing behaviors, for better consistency with the web.
In Yoga 2.0, we’ve generalized UseLegacyStretchBehaviour
to a new Errata API, to allow different parts of a Yoga tree to target different conformance levels. This allows rendering part of the tree to be compatible with styles written for web, with other parts compatible with styles written for older versions of Yoga.
Yoga's default behavior going forward is W3C compliance. We recommend users sensitive to the change to set YGErrataClassic,
or YGErrataAll
if you were already setting UseLegacyStretchBehaviour
.
// Example.cpp
YGConfigRef config = YGConfigNew();
YGConfigSetErrata(config, YGErrataClassic);
YGNodeRef node = YGNodeNewWithConfig(config);
// Example.java
YogaConfig config = YogaConfigFactory.create();
config.setErrata(YogaErrata.CLASSIC);
YogaNode node = YogaNodeFactory.create(config);
// Example.ts
const config = Config.create();
config.setErrata(Errata.Classic);
const node = Node.create(config);
Yoga’s previous JavaScript bindings are not installable when using Node 12+, making them effectively unusable in today’s JavaScript ecosystem. We now ship a new package with prebuilt binaries and first-class support for TypeScript and modern bundlers.
Two variants are shipped:
Both are about 45KB when gzipped.
WebAssembly binaries must be asynchronously compiled and loaded in Chrome. In the absence of universal support for top-level await, we have made the breaking change to require explicitly asynchronously loading Yoga before using it.
import {loadYoga, Align} from 'yoga-layout';
const Yoga = await loadYoga();
const node = Yoga.Node.create();
node.setAlignContent(Align.Center);
The previous behavior of blocking to load the binary can be replicated by importing from the yoga-layout/sync
entrypoint, but this is not recommended for new usages, and does not allow using WebAssembly on browsers.
import Yoga, {ALIGN_CENTER} from 'yoga-layout/sync';
const node = Yoga.Node.create();
node.setAlignContent(ALIGN_CENTER);
yoga-layout
and yoga-layout/sync
try to pick between asmjs
and WebAssembly
automatically based on the target environment set by your bundler, but you can choose this explicitly as well.
import {loadYoga} from 'yoga-layout/wasm-async';
Note: the
yoga-layout
package requires your bundler and typechecker to configured to be able to follow the packageexports
field.
We are deprecating, YogaKit
and the YogaLayout
ViewGroup. These libraries allow initegrating Yoga directly with UIKit and the Android view system, but are not widely used by Meta in production. We are instead focusing on higher-level libraries using Yoga like Litho and React Native. Because we aren’t in a place to continue development, or validate contributions, we are discontinuing development. These libraries will not receive future updates beyond the Yoga release-v2.0
branch.
The functions to manipulate UseLegacyStretchBehaviour
have been deprecated. Previous users of the API should now set an appropriate errata level, like YGErrataAll
to opt-out of all future conformance fixes.
C# bindings were contributed to the Yoga repo but have since degraded. The bindings have not had working build validation, or a consistent contributor. We have removed them from the Yoga repo, but we will continue to provide a public C ABI for others to build bindings on top of.
Yoga’s header structure has historically allowed the inclusion of concrete internal structures like YGStyle
or YGNode
. We will begin to enforce that users instead rely on the public C APIs provided by #include <yoga/Yoga.h>
. Other C++ APIs may change without notice.
// Public API (GOOD)
#include <yoga/Yoga.h>
YGConfigRef config = YGConfigNew();
YGConfigSetPointScaleFactor(config, 1.0f);
// Private API (BAD)
#include <yoga/YGConfig.h>
YGConfig config{yogaLogger_};
config.pointScaleFactor = 1.0f;
Yoga now requires a compiler which supports C++ 14. This will likely be bumped to C++ 17 in a future minor release.
For users who don’t want to build from source, new Yoga packages have been published to the npmjs registry, Maven Central, and CocoaPods.
// package.json
dependencies: {
"yoga-layout": "^2.0.0"
}
// build.gradle
dependencies {
implementation("com.facebook.yoga:yoga:2.0.0")
}
# Podfile
pod 'Yoga', '~> 2.0.0'
Yoga 2.0 contains major external contributions from @intergalacticspacehighway, @jacobp100, @jeetiss and @nicoburns.
Published by passy over 3 years ago
Release for Maven Central.
Published by priteshrnandgaonkar almost 5 years ago
Published by priteshrnandgaonkar almost 5 years ago
Published by SidharthGuglani-zz about 5 years ago
Published by davidaurelio over 5 years ago
New stable with some bug fixes around align-content
Published by davidaurelio over 5 years ago
Fix YogaKit sample project
Published by davidaurelio over 5 years ago
Fixed YogaKit workspace
Published by SidharthGuglani-zz over 5 years ago
Published by davidaurelio over 5 years ago
Pre-release with exposed YGSetUsedCachedEntries
. This will go away again!
Published by SidharthGuglani-zz over 5 years ago
Published by priteshrnandgaonkar about 6 years ago
Published by priteshrnandgaonkar over 6 years ago
Release for sonar
Published by emilsjolander over 7 years ago
This release contains a bunch of big fixes:
Published by emilsjolander over 7 years ago
Big thanks to everyone who contributed to this release.
alignItems:center
. To use the legacy behaviour set useLegacyStretchBehaviour on a node's config object. https://github.com/facebook/yoga/commit/203577724ed65e426a39901ceb3e779c7eb5160b
flex-wrap
with max constraint. https://github.com/facebook/yoga/commit/3178e3bf15dac4f52bfc6943af94a061c9e160df
YogaNodeAPI
interface no longer exists. https://github.com/facebook/yoga/commit/1b3e9715495142b7500a02adf563243ad0d0b642
StyleAspectRatio
has been renamed AspectRatio
. https://github.com/facebook/yoga/commit/8891ea1a7a066e3121787a888e469aae44fa1b3f
YGLogger
has moved into YGConfig
so it is no longer global. It also passes along a node in cases where it makes sense so you have the ability to show errors based on a node's context. https://github.com/facebook/yoga/commit/91230ae177fdfa6b73cf8aa505e2d91e3bea062f
Published by emilsjolander over 7 years ago
Big thanks to @woehrl01 for all the fixes and performance improvements in this release.