[w3c] ☂️ Web Styles (Part 1) umbrella issue

[necolas]

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'.
  • feat: Add space-separated string support for fontVariant #34641
  • Support font-variant-ligatures values #36740
• 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 the resizeMode 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' to resizeMode = 'contain'.
  • Map objectFit === 'cover' to resizeMode = 'cover'
  • Map objectFit === 'fill' to resizeMode = 'stretch'
  • Map objectFit === 'scale-down' to resizeMode = 'contain'
  • Support objectFit value of 'none'.
• Add pointerEvents. Equivalent to the pointerEvents prop of <View>. feat: Added pointerEvents style equivalent to pointerEvents prop #34586
  • Retain the React Native specific box-none and box-only values.
• Add userSelect. Equivalent to using selectable prop on <Text>. feat: add userSelect style equivalent to selectable #34575
• Add verticalAlign. feat: Add support for verticalAlign style #34567
  • Map verticalAlign to textAlignVertical.
  • Map verticalAlign === 'middle' to textAlignVertical = 'center';

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 to borderBottomEndRadius.
    • borderEndStartRadius is equivalent to borderBottomStartRadius.
    • borderStartEndRadius is equivalent to borderTopEndRadius.
    • borderStartStartRadius is equivalent to borderTopStartRadius.
  • Logical margin (Fabric-only)
    • Map marginInlineStart to marginStart.
    • Map marginInlineEnd to marginEnd.
    • Map marginBlockStart to marginTop.
    • Map marginBlockEnd to marginBottom.
    • Map marginBlock to marginVertical.
    • Map marginInline to marginHorizontal.
  • Logical padding (Fabric-only)
    • Map paddingInlineStart to paddingStart.
    • Map paddingInlineEnd to paddingEnd.
    • Map paddingBlockStart to paddingTop.
    • Map paddingBlockEnd to paddingBottom.
    • Map paddingBlock to paddingVertical.
    • Map paddingInline to paddingHorizontal.
  • Logical insets (Fabric-only) 9669c10
    • inset is equivalent to top & bottom & right & left.
    • insetBlock is equivalent to top & bottom.
    • insetBlockEnd is equivalent to bottom.
    • insetBlockStart is equivalent to top.
    • insetInline is equivalent to right & left.
    • insetInlineEnd is equivalent to right or left.
    • insetInlineStart is equivalent to right or left.
  • feat: Add logical border block color properties  #35999
  • borderBlockColor is equivalent to borderTopColor & borderBottomColor.
  • borderBlockEndColor is equivalent to borderBottomColor.
  • borderBlockStartColor is equivalent to borderTopColor.

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 to borderEndColor & borderStartColor.
  • borderInlineEndColor is equivalent to borderEndColor.
  • borderInlineStartColor is equivalent to borderStartColor.
  • borderBlockStyle is equivalent to borderTopStyle & borderBottomStyle.
  • borderBlockEndStyle is equivalent to borderBottomStyle.
  • borderBlockStartStyle is equivalent to borderTopStyle.
  • borderInlineStyle is equivalent to borderEndStyle & borderStartStyle.
  • borderInlineEndStyle is equivalent to borderEndStyle.
  • borderInlineStartStyle is equivalent to borderStartStyle.
  • borderBlockWidth is equivalent to borderTopWidth & borderBottomWidth.
  • borderBlockEndWidth is equivalent to borderBottomWidth.
  • borderBlockStartWidth is equivalent to borderTopWidth.
  • borderInlineWidth is equivalent to borderEndWidth & borderStartWidth.
  • borderInlineEndWidth is equivalent to borderEndWidth.
  • borderInlineStartWidth is equivalent to borderStartWidth.

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'
  }}
>

[necolas]

See companion issue related to props #34424

[nandorojo]

Would flex gap apply here, or does that fall out of scope since it's still missing in Yoga?

From experience, the lack of gap support is one of the worst parts of styling on native vs. web. Shadows are up there too, but I use them less often.

It would be great to add objectPosition for images too.

[necolas]

Would flex gap apply here, or does that fall out of scope since it's still missing in Yoga?

Yes, that needs to be added to Yoga which is a whole other project.

It would be great to add objectPosition for images too.

Done.

[meftunca]

please support for 'transform-origin' and 'display:grid'

[burakgormek]

Percentage values for translate would be good. We already have this on web.
Not sure if it's related to yoga, like flex gap.

translateX(50%), translateY(100%)

[escaton]

Yes, that needs to be added to Yoga which is a whole other project.

already done, waiting for merge for 6 months

[gabrieldonadel]

• Add expanded support for CSS Colors, e.g., hsla(). Potentially via Colorjs.io.

Hi @necolas, which CSS Color Module Level do we wanna meet? React native already supports rgb(), rgba(), #rgb, #rrggbb, #rgba, #rrggbbaa, hsl(), hsla(), colors as int values (in RGB mode) and named colors, what else do we want to support? hwb()? lab()?

[necolas]

Level 4, as Colorjs.io does. Functions should also support space-separated values, not just comma separated.

[necolas]

I added a new section for improving cross-platform compatibility of Animated.

It should be relatively easy to make Animated a separate package that works on web for React Native for Web. This would allow developers to have the same version of Animated running and avoid me needing to update Animated at arbitrary points in time, which is also tedious and error prone, as I have to check for new sources of crashes and copy-paste-edit dozens of files that use different module syntaxes and internal import paths to RN public APIs, like StyleSheet.

[necolas]

already facebook/yoga#1116, waiting for merge for 6 months

The RN team had planned to move to a new layout engine, but probably not anymore. So since there is an existing PR and it has a chance of being merged soon, I'll add gap too.

[gedeagas]

HI @necolas i am taking this.

Add [objectFit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). Partial equivalent to the resizeMode style and prop of <Image>.
 Map objectFit === 'contain' to resizeMode = 'contain'.
 Map objectFit === 'cover' to resizeMode = 'cover'
 Map objectFit === 'fill' to resizeMode = 'stretch'
 Map objectFit === 'scale-down' to resizeMode = 'contain'

Updates:
PR Here #34576

[efoken]

What about marginBlock for marginVertical and marginInline for marginHorizontal? And of course same for padding

[efoken]

Ah and also I wanted to note, that lineHeight currently only supports pixel values. What about adding support for values like 1.5 as a multiplier of the current font-size?

[necolas]

What about adding support for values like 1.5 as a multiplier of the current font-size?

That would be great. Unfortunately, it would that be a breaking change since RN currently treats unitless line-height as pixels. So first we'd probably need something like a codemod to change all existing lineHeight values from e.g. 14 to '14px', and then eventually re-introduce unitless value support as a multipler.

[necolas]

We'll close this issue once the last aliases for logical border properties are implemented. Thanks!

[necolas]

There's a bug in Animated when using the string syntax for transforms. The string syntax needs to be converted back to an array of objects for AnimatedTransform to work properly.

Edit: nvm, someone was stringifying an animated object instead of updating their string interpolation code

[Pranav-yadav]

There's a bug in Animated when using the string syntax for transforms. The string syntax needs to be converted back to an array of objects for AnimatedTransform to work properly.

@necolas
Should a similar approach as in necolas/react-native-web@ed83baa fix this issue in react-native?

Also, haven't looked at it though seems like the new AnimatedObject #36935 also doesn't take care of this.

[nandorojo]

Could we add position: sticky here as well?