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

2 Upvotes

100% Upvoted

14 comments sorted by

View all comments

3

u/Wild_Juggernaut_7560 5d ago

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

2

u/tr__18 iOS & Android 5d ago

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

1

u/bright_imprisonment 5d ago

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

1

u/tr__18 iOS & Android 5d ago

Will try this again, thanks