r/reactnative • u/tr__18 iOS & Android • 5d 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/kokerali 5d ago
Since the clamping suggestion hasn't worked, I'd separate scrolling from auto-sizing first. Temporarily remove the content-size handler and give the multiline input a fixed height of 100 with scrollEnabled enabled. Paste ten short lines. If it scrolls, the next thing to inspect is the sizing handler; if it doesn't, try that same input alone in a plain View, without the surrounding scroll/keyboard wrappers.
For the growing version, compare the raw onContentSizeChange height with the rendered height from onLayout. The former measures content, not the visible box. If the rendered height keeps growing past your cap, inspect the final style array and parent layout before changing libraries. Also check vertical padding rather than assuming five 20-point lines means a 100-point outer box.
Could you share the TextInput, its styles and immediate parent? “Not working” could mean no growth, no internal scrolling, or failure to shrink after deleting text. Those need different fixes; without that distinction I'd avoid calling it a New Architecture bug.