-
Notifications
You must be signed in to change notification settings - Fork 24.9k
Closed
Labels
☂️ UmbrellaTo label issues that serve as coordination point and drivers for tasks in the react-native repoTo label issues that serve as coordination point and drivers for tasks in the react-native repoAPI: StyleSheetHelp Wanted
Issues ideal for external contributors.Issues ideal for external contributors.Needs TypeScript UpdatePlatform: AllAn issue that impacts all the platformsAn issue that impacts all the platforms
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)
-
aspectRatiosupport for string values, i.e.,'16 / 9', to align with CSS. feat: Add string support for aspectRatio #34629 -
fontVariantsupport for space-separated string values, i.e.,'small-caps common-ligatures'. -
fontWeightsupport for number values, i.e.,900. Feat/fontweight number value #34598 -
transformsupport 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 theresizeModestyle 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
objectFitvalue of'none'.
- Map
- Add
pointerEvents. Equivalent to thepointerEventsprop of<View>. feat: Added pointerEvents style equivalent to pointerEvents prop #34586- Retain the React Native specific
box-noneandbox-onlyvalues.
- Retain the React Native specific
- Add
userSelect. Equivalent to usingselectableprop on<Text>. feat: add userSelect style equivalent to selectable #34575 - Add
verticalAlign. feat: Add support for verticalAlign style #34567- Map
verticalAligntotextAlignVertical. - 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
-
borderEndEndRadiusis equivalent toborderBottomEndRadius. -
borderEndStartRadiusis equivalent toborderBottomStartRadius. -
borderStartEndRadiusis equivalent toborderTopEndRadius. -
borderStartStartRadiusis equivalent toborderTopStartRadius.
- Logical margin (Fabric-only)
- Map
marginInlineStarttomarginStart.
- Map
marginInlineEndtomarginEnd. - Map
marginBlockStarttomarginTop. - Map
marginBlockEndtomarginBottom. - Map
marginBlocktomarginVertical. - Map
marginInlinetomarginHorizontal.
- Map
- Logical padding (Fabric-only)
- Map
paddingInlineStarttopaddingStart. - Map
paddingInlineEndtopaddingEnd. - Map
paddingBlockStarttopaddingTop. - Map
paddingBlockEndtopaddingBottom. - Map
paddingBlocktopaddingVertical. - Map
paddingInlinetopaddingHorizontal.
- Map
- Logical insets (Fabric-only) 9669c10
-
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.
-
- feat: Add logical border block color properties #35999
-
borderBlockColoris equivalent toborderTopColor&borderBottomColor. -
borderBlockEndColoris equivalent toborderBottomColor. -
borderBlockStartColoris equivalent toborderTopColor.
- Logical Border Radius
Outstanding (version to be determined)
-
borderStylevalue of'none'. -
transformOriginfeat: 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
-
borderInlineColoris 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:
<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'
}}
>nandorojo, intergalacticspacehighway, EvanBacon, alexlevy0, RickardZrinski and 35 morebyCedric, migueldaipre, michaelhettmer, RichiCoder1, gupta-ji6 and 9 moreEvanBacon, ahmetbicer, alexlevy0, marklawlor, ecreeth and 23 morealexlevy0, gabrieldonadel, byCedric, migueldaipre, RichiCoder1 and 11 more
Metadata
Metadata
Assignees
Labels
☂️ UmbrellaTo label issues that serve as coordination point and drivers for tasks in the react-native repoTo label issues that serve as coordination point and drivers for tasks in the react-native repoAPI: StyleSheetHelp Wanted
Issues ideal for external contributors.Issues ideal for external contributors.Needs TypeScript UpdatePlatform: AllAn issue that impacts all the platformsAn issue that impacts all the platforms