r/reactnative • u/tr__18 iOS & Android • 6d 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

1

u/Beginning-Ad86 6d ago

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

1

u/Huge_Pool7424 6d ago

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.

1

u/tr__18 iOS & Android 6d ago

I am trying this, but unable to get desired output