Cannot figure out Multi-line input to expand like in any Chat App

Hi -

I have an app which requires a Chat with multi-line input. I figured out what I thought were challenging parts including showing up messages, communication with custom back-end and so on. All working.

Turns out my most challenging part is to show multi-line input box that grows upwards while all the rest of the screen remains the same. I realize it’s probably some combination of flex settings, containers, % and so on … please guide me in a right direction if you can as I am lost.

I created simple illustration to describe issues/needs:

What I would like to have happened:

  • When no messages (or just few) - “chat” buttons are fixed at the top and single input line shows at the bottom. When user starts typing - keyboard shows up, input box is right above keyboard and as user types and goes to the second line - input box expands in two, three … as many lines as needed.

  • When many messages - they are scrollable while “chat” buttons are fixed at the top - same as note when user starts typing in the multi-line. User can still scroll the messages.

  • I would also like the background image for the chat. I do know how to set it up - but not sure if it all works with the above two requirements.

I can post a simple app that shows the issue or maybe you have some simple suggestions for me on how to make this work.

Thanks a LOT for any help.

3 Likes

I want to know about this too.

2 Likes

Hi! Sorry I missed this issue totally, let me see if I can figure out something with our existing components or if this would be only possible once we have third party plugins :thinking:

Okaaay so with a quick look of trying to implement this I ran into one inconvenience and one bug.

The bug is related to getting that input field to focus and scroll to view nicely when the user taps on it, which makes things a little difficult. You can kinda work around it, but not very well, so I’ll let you know what your options are.

Just some quick steps on how to construct the rest of the page:

  1. I would construct this as a page with a scrollview. Which means going to Page Layout styles > advanced properties and checking “disable scroll” and “stretch to viewport height” (and setting page paddings to 0 because I prefer it that way)
  2. The base structure of the page would be container (header, with your buttons), scroll view (with chat messages), container (footer). You have to set the scrollview height for the footer to appear. I set it to 85% I think. Set footer to flex grow 1.
  3. Inconvenience: I tried to just have the chat messages as a single container I would style based on whether or not the message is from sender or not. Unfortunately align self can’t be styled with a formula. Yet. I asked about it and I hope it would get added soon. Without the align self styling I think you probably have to do two different repeating containers and hide/show each based on whether or not the message is from the sender or receiver.
  4. Bug: The (primitive) input field in the footer does not scroll correctly when it is tapped. There is a bug ticket about this here. The only way to kind of work around this that I found is to give the input field a height that is larger than needs to be, but it kind of defeats the purpose of having it grow on input. Also if the user types so much that it reaches the last row, that last row is out of view. But this workaround is better than having nothing, I guess :grimacing: The input probably appears correctly in the view without the scrollview, but the scrollview is necessary imo to get the layout to make sense.

Once both the inconvenience and the bug get fixed, I’d love to do a tutorial about creating a chat. Before that it’s kind of hacky, I think.

Hi @Mevi … thank you for a detailed reply.

Actually, after 2 weeks of randomly configuring the elements … I got it to work somehow. I was about to post here my “solution” or at least what I see worked for me. It is very likely that I accidently stumbled upon what you described. At least for what I need is working but a more robust solution will always be better. I will try and post here in the next couple of days my setup in a case it helps anyone else.