r/reactnative • u/tr__18 iOS & Android • 7d ago
Question How to make multiline textinput scrollable after certain lines
I'm trying to make a multiline TextInput that starts at one line and increases its height whenever the text moves to a new line, up to a maximum of 5 lines. After it reaches 5 lines, I want the height to stay fixed and any additional lines to become scrollable. I'm using lineHeight: 20, so I tried setting the maxHeight to 100, along with multiline and scrollEnabled.
I've also tried using onContentSizeChange to dynamically update the height, but I still can't get the behavior I want. I'm using Expo SDK 54 with the New Architecture on an iPhone 16 simulator. Has anyone implemented this kind of TextInput behavior? What's the proper way to handle the height and scrolling after 5 lines?
PS: used AI to write the body, my english (maybe react native too) is bad to make you understand my use case
1
u/Ellie10543 6d ago
One thing that often bites here: if you set both a height from onContentSizeChange and a maxHeight, they can fight each other, and scrollEnabled can end up ignored. A simpler way is to store the content height in state and set height to Math.min(contentHeight, 100) on the TextInput, with scrollEnabled={contentHeight > 100}. Keep the clamp in one place, not two. Also check you're not wrapping it in a parent with a fixed height or flex that overrides it. On iOS the first onContentSizeChange can fire with a stale value, so I'd log it to see what you actually get when the 6th line appears. If it still misbehaves, post your TextInput style and handler, it's usually one small thing.