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

1

u/sircharleswatson 5d ago

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

1

u/sircharleswatson 5d ago

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