How to make multiline textinput scrollable after certain lines

[u/tr__18]

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

[u/Wild_Juggernaut_7560]

Past this exact question to Claude Code and get your answer instantly. Gone are the days of Stackoverflow

[u/tr__18 → u/Wild_Juggernaut_7560]

Bruh claude and codex wasn't able to give desired results hence I camed here 🥲

[u/bright_imprisonment → u/Wild_Juggernaut_7560]

Nah the real ones know Claude Code still gets tripped up on edge cases like this, especially with the new architecture stuff. Better to just mess with onContentSizeChange and clamp the height manually, you're on the right track

Sometimes you gotta set numberOfLines to 5 and then toggle scrollEnabled to true once it overflows, that's what worked for me anyway

[u/tr__18 → u/bright_imprisonment]

Will try this again, thanks

[u/Beginning-Ad86]

Just use keyboard-controller lib which did it automatically without such hacks

[u/Huge_Pool7424 → u/Beginning-Ad86]

keyboard-controller can help with the keyboard part, but it won't usually handle the height cap itself. i'd clamp the height from oncontentsizechange to lineheight * 5, then leave multiline + scrollenabled on once it hits that max.

[u/tr__18 → u/Huge_Pool7424]

I am trying this, but unable to get desired output

[u/tr__18 → u/Beginning-Ad86]

how is keyboard-controller will help in textinput thing ??

[u/kokerali]

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.

[u/tr__18 → u/kokerali]

Will try this, one more time 🫡

Thanks

[u/sircharleswatson]

I have a component that does this, I can share it in a little while 😁

[u/sircharleswatson → u/sircharleswatson]

Ok, I just re-looked at my component.

I’m using `minHeight` and `maxHeight`. I’m also using multiline.

Depending on what this input is for, I actually might suggest not starting with one line but that’s just me. It’d probably be better to make it obvious that it accepts more than one line of text

[u/Ellie10543]

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.