1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4363],{2405:function(e,n,o){o.r(n),o.d(n,{assets:function(){return d},contentTitle:function(){return c},default:function(){return h},frontMatter:function(){return r},metadata:function(){return i},toc:function(){return l}});var i=o(4654),a=o(2540),t=o(3023),s=o(7266);const r={slug:"announcing-yoga-3.1",title:"Announcing Yoga 3.1",authors:["NickGerleman"]},c=void 0,d={authorsImageUrls:[void 0]},l=[{value:"Highlights",id:"highlights",level:2},{value:"Percentage support for <code>gap</code> properties",id:"percentage-support-for-gap-properties",level:2},{value:"Alignment changes to overflowed containers",id:"alignment-changes-to-overflowed-containers",level:2},{value:"Fixes for regressions in Yoga 3.0",id:"fixes-for-regressions-in-yoga-30",level:2},{value:"Additional JavaScript bindings",id:"additional-javascript-bindings",level:2}];function g(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Yoga 3.1 is a new minor version of Yoga, used by React Native 0.75."}),"\n",(0,a.jsx)(n.h2,{id:"highlights",children:"Highlights"}),"\n",(0,a.jsxs)(n.ol,{children:["\n",(0,a.jsxs)(n.li,{children:["Percentage support for ",(0,a.jsx)(n.code,{children:"gap"})," properties"]}),"\n",(0,a.jsx)(n.li,{children:"Layout conformance and regression fixes"}),"\n",(0,a.jsx)(n.li,{children:"Additional JavaScript bindings"}),"\n"]}),"\n",(0,a.jsxs)(n.h2,{id:"percentage-support-for-gap-properties",children:["Percentage support for ",(0,a.jsx)(n.code,{children:"gap"})," properties"]}),"\n",(0,a.jsxs)(n.p,{children:["Yoga ",(0,a.jsx)(n.a,{href:"https://github.com/facebook/yoga/commit/cd4a1b8cf63cf09a62d6aefcd16843cc8869488c",children:"now supports"})," gap values specified as percentages instead of points."]}),"\n",(0,a.jsx)(n.admonition,{type:"warning",children:(0,a.jsx)(n.p,{children:"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."})}),"\n",(0,a.jsx)(s.A,{code:'<Layout config={{useWebDefaults: true}}>\n<Node\n style={{\n columnGap: "10%",\n width: 200,\n height: 100,\n }}>\n <Node style={{flexGrow: 1}} />\n <Node style={{flexGrow: 1}} />\n <Node style={{flexGrow: 1}} />\n</Node>\n</Layout>'}),"\n",(0,a.jsx)(n.h2,{id:"alignment-changes-to-overflowed-containers",children:"Alignment changes to overflowed containers"}),"\n",(0,a.jsxs)(n.p,{children:["Yoga has made ",(0,a.jsx)(n.a,{href:"https://github.com/facebook/yoga/commit/932361cdbf5864a2e6929b68154b4ada2ac586d9",children:"several"})," ",(0,a.jsx)(n.a,{href:"https://github.com/facebook/yoga/commit/6f10656868c2eca9b2eae55ad754e01e70565f69",children:"fixes"})," to how flex-children of overflowed containers are aligned when using ",(0,a.jsx)(n.code,{children:"justify-content"}),", ",(0,a.jsx)(n.code,{children:"align-content"}),", or ",(0,a.jsx)(n.code,{children:'margin: "auto"'}),". This includes some cases where adding an alignment keyword could cause items to overlap, or padding to be removed."]}),"\n",(0,a.jsx)(s.A,{code:"<Layout config={{useWebDefaults: false}}>\n<Node\n style={{\n width: 100,\n height: 100,\n padding: 10,\n justifyContent: 'space-evenly',\n }}\n>\n <Node style={{height: 100, width: 100}} />\n</Node>\n</Layout>"}),"\n",(0,a.jsx)(n.h2,{id:"fixes-for-regressions-in-yoga-30",children:"Fixes for regressions in Yoga 3.0"}),"\n",(0,a.jsxs)(n.p,{children:["We fixed a couple of regressions added in Yoga 3.0, around percentage insets applied to some absolute containers (",(0,a.jsx)(n.a,{href:"https://github.com/facebook/yoga/issues/1657",children:"#1657"}),"), and start/end resolution when physical edge styles are also present (",(0,a.jsx)(n.a,{href:"https://github.com/facebook/yoga/issues/1658",children:"#1658"}),")."]}),"\n",(0,a.jsx)(n.h2,{id:"additional-javascript-bindings",children:"Additional JavaScript bindings"}),"\n",(0,a.jsxs)(n.p,{children:["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 ",(0,a.jsx)(n.code,{children:"hasNewLayout"})," flag manipulation, and an entrypoint for users who are unable to use top-level await."]})]})}function h(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(g,{...e})}):g(e)}},4654:function(e){e.exports=JSON.parse('{"permalink":"/blog/announcing-yoga-3.1","editUrl":"https://github.com/facebook/yoga/tree/main/website/blog/2024-06-24-announcing-yoga-3.1.md","source":"@site/blog/2024-06-24-announcing-yoga-3.1.md","title":"Announcing Yoga 3.1","de
1scription":"Yoga 3.1 is a new minor version of Yoga, used by React Native 0.75.","date":"2024-06-24T00:00:00.000Z","tags":[],"readingTime":1.31,"hasTruncateMarker":false,"authors":[{"name":"Nick Gerleman","title":"Yoga Maintainer","url":"https://github.com/NickGerleman","imageURL":"https://github.com/NickGerleman.png","key":"NickGerleman","page":null}],"frontMatter":{"slug":"announcing-yoga-3.1","title":"Announcing Yoga 3.1","authors":["NickGerleman"]},"unlisted":false,"prevItem":{"title":"Announcing Yoga 3.2","permalink":"/blog/announcing-yoga-3.2"},"nextItem":{"title":"Announcing Yoga 3.0","permalink":"/blog/announcing-yoga-3.0"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.