diff --git a/website/blog/2024-06-24-announcing-yoga-3.1.md b/website/blog/2024-06-24-announcing-yoga-3.1.md new file mode 100644 index 00000000..9bb3e83b --- /dev/null +++ b/website/blog/2024-06-24-announcing-yoga-3.1.md @@ -0,0 +1,67 @@ +--- +slug: announcing-yoga-3.1 +title: Announcing Yoga 3.1 +authors: + - NickGerleman +--- + +import Playground from '@site/src/components/Playground'; + +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](https://github.com/facebook/yoga/commit/cd4a1b8cf63cf09a62d6aefcd16843cc8869488c) 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. + +::: + + + + + + + +`} /> + + + +## Alignment changes to overflowed containers + +Yoga has made [several](https://github.com/facebook/yoga/commit/932361cdbf5864a2e6929b68154b4ada2ac586d9) [fixes](https://github.com/facebook/yoga/commit/6f10656868c2eca9b2eae55ad754e01e70565f69) 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. + + + + + +`} /> + + +## 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](https://github.com/facebook/yoga/issues/1657)), and start/end resolution when physical edge styles are also present ([#1658](https://github.com/facebook/yoga/issues/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.