Skip to content

Modal component parity for Fabric #11157

New issue
New issue
Closed
Closed
Modal component parity for Fabric#11157
Assignees
TatianaKapos
Labels
API: CompletionArea: Component ViewsArea: FabricSupport Facebook FabricArea: ModalDeliverableMajor 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
Next
@jonthysell

Description

@jonthysell
jonthysell
opened on Jan 31, 2023

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

ComponentView

  1. Create the ModalHostViewComponentView (MHVCV)
  2. Register the ComponentView in the ComponentViewRegistry
  3. Get a new window to show with a Modal
  4. Add React Native Components within new window
  5. Correctly position new windows
  6. Add onDismiss
  7. Add style properties (transparent, visible, animated ect.)

APIs

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

Modal Props

API Platform RNW Paper RNW Fabric Notes
  • animated
 No Pri 1
  • animationType
 No Pri 1
  • hardwareAccelerated
 Android No No?
  • onDismiss
 iOS No No?
  • onOrientationChange
 iOS No No?
  • onRequestClose
 No Pri 1
  • onShow
 No Pri 1
  • presentationStyle
 iOS No No?
  • statusBarTranslucent
 Android No No?
  • supportedOrientations
 iOS No No?
  • transparent
 No Pri 1
  • visible
 No Pri 1

View Props

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 Pri 2
  • accessibilityLanguage
 iOS No No?
  • accessibilityLiveRegion
 Android FEVM Pri 2
  • accessibilityRole
 FEVM Pri 2
  • accessibilityState
 FEVM Pri 2
  • 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 Pri 1
  • 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 Pri 1 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 Pri 1 Necessary? Fabric: #11323
  • onFocus
 Windows VMB Pri 1 Necessary? Fabric: #11323
  • 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 CVM Pri 1
  • tooltip
 Windows FEVM Pri 1

Native Component Methods

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

Glossary

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

Metadata

Metadata

Assignees

Labels

API: CompletionArea: Component ViewsArea: FabricSupport Facebook FabricArea: ModalDeliverableMajor 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