Add support for Web styles to components
This is the umbrella issue for basic React DOM / Web style additions to React Native components, as described in this proposal: "RFC: Reduce fragmentation across platforms".
Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new style property should take priority over any existing equivalents.
Styles
Basic extensions (All available in React Native 0.71)
Examples:
<View
style={{
aspectRatio: '16 / 9',
transform: 'scaleX(2) translateX(20px)'
}}
>
<Text
style={{
fontVariant: 'small-caps common-ligatures',
fontWeight: 900
}}
>
Equivalents
Available in React Native 0.71
Available in React Native 0.72
- Add CSS Logical Properties
Outstanding (version to be determined)
Examples:
<View
style={{
pointerEvents: 'none'
}}
>
<Text
style={{
userSelect: 'none',
verticalAlign: 'middle'
}}
>
<Image
style={{
objectFit: 'cover'
}}
>
New features
Available in React Native 0.71
<View
style={{
boxShadow: '1px 1px 1px 1px #eee',
backgroundColor: 'hsla(50,50,50,0.5)',
backgroundImage: 'url(https://image.png)',
pointerEvents: 'none',
transform: 'scale(0.9)',
width: '5rem'
}}
>
<Text
style={{
textShadow: '1px 1px 1px #eee',
userSelect: 'none',
verticalAlign: 'middle'
}}
>
<Image
style={{
objectFit: 'cover'
}}
>
Add support for Web styles to components
This is the umbrella issue for basic React DOM / Web style additions to React Native components, as described in this proposal: "RFC: Reduce fragmentation across platforms".
Each of the tasks listed below can be tackled with individual PRs that link back to this issue. Not every task has a known solution or implementation yet, so feel free to discuss implementation details in the comments. Each new style property should take priority over any existing equivalents.
Styles
Basic extensions (All available in React Native 0.71)
aspectRatiosupport for string values, i.e.,'16 / 9', to align with CSS. feat: Add string support for aspectRatio #34629fontVariantsupport for space-separated string values, i.e.,'small-caps common-ligatures'.fontWeightsupport for number values, i.e.,900. Feat/fontweight number value #34598transformsupport for string values, i.e.,'scaleX(2) translateX(20px)'. feat: Add string support to the transform property #34660 (review)Examples:
Equivalents
Available in React Native 0.71
direction.objectFit. Partial equivalent to theresizeModestyle and prop of<Image>. feat: Adding support for objectFit a partial equivalent to the resizeMode style and prop of <Image>. #34576objectFit === 'contain'toresizeMode = 'contain'.objectFit === 'cover'toresizeMode = 'cover'objectFit === 'fill'toresizeMode = 'stretch'objectFit === 'scale-down'toresizeMode = 'contain'objectFitvalue of'none'.pointerEvents. Equivalent to thepointerEventsprop of<View>. feat: Added pointerEvents style equivalent to pointerEvents prop #34586box-noneandbox-onlyvalues.userSelect. Equivalent to usingselectableprop on<Text>. feat: add userSelect style equivalent to selectable #34575verticalAlign. feat: Add support for verticalAlign style #34567verticalAligntotextAlignVertical.verticalAlign === 'middle'totextAlignVertical = 'center';Available in React Native 0.72
borderEndEndRadiusis equivalent toborderBottomEndRadius.borderEndStartRadiusis equivalent toborderBottomStartRadius.borderStartEndRadiusis equivalent toborderTopEndRadius.borderStartStartRadiusis equivalent toborderTopStartRadius.marginInlineStarttomarginStart.marginInlineEndtomarginEnd.marginBlockStarttomarginTop.marginBlockEndtomarginBottom.marginBlocktomarginVertical.marginInlinetomarginHorizontal.paddingInlineStarttopaddingStart.paddingInlineEndtopaddingEnd.paddingBlockStarttopaddingTop.paddingBlockEndtopaddingBottom.paddingBlocktopaddingVertical.paddingInlinetopaddingHorizontal.insetis equivalent totop&bottom&right&left.insetBlockis equivalent totop&bottom.insetBlockEndis equivalent tobottom.insetBlockStartis equivalent totop.insetInlineis equivalent toright&left.insetInlineEndis equivalent torightorleft.insetInlineStartis equivalent torightorleft.borderBlockColoris equivalent toborderTopColor&borderBottomColor.borderBlockEndColoris equivalent toborderBottomColor.borderBlockStartColoris equivalent toborderTopColor.Outstanding (version to be determined)
borderStylevalue of'none'.transformOriginfeat: transform-origin #37606borderInlineColoris equivalent toborderEndColor&borderStartColor.borderInlineEndColoris equivalent toborderEndColor.borderInlineStartColoris equivalent toborderStartColor.borderBlockStyleis equivalent toborderTopStyle&borderBottomStyle.borderBlockEndStyleis equivalent toborderBottomStyle.borderBlockStartStyleis equivalent toborderTopStyle.borderInlineStyleis equivalent toborderEndStyle&borderStartStyle.borderInlineEndStyleis equivalent toborderEndStyle.borderInlineStartStyleis equivalent toborderStartStyle.borderBlockWidthis equivalent toborderTopWidth&borderBottomWidth.borderBlockEndWidthis equivalent toborderBottomWidth.borderBlockStartWidthis equivalent toborderTopWidth.borderInlineWidthis equivalent toborderEndWidth&borderStartWidth.borderInlineEndWidthis equivalent toborderEndWidth.borderInlineStartWidthis equivalent toborderStartWidth.Examples:
New features
Available in React Native 0.71
hsla(). Potentially via Colorjs.io. feat: Add expanded support for CSS Colors #34600gap. Add support for gap, column-gap, and row-gap yoga#1116