From 02e004ea8e998cd68432240d847cdd7e635bb173 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 5 Jan 2026 14:46:23 +0100 Subject: [PATCH] add missign layout props, improve formatting/redability --- docs/layout-props.md | 416 ++++++++++++++--- .../version-0.77/layout-props.md | 420 +++++++++++++++--- .../version-0.78/layout-props.md | 420 +++++++++++++++--- .../version-0.79/layout-props.md | 420 +++++++++++++++--- .../version-0.80/layout-props.md | 420 +++++++++++++++--- .../version-0.81/layout-props.md | 420 +++++++++++++++--- .../version-0.82/layout-props.md | 416 ++++++++++++++--- .../version-0.83/layout-props.md | 416 ++++++++++++++--- 8 files changed, 2943 insertions(+), 405 deletions(-) diff --git a/docs/layout-props.md b/docs/layout-props.md index e19336f59a6..b3673e0c849 100644 --- a/docs/layout-props.md +++ b/docs/layout-props.md @@ -387,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -397,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -407,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -417,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -425,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -433,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -453,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -463,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -483,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -493,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -507,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -527,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -537,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -573,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -599,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -633,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -643,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -655,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -665,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -680,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -694,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -704,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -714,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -742,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -754,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -774,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -798,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -812,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -826,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -840,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -850,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -860,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -870,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -898,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -910,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -930,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -973,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -983,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1009,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1021,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1033,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.77/layout-props.md b/website/versioned_docs/version-0.77/layout-props.md index 114ff5da96a..b3673e0c849 100644 --- a/website/versioned_docs/version-0.77/layout-props.md +++ b/website/versioned_docs/version-0.77/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example @@ -385,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -395,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -405,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -415,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -423,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -431,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -451,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -461,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -481,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -491,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -505,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -525,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -535,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -571,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -597,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -631,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -641,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -653,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -663,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -678,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -692,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -702,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -712,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -740,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -752,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -772,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -796,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -810,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -824,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -838,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -848,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -858,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -868,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -896,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -908,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -928,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -971,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -981,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1007,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1019,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1031,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.78/layout-props.md b/website/versioned_docs/version-0.78/layout-props.md index 114ff5da96a..b3673e0c849 100644 --- a/website/versioned_docs/version-0.78/layout-props.md +++ b/website/versioned_docs/version-0.78/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example @@ -385,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -395,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -405,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -415,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -423,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -431,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -451,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -461,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -481,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -491,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -505,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -525,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -535,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -571,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -597,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -631,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -641,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -653,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -663,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -678,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -692,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -702,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -712,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -740,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -752,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -772,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -796,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -810,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -824,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -838,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -848,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -858,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -868,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -896,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -908,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -928,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -971,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -981,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1007,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1019,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1031,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.79/layout-props.md b/website/versioned_docs/version-0.79/layout-props.md index 114ff5da96a..b3673e0c849 100644 --- a/website/versioned_docs/version-0.79/layout-props.md +++ b/website/versioned_docs/version-0.79/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example @@ -385,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -395,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -405,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -415,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -423,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -431,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -451,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -461,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -481,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -491,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -505,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -525,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -535,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -571,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -597,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -631,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -641,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -653,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -663,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -678,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -692,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -702,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -712,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -740,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -752,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -772,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -796,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -810,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -824,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -838,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -848,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -858,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -868,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -896,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -908,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -928,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -971,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -981,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1007,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1019,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1031,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.80/layout-props.md b/website/versioned_docs/version-0.80/layout-props.md index 114ff5da96a..b3673e0c849 100644 --- a/website/versioned_docs/version-0.80/layout-props.md +++ b/website/versioned_docs/version-0.80/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example @@ -385,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -395,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -405,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -415,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -423,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -431,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -451,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -461,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -481,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -491,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -505,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -525,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -535,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -571,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -597,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -631,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -641,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -653,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -663,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -678,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -692,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -702,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -712,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -740,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -752,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -772,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -796,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -810,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -824,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -838,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -848,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -858,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -868,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -896,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -908,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -928,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -971,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -981,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1007,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1019,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1031,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.81/layout-props.md b/website/versioned_docs/version-0.81/layout-props.md index 114ff5da96a..b3673e0c849 100644 --- a/website/versioned_docs/version-0.81/layout-props.md +++ b/website/versioned_docs/version-0.81/layout-props.md @@ -5,7 +5,9 @@ title: Layout Props import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -> More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +:::info +More detailed examples about those properties can be found on the [Layout with Flexbox](flexbox) page. +::: ### Example @@ -385,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -395,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -405,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -415,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -423,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -431,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -451,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -461,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -481,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -491,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -505,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -525,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -535,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -571,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -597,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -631,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -641,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -653,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -663,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -678,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -692,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -702,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -712,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -740,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -752,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -772,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -796,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -810,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -824,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -838,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -848,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -858,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -868,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -896,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -908,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -928,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -971,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -981,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1007,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1019,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1031,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.82/layout-props.md b/website/versioned_docs/version-0.82/layout-props.md index e19336f59a6..b3673e0c849 100644 --- a/website/versioned_docs/version-0.82/layout-props.md +++ b/website/versioned_docs/version-0.82/layout-props.md @@ -387,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -397,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -407,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -417,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -425,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -433,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -453,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -463,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -483,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -493,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -507,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -527,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -537,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -573,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -599,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -633,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -643,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -655,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -665,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -680,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -694,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -704,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -714,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -742,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -754,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -774,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -798,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -812,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -826,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -840,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -850,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -860,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -870,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -898,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -910,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -930,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -973,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -983,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1009,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1021,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1033,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ---- diff --git a/website/versioned_docs/version-0.83/layout-props.md b/website/versioned_docs/version-0.83/layout-props.md index e19336f59a6..b3673e0c849 100644 --- a/website/versioned_docs/version-0.83/layout-props.md +++ b/website/versioned_docs/version-0.83/layout-props.md @@ -387,7 +387,9 @@ export default App; ### `alignContent` -`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. +`alignContent` controls how rows align in the cross direction, overriding the `alignContent` of the parent. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) for more details. | Type | Required | | ---------------------------------------------------------------------------------------------------- | -------- | @@ -397,7 +399,9 @@ export default App; ### `alignItems` -`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items for more details. +`alignItems` aligns children in the cross direction. For example, if children are flowing vertically, `alignItems` controls how they align horizontally. It works like `align-items` in CSS (default: stretch). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for more details. | Type | Required | | --------------------------------------------------------------- | -------- | @@ -407,7 +411,9 @@ export default App; ### `alignSelf` -`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self for more details. +`alignSelf` controls how a child aligns in the cross direction, overriding the `alignItems` of the parent. It works like `align-self` in CSS (default: auto). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) for more details. | Type | Required | | ----------------------------------------------------------------------- | -------- | @@ -417,7 +423,7 @@ export default App; ### `aspectRatio` -Aspect ratio controls the size of the undefined dimension of a node. See https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio for more details. +Aspect ratio controls the size of the undefined dimension of a node. - On a node with a set width/height, aspect ratio controls the size of the unset dimension - On a node with a set flex basis, aspect ratio controls the size of the node in the cross axis if unset @@ -425,6 +431,8 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ - On a node with flex grow/shrink, aspect ratio controls the size of the node in the cross axis if unset - Aspect ratio takes min/max dimensions into account +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for more details. + | Type | Required | | -------------- | -------- | | number, string | No | @@ -433,7 +441,9 @@ Aspect ratio controls the size of the undefined dimension of a node. See https:/ ### `borderBottomWidth` -`borderBottomWidth` works like `border-bottom-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width for more details. +`borderBottomWidth` works like `border-bottom-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width) for more details. | Type | Required | | ------ | -------- | @@ -453,7 +463,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderLeftWidth` -`borderLeftWidth` works like `border-left-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width for more details. +`borderLeftWidth` works like `border-left-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width) for more details. | Type | Required | | ------ | -------- | @@ -463,7 +475,9 @@ When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`. W ### `borderRightWidth` -`borderRightWidth` works like `border-right-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width for more details. +`borderRightWidth` works like `border-right-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width) for more details. | Type | Required | | ------ | -------- | @@ -483,7 +497,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderTopWidth` -`borderTopWidth` works like `border-top-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width for more details. +`borderTopWidth` works like `border-top-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width) for more details. | Type | Required | | ------ | -------- | @@ -493,7 +509,9 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. ### `borderWidth` -`borderWidth` works like `border-width` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width for more details. +`borderWidth` works like `border-width` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more details. | Type | Required | | ------ | -------- | @@ -507,7 +525,7 @@ When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`. It works similarly to `bottom` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how `bottom` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom) for more details of how `bottom` affects layout. | Type | Required | | -------------- | -------- | @@ -527,7 +545,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `columnGap` -`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap for more details. +`columnGap` works like `column-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more details. | Type | Required | | ------ | -------- | @@ -537,11 +557,13 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of ### `direction` -`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. See https://www.yogalayout.dev/docs/styling/layout-direction for more details. +`direction` specifies the directional flow of the user interface. The default is `inherit`, except for root node which will have value based on the current locale. + +See [MDN CSS Reference](https://www.yogalayout.dev/docs/styling/layout-direction) for more details. -| Type | Required | Platform | -| ----------------------------- | -------- | -------- | -| enum('inherit', 'ltr', 'rtl') | No | iOS | +| Type | Required | +| ----------------------------- | -------- | +| enum('inherit', 'ltr', 'rtl') | No | --- @@ -573,11 +595,11 @@ This style takes precedence over the `left` and `right` styles. In React Native `flex` does not work the same way that it does in CSS. `flex` is a number rather than a string, and it works according to the [Yoga](https://github.com/facebook/yoga) layout engine. -When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to 2 will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. +When `flex` is a positive number, it makes the component flexible, and it will be sized proportional to its flex value. So a component with `flex` set to `2` will take twice the space as a component with `flex` set to 1. `flex: ` equates to `flexGrow: , flexShrink: 1, flexBasis: 0`. -When `flex` is 0, the component is sized according to `width` and `height`, and it is inflexible. +When `flex` is `0`, the component is sized according to `width` and `height`, and it is inflexible. -When `flex` is -1, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. +When `flex` is `-1`, the component is normally sized according to `width` and `height`. However, if there's not enough space, the component will shrink to its `minWidth` and `minHeight`. `flexGrow`, `flexShrink`, and `flexBasis` work the same as in CSS. @@ -599,7 +621,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexDirection` -`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction for more details. +`flexDirection` controls which directions children of a container go. `row` goes left to right, `column` goes top to bottom, and you may be able to guess what the other two do. It works like `flex-direction` in CSS, except the default is `column`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) for more details. | Type | Required | | ------------------------------------------------------ | -------- | @@ -633,7 +657,11 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `flexWrap` -`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). +`flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). + +Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) for more details. | Type | Required | | -------------------------------------- | -------- | @@ -643,7 +671,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei ### `gap` -`gap` works like `gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details. +`gap` works like `gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for more details. | Type | Required | | ------ | -------- | @@ -655,7 +685,121 @@ When `flex` is -1, the component is normally sized according to `width` and `hei `height` sets the height of this component. -It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. +It works similarly to `height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/height) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `inset` + +:::note +`inset` is only available on the [New Architecture](/architecture/landing-page) +::: + +Setting `inset` has the same effect as setting each of `top`, `bottom`, `right` and `left` props. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/inset) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlock` + +:::note +`insetBlock` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top) and [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockEnd` + +:::note +`insetBlockEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`bottom`](layout-props#bottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetBlockStart` + +:::note +`insetBlockStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`top`](layout-props#top). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInline` + +:::note +`insetInline` is only available on the [New Architecture](/architecture/landing-page) +::: + +Equivalent to [`right`](layout-props#right) and [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineEnd` + +:::note +`insetInlineEnd` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineEnd` is equivalent to [`right`](layout-props#right). When direction is `rtl`, `insetInlineEnd` is equivalent to [`left`](layout-props#left). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `insetInlineStart` + +:::note +`insetInlineStart` is only available on the [New Architecture](/architecture/landing-page) +::: + +When direction is `ltr`, `insetInlineStart` is equivalent to [`left`](layout-props#left). When direction is `rtl`, `insetInlineStart` is equivalent to [`right`](layout-props#right). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start) for more details. | Type | Required | | -------------- | -------- | @@ -665,7 +809,11 @@ It works similarly to `height` in CSS, but in React Native you must use points o ### `isolation` -`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). This prop is only available on the [New Architecture](/architecture/landing-page). +:::note +`isolation` is only available on the [New Architecture](/architecture/landing-page) +::: + +`isolation` lets you form a [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context). There are two values: @@ -680,7 +828,9 @@ There are two values: ### `justifyContent` -`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content for more details. +`justifyContent` aligns children in the main direction. For example, if children are flowing vertically, `justifyContent` controls how they align vertically. It works like `justify-content` in CSS (default: flex-start). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for more details. | Type | Required | | ----------------------------------------------------------------------------------------- | -------- | @@ -694,7 +844,7 @@ There are two values: It works similarly to `left` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how `left` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/left) for more details of how `left` affects layout. | Type | Required | | -------------- | -------- | @@ -704,7 +854,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of ho ### `margin` -Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin for more details. +Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) for more details. | Type | Required | | -------------- | -------- | @@ -714,7 +866,43 @@ Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft ### `marginBottom` -`marginBottom` works like `margin-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom for more details. +`marginBottom` works like `margin-bottom` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlock` + +Equivalent to [`marginVertical`](layout-props#marginvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockEnd` + +Equivalent to [`marginBottom`](layout-props#marginbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginBlockStart` + +Equivalent to [`marginTop`](layout-props#margintop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -742,9 +930,45 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and --- +### `marginInline` + +Equivalent to [`marginHorizontal`](layout-props#marginhorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineEnd` + +When direction is `ltr`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginRight`). When direction is `rtl`, `marginInlineEnd` is equivalent to [`marginEnd`](layout-props#marginend) (i.e. `marginLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `marginInlineStart` + +When direction is `ltr`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginLeft`). When direction is `rtl`, `marginInlineStart` is equivalent to [`marginStart`](layout-props#marginstart) (i.e. `marginRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/margin-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `marginLeft` -`marginLeft` works like `margin-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left for more details. +`marginLeft` works like `margin-left` in CSS. See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) for more details. | Type | Required | | -------------- | -------- | @@ -754,7 +978,9 @@ Setting `marginHorizontal` has the same effect as setting both `marginLeft` and ### `marginRight` -`marginRight` works like `margin-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right for more details. +`marginRight` works like `margin-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) for more details. | Type | Required | | -------------- | -------- | @@ -774,7 +1000,9 @@ When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direc ### `marginTop` -`marginTop` works like `margin-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top for more details. +`marginTop` works like `margin-top` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) for more details. | Type | Required | | -------------- | -------- | @@ -798,7 +1026,7 @@ Setting `marginVertical` has the same effect as setting both `marginTop` and `ma It works similarly to `max-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) for more details. | Type | Required | | -------------- | -------- | @@ -812,7 +1040,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height for more details It works similarly to `max-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) for more details. | Type | Required | | -------------- | -------- | @@ -826,7 +1054,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width for more details. It works similarly to `min-height` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) for more details. | Type | Required | | -------------- | -------- | @@ -840,7 +1068,7 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height for more details It works similarly to `min-width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) for more details. | Type | Required | | -------------- | -------- | @@ -850,7 +1078,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `overflow` -`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). See https://developer.mozilla.org/en/docs/Web/CSS/overflow for more details. +`overflow` controls how children are measured and displayed. `overflow: hidden` causes views to be clipped while `overflow: scroll` causes views to be measured independently of their parents' main axis. It works like `overflow` in CSS (default: visible). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) for more details. | Type | Required | | ----------------------------------- | -------- | @@ -860,7 +1090,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width for more details. ### `padding` -Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding for more details. +Setting `padding` has the same effect as setting each of `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) for more details. | Type | Required | | -------------- | -------- | @@ -870,7 +1102,45 @@ Setting `padding` has the same effect as setting each of `paddingTop`, `paddingB ### `paddingBottom` -`paddingBottom` works like `padding-bottom` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom for more details. +`paddingBottom` works like `padding-bottom` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlock` + +Equivalent to [`paddingVertical`](layout-props#paddingvertical). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockEnd` + +Equivalent to [`paddingBottom`](layout-props#paddingbottom). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingBlockStart` + +Equivalent to [`paddingTop`](layout-props#paddingtop). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-block-start) for more details. | Type | Required | | -------------- | -------- | @@ -898,9 +1168,47 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi --- +### `paddingInline` + +Equivalent to [`paddingHorizontal`](layout-props#paddinghorizontal). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineEnd` + +When direction is `ltr`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingRight`). When direction is `rtl`, `paddingInlineEnd` is equivalent to [`paddingEnd`](layout-props#paddingend) (i.e. `paddingLeft`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-end) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + +### `paddingInlineStart` + +When direction is `ltr`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingLeft`). When direction is `rtl`, `paddingInlineStart` is equivalent to [`paddingStart`](layout-props#paddingstart) (i.e. `paddingRight`). + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding-inline-start) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | + +--- + ### `paddingLeft` -`paddingLeft` works like `padding-left` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left for more details. +`paddingLeft` works like `padding-left` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left) for more details. | Type | Required | | -------------- | -------- | @@ -910,7 +1218,9 @@ Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRi ### `paddingRight` -`paddingRight` works like `padding-right` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right for more details. +`paddingRight` works like `padding-right` in CSS. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right) for more details. | Type | Required | | -------------- | -------- | @@ -930,11 +1240,13 @@ When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When dir ### `paddingTop` -`paddingTop` works like `padding-top` in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details. +`paddingTop` works like `padding-top` in CSS. -| Type | Required | -| --------------- | -------- | -| number, ,string | No | +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) for more details. + +| Type | Required | +| -------------- | -------- | +| number, string | No | --- @@ -973,7 +1285,7 @@ For more information, see the [Layout with Flexbox docs](./flexbox.md#position). It works similarly to `right` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of how `right` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/right) for more details of how `right` affects layout. | Type | Required | | -------------- | -------- | @@ -983,7 +1295,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/right for more details of h ### `rowGap` -`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. See https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap for more details. +`rowGap` works like `row-gap` in CSS. Only pixel units are supported in React Native. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more details. | Type | Required | | ------ | -------- | @@ -1009,7 +1323,7 @@ This style takes precedence over the `left`, `right`, and `end` styles. It works similarly to `top` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. -See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `top` affects layout. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/top) for more details of how `top` affects layout. | Type | Required | | -------------- | -------- | @@ -1021,7 +1335,9 @@ See https://developer.mozilla.org/en-US/docs/Web/CSS/top for more details of how `width` sets the width of this component. -It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. +It works similarly to `width` in CSS, but in React Native you must use points or percentages. Ems and other units are not supported. + +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/width) for more details. | Type | Required | | -------------- | -------- | @@ -1033,12 +1349,12 @@ It works similarly to `width` in CSS, but in React Native you must use points or `zIndex` controls which components display on top of others. Normally, you don't use `zIndex`. Components render according to their order in the document tree, so later components draw over earlier ones. `zIndex` may be useful if you have animations or custom modal interfaces where you don't want this behavior. -It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details. +It works like the CSS `z-index` property - components with a larger `zIndex` will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. On iOS, `zIndex` may require `View`s to be siblings of each other for it to work as expected. +See [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details. + | Type | Required | | ------ | -------- | | number | No | - ----