diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx index e36ae60255fc..c03c47dd5fc8 100644 --- a/src/components/TextInput/BaseTextInput/index.tsx +++ b/src/components/TextInput/BaseTextInput/index.tsx @@ -50,6 +50,7 @@ function BaseTextInput( autoFocus = false, disableKeyboard = false, autoGrow = false, + autoGrowExtraSpace = 0, autoGrowHeight = false, maxAutoGrowHeight, hideFocusedState = false, @@ -257,7 +258,8 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), + autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -493,7 +495,6 @@ function BaseTextInput( )} {/* Text input component doesn't support auto grow by default. - We're using a hidden text input to achieve that. This text view is used to calculate width or height of the input value given textStyle in this component. This Text component is intentionally positioned out of the screen. */} diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 6fe2a7db49ce..70cfb028cef4 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -54,9 +54,7 @@ type CustomBaseTextInputProps = { */ autoGrow?: boolean; - /** - * If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering on native platforms. - */ + /** If autoGrow is enabled, this reserves extra space for incoming characters to prevent flickering. */ autoGrowExtraSpace?: number; /**