diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js index 25e1ce6f05ec..231a99f0e6a6 100644 --- a/src/components/AmountTextInput.js +++ b/src/components/AmountTextInput.js @@ -32,7 +32,7 @@ const propTypes = { style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), /** Style for the container */ - containerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + touchableInputWrapperStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), /** Function to call to handle key presses in the text input */ onKeyPress: PropTypes.func, @@ -44,7 +44,7 @@ const defaultProps = { onSelectionChange: () => {}, onKeyPress: () => {}, style: {}, - containerStyles: {}, + touchableInputWrapperStyle: {}, }; function AmountTextInput(props) { @@ -67,7 +67,7 @@ function AmountTextInput(props) { onSelectionChange={props.onSelectionChange} role={CONST.ROLE.PRESENTATION} onKeyPress={props.onKeyPress} - containerStyles={[...StyleUtils.parseStyleAsArray(props.containerStyles)]} + touchableInputWrapperStyle={props.touchableInputWrapperStyle} /> ); } diff --git a/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js b/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js index 78c37e94196a..78f06b4075e0 100644 --- a/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js +++ b/src/components/TextInput/BaseTextInput/baseTextInputPropTypes.js @@ -26,6 +26,9 @@ const propTypes = { /** Customize the TextInput container */ textInputContainerStyles: PropTypes.arrayOf(PropTypes.object), + /** Customizes the touchable wrapper of the TextInput component */ + touchableInputWrapperStyle: PropTypes.arrayOf(PropTypes.object), + /** Customize the main container */ containerStyles: PropTypes.arrayOf(PropTypes.object), diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index a66df0496a1a..8e1605944993 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -36,6 +36,7 @@ function BaseTextInput( errorText = '', icon = null, textInputContainerStyles, + touchableInputWrapperStyle, containerStyles, inputStyle, forceActiveLabel = false, @@ -286,7 +287,7 @@ function BaseTextInput( style={[ autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxHeight === 'number' ? maxHeight : 0), !isMultiline && styles.componentHeightLarge, - containerStyles, + touchableInputWrapperStyle, ]} > ; + /** Customizes the touchable wrapper of the TextInput component */ + touchableInputWrapperStyle?: StyleProp; + /** Customize the main container */ containerStyles?: StyleProp; diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js index 5b49739150cc..00b40dec9c1f 100644 --- a/src/components/TimePicker/TimePicker.js +++ b/src/components/TimePicker/TimePicker.js @@ -386,7 +386,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) { setSelectionHour(e.nativeEvent.selection); }} style={styles.timePickerInput} - containerStyles={[styles.timePickerHeight100]} + touchableInputWrapperStyle={styles.timePickerHeight100} selection={selectionHour} showSoftInputOnFocus={false} /> @@ -411,7 +411,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) { setSelectionMinute(e.nativeEvent.selection); }} style={styles.timePickerInput} - containerStyles={[styles.timePickerHeight100]} + touchableInputWrapperStyle={styles.timePickerHeight100} selection={selectionMinute} showSoftInputOnFocus={false} />