From e1b8c954ef7876a36fca500af0d55611067a4159 Mon Sep 17 00:00:00 2001 From: Peter Argany Date: Thu, 30 Jan 2020 15:27:53 -0800 Subject: [PATCH] Add a hand-written JS view config for RCTSinglelineTextInputView Summary: `requireNativeComponent` redboxes in bridgeless mode because there is no UIManager. This adds a handwritten view config to avoid using UIManager. Reviewed By: ejanzer Differential Revision: D19624044 fbshipit-source-id: 5ae68f63068a131a305754003154ee0cf0f1be46 --- .../RCTSingelineTextInputNativeComponent.js | 19 ++- .../RCTSinglelineTextInputViewConfig.js | 134 ++++++++++++++++++ 2 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 Libraries/Components/TextInput/RCTSinglelineTextInputViewConfig.js diff --git a/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js b/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js index df698539dc..4333854ce4 100644 --- a/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js +++ b/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent.js @@ -15,6 +15,8 @@ import requireNativeComponent from '../../ReactNative/requireNativeComponent'; import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; import type {Int32} from '../../Types/CodegenTypes'; import * as React from 'react'; +import RCTSinglelineTextInputViewConfig from './RCTSinglelineTextInputViewConfig'; +const ReactNativeViewConfigRegistry = require('../../Renderer/shims/ReactNativeViewConfigRegistry'); type NativeType = HostComponent; @@ -43,8 +45,17 @@ export const Commands: NativeCommands = codegenNativeCommands({ ], }); -const SinglelineTextInputNativeComponent: HostComponent = requireNativeComponent( - 'RCTSinglelineTextInputView', -); +let SinglelineTextInputNativeComponent; +if (global.RN$Bridgeless) { + ReactNativeViewConfigRegistry.register('RCTSinglelineTextInputView', () => { + return RCTSinglelineTextInputViewConfig; + }); + SinglelineTextInputNativeComponent = 'RCTSinglelineTextInputView'; +} else { + SinglelineTextInputNativeComponent = requireNativeComponent( + 'RCTSinglelineTextInputView', + ); +} -export default SinglelineTextInputNativeComponent; +// flowlint-next-line unclear-type:off +export default ((SinglelineTextInputNativeComponent: any): HostComponent); diff --git a/Libraries/Components/TextInput/RCTSinglelineTextInputViewConfig.js b/Libraries/Components/TextInput/RCTSinglelineTextInputViewConfig.js new file mode 100644 index 0000000000..4836323d1a --- /dev/null +++ b/Libraries/Components/TextInput/RCTSinglelineTextInputViewConfig.js @@ -0,0 +1,134 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow strict-local + * @format + */ + +'use strict'; + +import ReactNativeViewViewConfig from '../../Components/View/ReactNativeViewViewConfig'; +import type {ReactNativeBaseComponentViewConfig} from '../../Renderer/shims/ReactNativeTypes'; + +const RCTSinglelineTextInputViewConfig = { + uiViewClassName: 'RCTSinglelineTextInputView', + bubblingEventTypes: { + topBlur: { + phasedRegistrationNames: { + bubbled: 'onBlur', + captured: 'onBlurCapture', + }, + }, + topChange: { + phasedRegistrationNames: { + bubbled: 'onChange', + captured: 'onChangeCapture', + }, + }, + topEndEditing: { + phasedRegistrationNames: { + bubbled: 'onEndEditing', + captured: 'onEndEditingCapture', + }, + }, + topFocus: { + phasedRegistrationNames: { + bubbled: 'onFocus', + captured: 'onFocusCapture', + }, + }, + topKeyPress: { + phasedRegistrationNames: { + bubbled: 'onKeyPress', + captured: 'onKeyPressCapture', + }, + }, + topSubmitEditing: { + phasedRegistrationNames: { + bubbled: 'onSubmitEditing', + captured: 'onSubmitEditingCapture', + }, + }, + topTouchCancel: { + phasedRegistrationNames: { + bubbled: 'onTouchCancel', + captured: 'onTouchCancelCapture', + }, + }, + topTouchEnd: { + phasedRegistrationNames: { + bubbled: 'onTouchEnd', + captured: 'onTouchEndCapture', + }, + }, + + topTouchMove: { + phasedRegistrationNames: { + bubbled: 'onTouchMove', + captured: 'onTouchMoveCapture', + }, + }, + }, + directEventTypes: {}, + validAttributes: { + ...ReactNativeViewViewConfig.validAttributes, + fontSize: true, + fontWeight: true, + fontVariant: true, + // flowlint-next-line untyped-import:off + textShadowOffset: {diff: require('../../Utilities/differ/sizesDiffer')}, + allowFontScaling: true, + fontStyle: true, + textTransform: true, + textAlign: true, + fontFamily: true, + lineHeight: true, + isHighlighted: true, + writingDirection: true, + textDecorationLine: true, + textShadowRadius: true, + letterSpacing: true, + textDecorationStyle: true, + textDecorationColor: {process: require('../../StyleSheet/processColor')}, + color: {process: require('../../StyleSheet/processColor')}, + maxFontSizeMultiplier: true, + textShadowColor: {process: require('../../StyleSheet/processColor')}, + editable: true, + inputAccessoryViewID: true, + caretHidden: true, + enablesReturnKeyAutomatically: true, + placeholderTextColor: {process: require('../../StyleSheet/processColor')}, + onSelectionChange: true, + clearButtonMode: true, + onContentSizeChange: true, + keyboardType: true, + selection: true, + returnKeyType: true, + blurOnSubmit: true, + mostRecentEventCount: true, + onChange: true, + scrollEnabled: true, + selectionColor: {process: require('../../StyleSheet/processColor')}, + contextMenuHidden: true, + secureTextEntry: true, + onTextInput: true, + placeholder: true, + autoCorrect: true, + onScroll: true, + multiline: true, + textContentType: true, + maxLength: true, + autoCapitalize: true, + keyboardAppearance: true, + passwordRules: true, + spellCheck: true, + selectTextOnFocus: true, + text: true, + clearTextOnFocus: true, + }, +}; + +module.exports = (RCTSinglelineTextInputViewConfig: ReactNativeBaseComponentViewConfig<>);