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.

1 Like

Here is a configuration as I see it :

  • Page is configured with “stretch to the viewport”
  • I turned off all default navigations and created my own top navigation
  • There are 3 containers : Top Navigation, Main Body/Scroll, Bottom “Enter Chat Message” container.
  • Positions for all 3 are relative (not absolute) - I did not use/change Flex properties
    Bottom chat container configuration:
  • It is set to “horizontal” layout
  • I didn’t include rows (I think this is important)
  • Chat Input field is placed as part of “chat” container.
  • Chat container is setup to align Vertically and also to justify content to the bottom
  • Chat input does not have any pre-determined vertical size (nothing entered)

I believe that is it. Below are the results with a Chat nicely moving up when typed.

Milan

5 Likes

That’s really cool! Thank you for sharing. I’ll test this out and perhaps make a video tutorial about it, unless you plan on making one yourself :wink:

1 Like

Hey, Milan_Habijanac could you please explain to me if every chat is different depending on the person chat you are opening.

I’m trying to do something similar, I have a list that opens to a page, and on that page, I want to just put the information of the item I clicked since every time I try to open a different item it appears the same information. Like:

I open item 1, it shows item 1’s information, but when I open item 3, for example, it shows item 1’s information, and that happens to every single item on the list.

I don’t have a site or anything to pick information like the Rest API method, I need to be able to change the information on only that item.

I can already update the information on the page, but it changes to all the items in the list, not just the one I want to.

Hi, Milan.

Thanks for the explanation, I really appreciate it.
For some reason it doesn’t seem to work for me. Have tried on both Android and IOS phones. I’ve been trying it for so long and now I’m just desperate since chat UI was the very last thing to do in my app. Could you maybe take a screenshot of your configuration, would be very grateful!

Hmm, I got everything else to work except the multi-line growing, I’ll look into it :thinking:

EDIT: the multi-line growing is working in 1.9.22 but broken in 2.X at least, I filed a bug report about it.

Thank you, Mevi!

Could you please share the configurations or make a video tutorial “Messaging App - Part 3” :slight_smile:

3 Likes

Hi! I would love to continue with the messaging app tutorials but aren’t able to do right now – the configuration is pretty much as described above, but doesn’t work at the moment due to the bug(s).

Hi!

Any information on when approximately it could be fixed? I wanted to launch my app during the next week.
Thank you.

Hi,

it absolutely won’t be fixed by next week, unfortunately :frowning: No timeline as of yet, there are some more urgent bugs that will have to be fixed before this.

Hi Mevi,

I mean we aren’t even able to implement a Chat because of it. I think it is a very significant issue.

Maybe there are other solutions, which we could use before the bug will be fixed?

Hi! It’s unfortunate that this issue is blocking you so badly, but we are still working with a very small team, doing our best.

Well, I don’t know if it would work, but you could try growing the height of the input based on a formula? Like if the inputted text contains line breaks (\n) or is so and so long, add more height to the input field.

Mevi, do you think it’s possible to integrate APIs from twilio or Agora (the companies that powers Clubhouse) into Appgyver?

If it’s a rest API, I don’t see why not. We use twilio ourselves in some projects :slight_smile:

I tried to make it too. I did not use the rows or set any height. However, the input does not support multiple line even though I already set as multiple line.

Please see the video below. There is two issues,

  1. Sudden white container appear once I click the input field (at the beginning of the video).
  2. Does not support multiple line. It is hidden.

I have exactly the same issue. Looks like it is a bug in iOS, Android seems OK.