search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.31k stars 1.14k forks source link

View component parity for Fabric #11136

Closed jonthysell closed 5 months ago

jonthysell commented 1 year ago

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

ComponentView

  1. [x] Create the CompositionViewComponentView (CVCV)
  2. [x] Register the ComponentView in the ComponentViewRegistry

APIs

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

View Props

53/61
API		 Platform RNW Paper RNW Fabric Notes
  • [ ] accessibilityActions
 FEVM Pri 2
  • [x] accessibilityElementsHidden
 iOS No No?
  • [x] accessibilityHint
 FEVM CBCV+CDAP Fabric: #12036
  • [x] accessibilityIgnoresInvertColors
 iOS No No?
  • [x] accessibilityLabel
 FEVM CBCV+CDAP Fabric: #11674
  • [x] accessibilityLanguage
 iOS No No?
  • [ ] accessibilityLiveRegion
 Android FEVM Pri 2
  • [x] accessibilityRole
 FEVM CDAP Fabric: #11412
  • [ ] accessibilityState
 FEVM CBCV+CDAP Fabric: Partial impl in #11674
  • [x] accessibilityValue
 FEVM CBCV+CDAP Fabric: #12287
  • [x] accessibilityViewIsModal
 iOS No No?
  • [x] accessible
 VVM+FEVM CBCV+CDAP Fabric: #11719
  • [x] collapsable
 Android No No?
  • [x] focusable
 Android VVM CBCV+CDAP Fabric: #11674
  • [x] hitSlop
 JS JS
  • [x] importantForAccessibility
 Android No No?
  • [x] nativeId
 No No?
  • [x] needsOffscreenAlphaCompositing
 No No?
  • [x] nextFocusDown
 Android No No?
  • [x] nextFocusForward
 Android No No?
  • [x] nextFocusLeft
 Android No No?
  • [x] nextFocusRight
 Android No No?
  • [x] nextFocusUp
 Android No No?
  • [ ] onAccessibilityAction
 VVM+VMB Pri 2
  • [x] onAccessibilityEscape
 iOS No No?
  • [x] onAccessibilityTap
 VVM CDAP Fabric: #11874
  • [x] onLayout
 VMB+NUIM Pri 1
  • [x] onMagicTap
 iOS No No?
  • [x] onMoveShouldSetResponder
 JS JS
  • [x] onMoveShouldSetResponderCapture
 JS JS
  • [x] onResponderGrant
 JS JS
  • [x] onResponderMove
 JS JS
  • [x] onResponderReject
 JS JS
  • [x] onResponderRelease
 JS JS
  • [x] onResponderTerminate
 JS JS
  • [x] onResponderTerminationRequest
 JS JS
  • [x] onStartShouldSetResponder
 JS JS
  • [x] onStartShouldSetResponderCapture
 JS JS
  • [x] pointerEvents
 VMB CVCV
  • [x] removeClippedSubviews
 No No?
  • [x] renderToHardwareTextureAndroid
 Android No No?
  • [x] shouldRasterizeIOS
 iOS No No?
  • [x] style
 See Below See Below Supports View Style Props, Layout Props, Shadow Props
  • [x] testID
 FEVM CDAP Fabric: #11412
  • [ ] accessibilityPosInSet
 Windows FEVM Pri 2
  • [ ] accessibilitySetSize
 Windows FEVM Pri 2
  • [x] enableFocusRing
 Windows VVM CBCV+CVCV Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] keyDownEvents
 Windows VMB CBCV Fabric: #12146
  • [x] keyUpEvents
 Windows VMB CBCV Fabric: #12146
  • [x] onBlur
 Windows VVM+VMB CBCV Fabric: #11276
  • [ ] onClick
 Windows VVM Pri 1
  • [x] onFocus
 Windows VVM+VMB CBCV Fabric: #11276
  • [x] onKeyDown
 Windows VMB CBCV+CEH Fabric: #12146
  • [x] onKeyDownCapture
 Windows VMB Pri 1
  • [x] onKeyUp
 Windows VMB CBCV+CEH Fabric: #12146
  • [x] onKeyUpCapture
 Windows VMB Pri 1
  • [x] onMouseEnter
 Windows VVM+VMB CEH
  • [x] onMouseLeave
 Windows VVM+VMB CEH
  • [ ] tabIndex
 Windows VVM Pri 1
  • [ ] tooltip
 Windows FEVM Pri 1

30/30

View Style Props

API Platform RNW Paper RNW Fabric Notes
  • [x] backfaceVisibility
 No CBCV+CVCV Fabric: #11608, #12115 Impl in CBCV and CV must call updateTransformProps
  • [x] backgroundColor
 VVM CVCV
  • [x] borderBottomColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomEndRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomLeftRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomRightRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomStartRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderColor
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartWidth
 VVM+NUIM CBCV+CVCV Fabric: 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
  • [x] borderTopColor
 No CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopEndRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopLeftRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopRightRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopStartRadius
 VVM CBCV+CVCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderWidth
 VVM+NUIM CBCV+CVCV Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] elevation
 Android No No?
  • [x] opacity
 FEVM CVCV
  • [x] transform
 FEVM CBCV+CVCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps

52/54

Layout Props

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

4/4

Shadow Props

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

2/2

Native Component Methods

API Platform RNW Paper RNW Fabric Notes
  • [x] blur()
 VVM+VMB CBCV Fabric: #11323
  • [x] focus()
 VVM+VMB CBCV Fabric: #11323

Glossary

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

jonthysell commented 5 months ago

Closing this deliverable, all remaining component properties required for parity are now being tracked by individual issues.