Skip to content

Image component parity for Fabric #11144

New issue
New issue
Closed
Closed
Image component parity for Fabric#11144
Labels
API: CompletionArea: Component ViewsArea: FabricSupport Facebook FabricArea: ImageDeliverableMajor 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 <Image> component.

ComponentView

  1. Create the ImageComponentView (ICV)
  2. Register the ComponentView in the ComponentViewRegistry

APIs

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

Image Props

26/31

API Platform RNW Paper RNW Fabric Notes
  • accessible
 IVM+FEVM CBCV+CDAP Duplicate of View Prop, should default to false, Fabric: #11719
  • accessibilityLabel
 FEVM CBCV+CDAP Fabric: #11674, duplicate of View Prop
  • blurRadius
 IVM ICV Fabric: #11064
  • capInsets
 iOS No No? TODO listed in code
  • defaultSource
 No No? Though not documented as such it appears to be Android only?
  • fadeDuration
 Android No No?
  • loadingIndicatorSource
 No No? Though not documented as such it appears to be Android only?
  • onError
 IVM ICV
  • onLayout
 VMB Duplicate of View Prop
  • onLoad
 IVM ICV
  • onLoadEnd
 IVM ICV
  • onLoadStart
 IVM ICV
  • onPartialLoad
 iOS No No?
  • onProgress
 No No? TODO listed in code
  • progressiveRenderingEnabled
 Android No No?
  • resizeMethod
 Android No No?
  • resizeMode
 IVM ICV Fabric: #11064
  • source
 IVM ICV
  • style
 See Below See Below Supports Image Style Props, View Style Props, Layout Props, Shadow Props
  • testID
 FEVM CDAP Fabric: #11412, Duplicate of View Prop
  • accessibilityPosInSet
 Windows FEVM Pri 2
  • accessibilitySetSize
 Windows FEVM Pri 2
  • keyDownEvents
 Windows VMB CBCV Fabric: #12146
  • keyUpEvents
 Windows VMB CBCV Fabric: #12146
  • 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 CEH
  • onMouseLeave
 Windows VMB CEH
  • tooltip
 Windows FEVM Pri 1

Image Style Props

13/14

API Platform RNW Paper RNW Fabric Notes
  • backfaceVisibility
 No CBCV+ICV Duplicate of inherited View Style Prop
  • backgroundColor
 No ICV Duplicate of inherited View Style Prop
  • borderBottomLeftRadius
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderBottomRightRadius
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderColor
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderRadius
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderTopLeftRadius
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderTopRightRadius
 IVM CBCV+ICV Duplicate of inherited View Style Prop
  • borderWidth
 IVM CBCV+ICV Duplicate of inherited View Style Prop and Layout Prop
  • opacity
 FEVM ICV Duplicate of inherited View Style Prop
  • overflow
 NUIM Pri 1 Duplicate of inherited Layout Prop
  • overlayColor
 Android No No?
  • resizeMode
 IVM ICV Duplicate of Image Prop
  • tintColor
 IVM ICV Fabric: #11064

Image Methods

6/6

API Platform RNW Paper RNW Fabric Notes
  • abortPrefetch()
 Android
  • getSize()
 IVMM IVMM
  • getSizeWithHeaders()
 IVMM IVMM
  • prefetch()
 IVMM IVMM
  • queryCache()
 IVMM IVMM
  • resolveAssetSource()
 JS JS

View Props

48/58

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
 IVM+FEVM CDAP Fabric: #11412
  • accessibilityState
 FEVM CBCV+CDAP Fabric: Partial impl in #11674
  • accessibilityValue
 FEVM CBCV+CDAP Fabric: #12287
  • accessibilityViewIsModal
 iOS No No?
  • accessible
 IVM+FEVM CBCV+CDAP Fabric: #11719
  • collapsable
 Android No No?
  • focusable
 Android No CBCV+CDAP Fabric: #11674
  • 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 ICV
  • removeClippedSubviews
 No No?
  • renderToHardwareTextureAndroid
 Android No No?
  • shouldRasterizeIOS
 iOS No No?
  • testID
 FEVM CDAP Fabric: #11412
  • accessibilityPosInSet
 Windows FEVM Pri 2
  • accessibilitySetSize
 Windows FEVM Pri 2
  • enableFocusRing
 Windows JS CBCV+ICV Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • keyDownEvents
 Windows VMB CBCV Fabric: #12146
  • keyUpEvents
 Windows VMB 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 CBCV+CEH Fabric: #12146
  • onKeyDownCapture
 Windows VMB Pri 1
  • onKeyUp
 Windows VMB CBCV+CEH Fabric: #12146
  • onKeyUpCapture
 Windows VMB Pri 1
  • onMouseEnter
 Windows VMB CEH
  • onMouseLeave
 Windows VMB CEH
  • tabIndex
 Windows JS Pri 1
  • tooltip
 Windows FEVM Pri 1

View Style Props

29/29

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

Layout Props

51/53

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

Shadow Props

4/4

API Platform RNW Paper RNW Fabric Notes
  • shadowColor
 No CBCV+ICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOffset
 iOS No CBCV+ICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowOpacity
 iOS No CBCV+ICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • shadowRadius
 iOS No CBCV+ICV 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()
 Windows VMB CBCV Fabric: #11323
  • focus()
 Windows VMB CBCV Fabric: #11323

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: ImageDeliverableMajor 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