Skip to content

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

Open
@necolas

Description

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

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    ☂️ UmbrellaTo label issues that serve as coordination point and drivers for tasks in the react-native repoAPI: StyleSheetHelp Wanted :octocat:Issues ideal for external contributors.Needs TypeScript UpdatePlatform: AllAn issue that impacts all the platforms

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions