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

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

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)

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

See companion issue related to props #34424

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.

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.

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

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%)

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

already done, waiting for merge for 6 months

@necolas

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()?

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

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.

already react/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.

Add web compat unit tests and fixes (#35316)

~~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

@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.

@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.

Merge latest upstream RN 0.71 changes (#1868)

Merge latest changes from RN 0.71.13 + a few cherry-picks (#1911)

Could we add position: sticky here as well?

feat(image): support for `resizeMode` and `objectFit` value of `'none…

Closing as completed

Navigation Menu

Repository navigation

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

Add support for Web styles to components

Styles

Basic extensions (All available in React Native 0.71)

Equivalents

Available in React Native 0.71

Available in React Native 0.72

Outstanding (version to be determined)

New features

Available in React Native 0.71

82 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Add support for Web styles to components

Styles

Basic extensions (All available in React Native 0.71)

Equivalents

Available in React Native 0.71

Available in React Native 0.72

Outstanding (version to be determined)

New features

Available in React Native 0.71

Activity

necolas commented on Aug 15, 2022

nandorojo commented on Aug 15, 2022

necolas commented on Aug 15, 2022

meftunca commented on Aug 15, 2022

burakgormek commented on Aug 15, 2022

escaton commented on Aug 15, 2022

gabrieldonadel commented on Aug 21, 2022

necolas commented on Aug 22, 2022

necolas commented on Aug 29, 2022

necolas commented on Aug 31, 2022

82 remaining items

necolas commented on Jun 27, 2023

Pranav-yadav commented on Jun 27, 2023

nandorojo commented on Feb 7, 2024

necolas commented on Jun 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions