From b3524f6250b92004ca6c1ccec1da4c1007c69376 Mon Sep 17 00:00:00 2001 From: supun_yasantha034 Date: Wed, 7 Oct 2026 10:08:29 +0530 Subject: [PATCH 1/2] docs: add percentage value support for gap and transform properties --- docs/flexbox.md | 2 +- docs/layout-props.md | 24 ++++++++++++------------ docs/transforms.md | 14 +++++++++++--- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/docs/flexbox.md b/docs/flexbox.md index 55ae3f1d481..f58ca873eba 100644 --- a/docs/flexbox.md +++ b/docs/flexbox.md @@ -2084,7 +2084,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/docs/layout-props.md b/docs/layout-props.md index 116f4a76b55..87379f1e5a1 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -544,13 +544,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -670,13 +670,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1294,13 +1294,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/docs/transforms.md b/docs/transforms.md index b5c1b65f756..a6a59d01d59 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- From 39be42fe21f21e0c5a5d03c23445a74531db8caa Mon Sep 17 00:00:00 2001 From: supun_yasantha034 Date: Wed, 7 Oct 2026 13:05:30 +0530 Subject: [PATCH 2/2] docs: backport gap and transform percentage docs to versioned docs --- .../versioned_docs/version-0.77/flexbox.md | 2 +- .../version-0.77/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.77/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.78/flexbox.md | 2 +- .../version-0.78/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.78/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.79/flexbox.md | 2 +- .../version-0.79/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.79/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.80/flexbox.md | 2 +- .../version-0.80/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.80/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.81/flexbox.md | 2 +- .../version-0.81/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.81/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.82/flexbox.md | 2 +- .../version-0.82/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.82/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.83/flexbox.md | 2 +- .../version-0.83/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.83/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.84/flexbox.md | 2 +- .../version-0.84/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.84/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.85/flexbox.md | 2 +- .../version-0.85/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.85/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.86/flexbox.md | 2 +- .../version-0.86/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.86/transforms.md | 14 ++++++++--- .../versioned_docs/version-0.87/flexbox.md | 2 +- .../version-0.87/layout-props.md | 24 +++++++++---------- .../versioned_docs/version-0.87/transforms.md | 14 ++++++++--- 33 files changed, 264 insertions(+), 176 deletions(-) diff --git a/website/versioned_docs/version-0.77/flexbox.md b/website/versioned_docs/version-0.77/flexbox.md index 5ea0389197a..3edd82139e6 100644 --- a/website/versioned_docs/version-0.77/flexbox.md +++ b/website/versioned_docs/version-0.77/flexbox.md @@ -2080,7 +2080,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.77/layout-props.md b/website/versioned_docs/version-0.77/layout-props.md index b3673e0c849..ee00eb76257 100644 --- a/website/versioned_docs/version-0.77/layout-props.md +++ b/website/versioned_docs/version-0.77/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.77/transforms.md b/website/versioned_docs/version-0.77/transforms.md index d3ed78c59f7..5d9667ca10f 100644 --- a/website/versioned_docs/version-0.77/transforms.md +++ b/website/versioned_docs/version-0.77/transforms.md @@ -209,6 +209,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -260,9 +268,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.78/flexbox.md b/website/versioned_docs/version-0.78/flexbox.md index 039a7bdf60b..ee0a96e2510 100644 --- a/website/versioned_docs/version-0.78/flexbox.md +++ b/website/versioned_docs/version-0.78/flexbox.md @@ -2080,7 +2080,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.78/layout-props.md b/website/versioned_docs/version-0.78/layout-props.md index b3673e0c849..ee00eb76257 100644 --- a/website/versioned_docs/version-0.78/layout-props.md +++ b/website/versioned_docs/version-0.78/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.78/transforms.md b/website/versioned_docs/version-0.78/transforms.md index d3ed78c59f7..5d9667ca10f 100644 --- a/website/versioned_docs/version-0.78/transforms.md +++ b/website/versioned_docs/version-0.78/transforms.md @@ -209,6 +209,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -260,9 +268,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.79/flexbox.md b/website/versioned_docs/version-0.79/flexbox.md index 039a7bdf60b..ee0a96e2510 100644 --- a/website/versioned_docs/version-0.79/flexbox.md +++ b/website/versioned_docs/version-0.79/flexbox.md @@ -2080,7 +2080,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.79/layout-props.md b/website/versioned_docs/version-0.79/layout-props.md index b3673e0c849..ee00eb76257 100644 --- a/website/versioned_docs/version-0.79/layout-props.md +++ b/website/versioned_docs/version-0.79/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.79/transforms.md b/website/versioned_docs/version-0.79/transforms.md index d3ed78c59f7..5d9667ca10f 100644 --- a/website/versioned_docs/version-0.79/transforms.md +++ b/website/versioned_docs/version-0.79/transforms.md @@ -209,6 +209,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -260,9 +268,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.80/flexbox.md b/website/versioned_docs/version-0.80/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.80/flexbox.md +++ b/website/versioned_docs/version-0.80/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.80/layout-props.md b/website/versioned_docs/version-0.80/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.80/layout-props.md +++ b/website/versioned_docs/version-0.80/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.80/transforms.md b/website/versioned_docs/version-0.80/transforms.md index d04f53227db..f91bc764134 100644 --- a/website/versioned_docs/version-0.80/transforms.md +++ b/website/versioned_docs/version-0.80/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.81/flexbox.md b/website/versioned_docs/version-0.81/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.81/flexbox.md +++ b/website/versioned_docs/version-0.81/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.81/layout-props.md b/website/versioned_docs/version-0.81/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.81/layout-props.md +++ b/website/versioned_docs/version-0.81/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.81/transforms.md b/website/versioned_docs/version-0.81/transforms.md index d04f53227db..f91bc764134 100644 --- a/website/versioned_docs/version-0.81/transforms.md +++ b/website/versioned_docs/version-0.81/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.82/flexbox.md b/website/versioned_docs/version-0.82/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.82/flexbox.md +++ b/website/versioned_docs/version-0.82/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.82/layout-props.md b/website/versioned_docs/version-0.82/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.82/layout-props.md +++ b/website/versioned_docs/version-0.82/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.82/transforms.md b/website/versioned_docs/version-0.82/transforms.md index d04f53227db..f91bc764134 100644 --- a/website/versioned_docs/version-0.82/transforms.md +++ b/website/versioned_docs/version-0.82/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.83/flexbox.md b/website/versioned_docs/version-0.83/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.83/flexbox.md +++ b/website/versioned_docs/version-0.83/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.83/layout-props.md b/website/versioned_docs/version-0.83/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.83/layout-props.md +++ b/website/versioned_docs/version-0.83/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.83/transforms.md b/website/versioned_docs/version-0.83/transforms.md index 003585bac39..59dbb1ebe40 100644 --- a/website/versioned_docs/version-0.83/transforms.md +++ b/website/versioned_docs/version-0.83/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.84/flexbox.md b/website/versioned_docs/version-0.84/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.84/flexbox.md +++ b/website/versioned_docs/version-0.84/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.84/layout-props.md b/website/versioned_docs/version-0.84/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.84/layout-props.md +++ b/website/versioned_docs/version-0.84/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.84/transforms.md b/website/versioned_docs/version-0.84/transforms.md index 003585bac39..59dbb1ebe40 100644 --- a/website/versioned_docs/version-0.84/transforms.md +++ b/website/versioned_docs/version-0.84/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.85/flexbox.md b/website/versioned_docs/version-0.85/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.85/flexbox.md +++ b/website/versioned_docs/version-0.85/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.85/layout-props.md b/website/versioned_docs/version-0.85/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.85/layout-props.md +++ b/website/versioned_docs/version-0.85/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.85/transforms.md b/website/versioned_docs/version-0.85/transforms.md index 003585bac39..59dbb1ebe40 100644 --- a/website/versioned_docs/version-0.85/transforms.md +++ b/website/versioned_docs/version-0.85/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.86/flexbox.md b/website/versioned_docs/version-0.86/flexbox.md index b745c9684ef..3eb34d0dbe7 100644 --- a/website/versioned_docs/version-0.86/flexbox.md +++ b/website/versioned_docs/version-0.86/flexbox.md @@ -2079,7 +2079,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.86/layout-props.md b/website/versioned_docs/version-0.86/layout-props.md index 0d10649d7d6..8a0fe44fb31 100644 --- a/website/versioned_docs/version-0.86/layout-props.md +++ b/website/versioned_docs/version-0.86/layout-props.md @@ -545,13 +545,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -671,13 +671,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1295,13 +1295,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.86/transforms.md b/website/versioned_docs/version-0.86/transforms.md index 003585bac39..59dbb1ebe40 100644 --- a/website/versioned_docs/version-0.86/transforms.md +++ b/website/versioned_docs/version-0.86/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | --- diff --git a/website/versioned_docs/version-0.87/flexbox.md b/website/versioned_docs/version-0.87/flexbox.md index 55ae3f1d481..f58ca873eba 100644 --- a/website/versioned_docs/version-0.87/flexbox.md +++ b/website/versioned_docs/version-0.87/flexbox.md @@ -2084,7 +2084,7 @@ export default App; - [`gap`](layout-props#gap) sets the size of the gap (gutter) between rows and columns. It is a shorthand for `rowGap` and `columnGap`. -You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. +You can use `flexWrap` and `alignContent` along with `gap` to add consistent spacing between items. Gap properties accept numeric values (in points) or percentage strings (e.g. `'10%'` on the [New Architecture](/architecture/landing-page)). diff --git a/website/versioned_docs/version-0.87/layout-props.md b/website/versioned_docs/version-0.87/layout-props.md index 116f4a76b55..87379f1e5a1 100644 --- a/website/versioned_docs/version-0.87/layout-props.md +++ b/website/versioned_docs/version-0.87/layout-props.md @@ -544,13 +544,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. +`columnGap` works like `column-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -670,13 +670,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wr ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. +`gap` works like `gap` in CSS. It is a shorthand for `rowGap` and `columnGap`. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -1294,13 +1294,13 @@ See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. +`rowGap` works like `row-gap` in CSS. It accepts numbers (in points) or percentage strings (e.g. `'10%'`). Percentage values are supported on the [New Architecture](/architecture/landing-page). See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. -| Type | Required | -| ------ | -------- | -| number | No | +| Type | Required | +| -------------- | -------- | +| number, string | No | --- diff --git a/website/versioned_docs/version-0.87/transforms.md b/website/versioned_docs/version-0.87/transforms.md index b5c1b65f756..a6a59d01d59 100644 --- a/website/versioned_docs/version-0.87/transforms.md +++ b/website/versioned_docs/version-0.87/transforms.md @@ -208,6 +208,14 @@ The skew transformations require a string so that the transform may be expressed } ``` +The translate transformations (`translateX` and `translateY`) accept numbers (points) or percentage strings (e.g. `'50%'`, `'100%'`). When using percentages, the offset is relative to the element's width (for `translateX`) or height (for `translateY`). Percentage translation is supported on the [New Architecture](/architecture/landing-page). For example: + +```js +{ + transform: [{translateX: '50%'}, {translateY: 100}], +} +``` + ### Matrix Transform The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation. @@ -259,9 +267,9 @@ For example, to apply a combination of scale and skew: Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable. ::: -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No | +| Type | Required | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number \| string}`, `{translateY: number \| string}`, `{skewX: string}`, `{skewY: string}` or string | No | ---