Skip to content

Text component parity for Fabric #11143

Closed
Closed
Text component parity for Fabric#11143
Labels
API: CompletionArea: Component ViewsArea: FabricSupport Facebook FabricArea: TextDeliverableMajor item tracked for top-level planning in ADONew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricParity: Fabric vs. PaperRNW Fabric does not look or behave like RNW Paperenhancement
Milestone
Backlog
@jonthysell

Description

@jonthysell
jonthysell
opened on Jan 27, 2023

This task captures the work to reach parity between Paper and Fabric for the native code for the <Text> component.

ComponentView

  1. Create the ParagraphComponentView (PCV)
  2. Register the ComponentView in the ComponentViewRegistry

APIs

See latest spec at https://reactnative.dev/docs/text.

38/51

Text Props

API Platform RNW Paper RNW Fabric Notes
  • accessibilityHint
 FEVM, No CBCV+CDAP Fabric: #12036
  • accessibilityLanguage
 iOS No No?
  • accessibilityLabel
 FEVM, No CBCV+CDAP Fabric: #11674
  • accessibilityRole
 TVM+FEVM, No CDAP Fabric: #11412
  • accessibilityState
 FEVM, No CBCV+CDAP Fabric: Partial impl in #11674
  • accessibilityActions
 FEVM, No Pri 2
  • onAccessibilityAction
 VMB Pri 2
  • accessible
 FEVM, No CBCV+CDAP Fabric: #11719
  • adjustsFontSizeToFit
 No No?
  • allowFontScaling
 TVM, No Pri 1
  • android_hyphenationFrequency
 Android No No?
  • dataDetectorType
 Android No No?
  • disabled
 Android No No?
  • ellipsizeMode
 TVM, No Pri 1
  • maxFontSizeMultiplier
 No No?
  • minimumFontScale
 iOS No No?
  • nativeID
 No No?
  • numberOfLines
 TVM, No Pri 1
  • onLayout
 VMB Pri 1
  • onLongPress
 No No?
  • onMoveShouldSetResponder
 JS JS
  • onPress
 VMB Pri 1
  • onResponderGrant
 JS JS
  • onResponderMove
 JS JS
  • onResponderRelease
 JS JS
  • onResponderTerminate
 JS JS
  • onResponderTerminationRequest
 JS JS
  • onStartShouldSetResponderCapture
 JS JS
  • onTextLayout
 No No?
  • pressRetentionOffset
 No No?
  • selectable
 TVM, No Pri 1
  • selectionColor
 Android TVM, No No?
  • style
 See Below See Below Supports Text Style Props, View Style Props, Layout Props, Shadow Props
  • suppressHighlighting
 iOS No No?
  • testID
 FEVM, No CDAP Fabric: #11412
  • textBreakStrategy
 Android No No?
  • accessibilityPosInSet
 Windows FEVM, No Pri 2
  • accessibilitySetSize
 Windows FEVM, No Pri 2
  • keyDownEvents
 Windows VMB CBCV Fabric: #12146
  • keyUpEvents
 Windows VMB CBCV Fabric: #12146
  • onBlur
 Windows VMB Pri 1 Paper: Event is registered, but maybe never fired?
  • onFocus
 Windows VMB Pri 1 Paper: Event is registered, but maybe never fired?
  • onKeyDown
 Windows VMB CBCV+CEH Fabric: #12146
  • onKeyDownCapture
 Windows VMB Pri 1
  • onKeyUp
 Windows VMB CBCV+CEH Fabric: #12146
  • onKeyUpCapture
 Windows VMB Pri 1
  • onMouseEnter
 Windows VMB, VTVM+VMB CEH
  • onMouseLeave
 Windows VMB, VTVM+VMB CEH
  • pointerEvents
 Windows N/A PCV Fabric: This appears to be implemented though not a part of RN core?
  • tooltip
 Windows FEVM, No Pri 1

18/20

Text Style Props

API Platform RNW Paper RNW Fabric Notes
  • color
 TVM, VTVM PCV
  • fontFamily
 TVM, VTVM TLM
  • fontSize
 TVM, VTVM TLM
  • fontStyle
 TVM, VTVM TLM
  • fontWeight
 TVM, VTVM TLM
  • includeFontPadding
 Android No No?
  • fontVariant
 No No?
  • letterSpacing
 TVM, VTVM Pri 1
  • lineHeight
 TVM Pri 1
  • textAlign
 TVM PCV
  • textAlignVertical
 Android No No?
  • textDecorationColor
 iOS No No?
  • textDecorationLine
 TVM, VTVM PCV
  • textDecorationStyle
 iOS No No?
  • textShadowColor
 No No?
  • textShadowOffset
 No No?
  • textShadowRadius
 No No?
  • textTransform
 TVM, VTVM Pri 1
  • writingDirection
 FEVM, No Pri 1
  • characterSpacing
 Windows TVM, VTVM Pri 1 Alias for letterSpacing?

29/29

View Style Props

API Platform RNW Paper RNW Fabric Notes
  • backfaceVisibility
 No CBCV+PCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps
  • backgroundColor
 TVM, VTVM PCV Fabric: #11335
  • borderBottomColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomEndRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomLeftRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomRightRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomStartRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderBottomWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
No CBCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopColor
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopEndRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopLeftRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopRightRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopStartRadius
 No CBCV+PCV Fabric: #11323, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • elevation
 Android No No?
  • opacity
 FEVM, No PCV
  • transform
 FEVM, No CBCV+PCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps

52/53

Layout Props

API Platform RNW Paper RNW Fabric Notes
  • alignContent
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • alignItems
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • alignSelf
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • aspectRatio
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • borderBottomWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderEndWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderLeftWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderRightWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderStartWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderTopWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • borderWidth
 NUIM CBCV+PCV Fabric: #11323, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • bottom
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • direction
 FEVM+NUIM, NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • display
 FEVM+NUIM, NUIM PCV
  • end
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flex
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flexBasis
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flexDirection
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flexGrow
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flexShrink
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • flexWrap
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • height
 VMB+NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • justifyContent
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • left
 VMB+NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • margin
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginBottom
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginEnd
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginHorizontal
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginLeft
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginRight
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginStart
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginTop
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • marginVertical
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • maxHeight
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • maxWidth
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • minHeight
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • minWidth
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • overflow
 NUIM Pri 1
  • padding
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingBottom
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingEnd
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingHorizontal
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingLeft
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingRight
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingStart
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingTop
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • paddingVertical
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • position
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • right
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • start
 NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • top
 VMB+NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • width
 VMB+NUIM CBCV+PCV Fabric: RN Core resolves LayoutMetrics
  • zIndex
 FEVM, No Pri 1

4/4

Shadow Props

API Platform RNW Paper RNW Fabric Notes
  • shadowColor
 No CBCV+PCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOffset
 iOS No CBCV+PCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOpacity
 iOS No CBCV+PCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowRadius
 iOS No CBCV+PCV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.

Metadata

Metadata

Assignees

No one assigned

    Labels

    API: CompletionArea: Component ViewsArea: FabricSupport Facebook FabricArea: TextDeliverableMajor item tracked for top-level planning in ADONew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricParity: Fabric vs. PaperRNW Fabric does not look or behave like RNW Paperenhancement

    Type

    No type

    Projects

    RNW New Architecture

    Status

    Done

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions