TextInput component parity for Fabric · Issue #11145 · microsoft/react-native-windows (original) (raw)
This task captures the work to reach parity between Paper and Fabric for the native code for the <TextInput> component.
ComponentView
- Create the WindowsTextInputComponentView (WTICV)
- Register the ComponentView in the ComponentViewRegistry
APIs
See latest spec at https://reactnative.dev/docs/textinput.
TextInput Props
41/61
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| allowFontScaling | TIVM | Pri 1 | Fabric: Code present but commented out? | |
| autoCapitalize | TIVM | Pri 1 | Fabric: Code present but commented out? | |
| autoComplete | Android | No | No? | |
| autoCorrect | No | No? | ||
| autoFocus | TIVM | Pri 1 | ||
| blurOnSubmit | No | No? | ||
| caretHidden | TIVM | WTICV | Fabric: #12430 | |
| clearButtonMode | iOS | No | No? | |
| clearTextOnFocus | iOS | TIVM | Pri 1 | |
| contextMenuHidden | TIVM | Pri 1 | ||
| dataDetectorTypes | iOS | No | No? | |
| defaultValue | TIVM | WTICV | Passed in as text = value ?? defaultValue | |
| cursorColor | Android | TIVM | WTICV | Paper: #11502, Fabric: #12158 |
| disableFullscreenUI | Android | No | No? | |
| editable | TIVM | WTICV | Fabric: #11488 | |
| enablesReturnKeyAutomatically | iOS | No | No? | |
| importantForAutofill | Android | No | No? | |
| inlineImageLeft | Android | No | No? | |
| inlineImagePadding | Android | No | No? | |
| inputAccessoryViewID | iOS | No | No? | |
| keyboardAppearance | iOS | No | No? | |
| keyboardType | TIVM | Pri 1 | ||
| maxFontSizeMultiplier | No | No? | ||
| maxLength | TIVM | WTICV | ||
| multiline | TIVM | WTICV | Fabric: #11490 | |
| numberOfLines | Android | No | No? | |
| onBlur | TIVM+VMB | Pri 1 | Event is topTextInputBlur | |
| onChange | TIVM+VMB | WTICV | Event is topTextInputChange | |
| onChangeText | TIVM | Pri 1 | Event is topTextInputChangeText | |
| onContentSizeChange | TIVM | Pri 1 | Event is topTextInputContentSizeChange | |
| onEndEditing | TIVM+VMB | Pri 1 | Event is topTextInputEndEditing | |
| onPressIn | TIVM | Pri 1 | Event is topTextInputPressIn | |
| onPressOut | TIVM | Pri 1 | Event is topTextInputPressOut | |
| onFocus | TIVM+VMB | Pri 1 | Event is topTextInputFocus | |
| onKeyPress | TIVM | WTICV | topTextInputKeyPress, Fabric: #12771 | |
| onLayout | VMB | Pri 1 | ||
| onScroll | TIVM | Pri 1 | Event is topTextInputScroll | |
| onSelectionChange | TIVM | WTICV | Event is topTextInputSelectionChange | |
| onSubmitEditing | TIVM+VMB | WTICV | Event is topTextInputSubmitEditing, Fabric: #12746 | |
| placeholder | TIVM | WTICV | Fabric: #12018 | |
| placeholderTextColor | TIVM | WTICV | Fabric: #12018 | |
| returnKeyLabel | Android | No | No? | |
| returnKeyType | No | No? | ||
| rejectResponderTermination | iOS | No | No? | |
| scrollEnabled | iOS | TIVM | Pri 1 | |
| secureTextEntry | TIVM | WTICV | Fabric: #11484 | |
| selection | TIVM | Pri 1 | Fabric: Code present but commented out? | |
| selectionColor | TIVM | Pri 1 | ||
| selectTextOnFocus | TIVM | Pri 1 | ||
| showSoftInputOnFocus | No | No? | ||
| spellCheck | iOS | TIVM | Pri 1 | |
| textAlign | TIVM | Pri 1 | ||
| textContentType | iOS | No | No? | |
| passwordRules | IOS | No | No? | |
| style | See Below | See Below | Supports Text Style Props*, View Style Props, Layout Props, Shadow Props | |
| textBreakStrategy | Android | No | No? | |
| underlineColorAndroid | Android | No | No? | |
| value | TIVM | WTICV | Passed in as text = value ?? defaultValue | |
| clearTextOnSubmit | Windows | TIVM | WTICV | Fabric: #12746 |
| mostRecentEventCount | Windows | TIVM | Pri 1 | |
| submitKeyEvents | Windows | TIVM WTICV | Fabric: #12746 |
TextInput Methods
4/4
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| focus() | TIVM+VMB | CBCV | Duplicate of Native Component Method? Fabric: #11323 | |
| blur() | TIVM+VMB | CBCV | Duplicate of Native Component Method? Fabric: #11323 | |
| clear() | TIVM | WTICV | Invoked by calling setTextAndSelection | |
| isFocused() | 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 | FEVM | CDAP | Fabric: #11412 | |
| accessibilityState | FEVM | CBCV+CDAP | Fabric: Partial impl in #11674 | |
| accessibilityValue | FEVM | CBCV+CDAP+WTICV | Fabric: #12287 | |
| accessibilityViewIsModal | iOS | No | No? | |
| accessible | CVM+FEVM | CBCV+CDAP | Fabric: #11719 | |
| collapsable | Android | No | No? | |
| focusable | Android | TIVM+CVM | 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 | WTICV | ||
| 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+WTICV | Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics |
| keyDownEvents | Windows | TIVM+VMB | WTICV+CBCV | Fabric: #12146 |
| keyUpEvents | Windows | VMB | WTICV+CBCV | Fabric: #12146 |
| onBlur | Windows | TIVM+VMB | Pri 1 | Duplicate of TextInput prop, but with different event? |
| onFocus | Windows | TIVM+VMB | Pri 1 | Duplicate of TextInput prop, but with different event? |
| onKeyDown | Windows | VMB | WTICV+CBCV+CEH | Fabric: #12146 |
| onKeyDownCapture | Windows | VMB | Pri 1 | |
| onKeyUp | Windows | VMB | WTICV+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 |
Text Style Props
11/20
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| color | CVM | WTICV | ||
| fontFamily | TIVM | Pri 1 | Fabric: Code present but commented out? | |
| fontSize | TIVM | WTICV | ||
| fontStyle | TIVM | Pri 1 | Fabric: Code present but commented out? | |
| fontWeight | TIVM | WTICV | ||
| includeFontPadding | Android | No | No? | |
| fontVariant | No | No? | ||
| letterSpacing | TIVM | Pri 1 | ||
| lineHeight | No | Pri 1 | ||
| textAlign | TIVM | Pri 1 | ||
| textAlignVertical | Android | No | No? | |
| textDecorationColor | iOS | No | No? | |
| textDecorationLine | No | Pri 1 | ||
| textDecorationStyle | iOS | No | No? | |
| textShadowColor | No | No? | ||
| textShadowOffset | No | No? | ||
| textShadowRadius | No | No? | ||
| textTransform | No | Pri 1 | ||
| writingDirection | FEVM | Pri 1 | ||
| characterSpacing | Windows | TIVM | Pri 1 | Alias for letterSpacing? |
View Style Props
28/29
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| backfaceVisibility | No | CBCV+WTICV | Fabric: #12115 Impl in CBCV and CV must call updateTransformProps | |
| backgroundColor | CVM | WTICV | ||
| borderBottomColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderBottomEndRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderBottomLeftRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderBottomRightRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderBottomStartRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderBottomWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderColor | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderEndColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderEndWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderLeftColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderLeftWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderRightColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderRightWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderStartColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderStartWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderStyle | No | CBCV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopColor | No | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopEndRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopLeftRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopRightRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopStartRadius | CVM | CBCV+WTICV | Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderWidth | CVM+NUIM | CBCV+WTICV | Fabric: 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+WTICVCV | Fabric: #12115 Impl in CBCV and CV must call updateTransformProps |
Layout Props
51/53
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| alignContent | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| alignItems | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| alignSelf | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| aspectRatio | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| borderBottomWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderEndWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderLeftWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderRightWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderStartWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderTopWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| borderWidth | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics | |
| bottom | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| direction | FEVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| display | FEVM+NUIM | WTICV | ||
| end | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flex | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flexBasis | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flexDirection | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flexGrow | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flexShrink | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| flexWrap | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| height | VMB+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| justifyContent | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| left | VMB+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| margin | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginBottom | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginEnd | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginHorizontal | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginLeft | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginRight | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginStart | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginTop | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| marginVertical | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| maxHeight | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| maxWidth | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| minHeight | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| minWidth | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| overflow | NUIM | Pri 1 | ||
| padding | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingBottom | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingEnd | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingHorizontal | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingLeft | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingRight | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingStart | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingTop | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| paddingVertical | CVM+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| position | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| right | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| start | NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| top | VMB+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| width | VMB+NUIM | CBCV+WTICV | Fabric: RN Core resolves LayoutMetrics | |
| zIndex | FEVM | Pri 1 |
Shadow Props
4/4
| API | Platform | RNW Paper | RNW Fabric | Notes |
|---|---|---|---|---|
| shadowColor | No | CBCV+WTICV | Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps | |
| shadowOffset | iOS | No | CBCV+WTICV | Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps |
| shadowOpacity | iOS | No | CBCV+WTICV | Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps |
| shadowRadius | iOS | No | CBCV+WTICV | 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 | TIVM+VMB | CBCV | Fabric: #11323 |
| focus() | Windows | TIVM+VMB | CBCV | Fabric: #11323 |
Glossary
See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.