Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Switch component parity for Fabric #11163

Closed
145 of 157 tasks
Tracked by #11135
jonthysell opened this issue Feb 2, 2023 · 1 comment
Closed
145 of 157 tasks
Tracked by #11135

Switch component parity for Fabric #11163

jonthysell opened this issue Feb 2, 2023 · 1 comment
Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: Switch Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Milestone
Backlog

Comments

@jonthysell
Copy link
Contributor

jonthysell commented Feb 2, 2023 •
edited by TatianaKapos
Loading

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

ComponentView

  1. Create the SwitchComponentView (SwCV)
  2. Register the ComponentView in the ComponentViewRegistry

Implemented in #11204

APIs

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

Switch Props

7/7

API Platform RNW Paper RNW Fabric Notes
  • disabled
 SwVM SwCV Fabric:#11204
  • ios_backgroundColor
 iOS No No?
  • onChange
 SwVM SwCV Fabric:#11204
  • onValueChange
 JS JS
  • thumbColor
 SwVM SwCV Fabric:#11204
SwVM SwCV Fabric:#11234
  • value
 SwVM SwCV Fabric:#11204

Switch Methods

1/1

API Platform RNW Paper RNW Fabric Notes
  • setValue()
 SwVM SwCV Not exposed to the user, but used by the JS to sync JS state with UI state, Fabric:#11204

View Props

51/60

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

View Style Props

29/30

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

Layout Props

52/53

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

Shadow Props

4/4

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

Native Component Methods

2/2

API Platform RNW Paper RNW Fabric Notes
  • blur()
 VMB CBCV Fabric: #11323
  • focus()
 VMB CBCV Fabric: #11323

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.
@jonthysell jonthysell added the Area: Fabric Support Facebook Fabric label Feb 2, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Feb 2, 2023
@jonthysell jonthysell mentioned this issue Feb 2, 2023
Closed
9 tasks
@chrisglein chrisglein added enhancement Area: Switch and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Feb 2, 2023
@chrisglein chrisglein added this to the Backlog milestone Feb 2, 2023
@marlenecota marlenecota mentioned this issue Feb 10, 2023
Merged
@chrisglein chrisglein mentioned this issue Feb 10, 2023
Closed
@chrisglein chrisglein mentioned this issue Aug 17, 2023
Open
@chrisglein chrisglein mentioned this issue Aug 30, 2023
Closed
@chrisglein chrisglein mentioned this issue Sep 7, 2023
Closed
@jonthysell jonthysell added New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Area: Component Views Deliverable Major item tracked for top-level planning in ADO API: Completion labels Mar 7, 2024
@jonthysell
Copy link
Contributor Author

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: Switch Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Projects
RNW New Architecture
Status: Done
Milestone
Backlog
Development

No branches or pull requests
4 participants
@marlenecota @jonthysell @chrisglein @YajurG