Open
Description
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)
-
aspectRatio
support for string values, i.e.,'16 / 9'
, to align with CSS. feat: Add string support for aspectRatio #34629 -
fontVariant
support for space-separated string values, i.e.,'small-caps common-ligatures'
. -
fontWeight
support for number values, i.e.,900
. Feat/fontweight number value #34598 -
transform
support for string values, i.e.,'scaleX(2) translateX(20px)'
. feat: Add string support to the transform property #34660 (review)
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
-
direction
. - Add
objectFit
. Partial equivalent to theresizeMode
style and prop of<Image>
. feat: Adding support for objectFit a partial equivalent to the resizeMode style and prop of <Image>. #34576- Map
objectFit === 'contain'
toresizeMode = 'contain'
. - Map
objectFit === 'cover'
toresizeMode = 'cover'
- Map
objectFit === 'fill'
toresizeMode = 'stretch'
- Map
objectFit === 'scale-down'
toresizeMode = 'contain'
- Support
objectFit
value of'none'
.
- Map
- Add
pointerEvents
. Equivalent to thepointerEvents
prop of<View>
. feat: Added pointerEvents style equivalent to pointerEvents prop #34586- Retain the React Native specific
box-none
andbox-only
values.
- Retain the React Native specific
- Add
userSelect
. Equivalent to usingselectable
prop on<Text>
. feat: add userSelect style equivalent to selectable #34575 - Add
verticalAlign
. feat: Add support for verticalAlign style #34567- Map
verticalAlign
totextAlignVertical
. - Map
verticalAlign === 'middle'
totextAlignVertical = 'center'
;
- Map
Available in React Native 0.72
- Add CSS Logical Properties
- Logical Border Radius
- Add Fabric implementation of flow-relative padding and margin #35342
- feat: Add logical border radius implementation #35572
-
borderEndEndRadius
is equivalent toborderBottomEndRadius
. -
borderEndStartRadius
is equivalent toborderBottomStartRadius
. -
borderStartEndRadius
is equivalent toborderTopEndRadius
. -
borderStartStartRadius
is equivalent toborderTopStartRadius
.
- Logical margin (Fabric-only)
- Map
marginInlineStart
tomarginStart
.
- Map
marginInlineEnd
tomarginEnd
. - Map
marginBlockStart
tomarginTop
. - Map
marginBlockEnd
tomarginBottom
. - Map
marginBlock
tomarginVertical
. - Map
marginInline
tomarginHorizontal
.
- Map
- Logical padding (Fabric-only)
- Map
paddingInlineStart
topaddingStart
. - Map
paddingInlineEnd
topaddingEnd
. - Map
paddingBlockStart
topaddingTop
. - Map
paddingBlockEnd
topaddingBottom
. - Map
paddingBlock
topaddingVertical
. - Map
paddingInline
topaddingHorizontal
.
- Map
- Logical insets (Fabric-only) 9669c10
-
inset
is equivalent totop
&bottom
&right
&left
. -
insetBlock
is equivalent totop
&bottom
. -
insetBlockEnd
is equivalent tobottom
. -
insetBlockStart
is equivalent totop
. -
insetInline
is equivalent toright
&left
. -
insetInlineEnd
is equivalent toright
orleft
. -
insetInlineStart
is equivalent toright
orleft
.
-
- feat: Add logical border block color properties #35999
-
borderBlockColor
is equivalent toborderTopColor
&borderBottomColor
. -
borderBlockEndColor
is equivalent toborderBottomColor
. -
borderBlockStartColor
is equivalent toborderTopColor
.
- Logical Border Radius
Outstanding (version to be determined)
-
borderStyle
value of'none'
. -
transformOrigin
feat: transform-origin #37606 - Add CSS Logical Properties.
- feat: Add logical border inline color properties #36046
- feat: Add Android Paper implementation of inset logical properties #36242
-
borderInlineColor
is equivalent toborderEndColor
&borderStartColor
. -
borderInlineEndColor
is equivalent toborderEndColor
. -
borderInlineStartColor
is equivalent toborderStartColor
. -
borderBlockStyle
is equivalent toborderTopStyle
&borderBottomStyle
. -
borderBlockEndStyle
is equivalent toborderBottomStyle
. -
borderBlockStartStyle
is equivalent toborderTopStyle
. -
borderInlineStyle
is equivalent toborderEndStyle
&borderStartStyle
. -
borderInlineEndStyle
is equivalent toborderEndStyle
. -
borderInlineStartStyle
is equivalent toborderStartStyle
. -
borderBlockWidth
is equivalent toborderTopWidth
&borderBottomWidth
. -
borderBlockEndWidth
is equivalent toborderBottomWidth
. -
borderBlockStartWidth
is equivalent toborderTopWidth
. -
borderInlineWidth
is equivalent toborderEndWidth
&borderStartWidth
. -
borderInlineEndWidth
is equivalent toborderEndWidth
. -
borderInlineStartWidth
is equivalent toborderStartWidth
.
Examples:
<View
style={{
pointerEvents: 'none'
}}
>
<Text
style={{
userSelect: 'none',
verticalAlign: 'middle'
}}
>
<Image
style={{
objectFit: 'cover'
}}
>
New features
Available in React Native 0.71
- Add expanded support for CSS Colors, e.g.,
hsla()
. Potentially via Colorjs.io. feat: Add expanded support for CSS Colors #34600 - Add
gap
. Add support for gap, column-gap, and row-gap yoga#1116
<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'
}}
>