How to make multiline TextInput shrink when deleting lines (React-Native)?

Question

I have a custom multiline TextInput which grows/expands automatically to fit its content:

    import React, { useState } from 'react'
    import { TextInput } from 'react-native'
    
    export function MyInput() {
        const [value, setValue] = useState('Sample')
        const [height, setHeight] = useState(56)
        return (
            <TextInput
                value={value}
                onChangeText={text => {
                    setValue(text)
                }}
                onContentSizeChange={event => {
                    setHeight(Math.max(56, event.nativeEvent.contentSize.height))
                }}
                multiline
                style={{
                    padding: '16px',
                    height: height + 'px'
                }}
            />
        )

}

However if it is already expanded to multiple lines and I delete its content, onContentSizeChange does not fire and the empty lines are not removed automatically. Any way to fix this? Thanks!

score 1 · Answer 1 · answered Mar 29 '21 at 19:25

I found two ways to shrink the input:

Add a border to the TextInput in the style props, e.g.:

borderWidth: 0.5, // any value is required
borderColor: "transparent"

Use onChange callback instead of the onContentSizeChange in the TextInput (originally posted here):

onChange={(e) => {
  e.nativeEvent.target.style.height = 0;
  e.nativeEvent.target.style.height = `${e.nativeEvent.target.scrollHeight}px`;
}}

How to make multiline TextInput shrink when deleting lines (React-Native)?

1 Answers1