How do you make a scroll view scroll to bottom?

I have a scroll view that has repeated items in it but i want the most recent item added to be visible at the bottom without the user needing to scroll down to see it. Basically i want a scroll view that scrolls up to see older items instead of down to see newest item.

Im trying to create a Chat room.

have you tried Scroll-to logic?

@Ahmed_Aman That scrolls the whole screen doesnt it?

I’m looking into creating a messaging app during this month, I’ll get back to you if I figure something out!

3 Likes

(My current hunch is that we would need scroll to end implemented before this would work, unless that scroll to happens to work with scrollView)

I am looking for this function as well. How to scroll to the end/ to view new message first?

Hi! Nothing as of yet. However, we are working on third party plugin support, which would enable using any plugin to implement a feature like this.

Hello Mevi, any update on the scroll to end for a scroll view component? I can’t find the part III of your messaging app video where I think you will be dealing with scroll view components that goes directly to the end :slight_smile:
Cheers

place an empty input at bottom and use focus input, then make input invisible. make the placeholder of the input show Thanks for commenting! before it disappears. Could probably unfocus the comment input itself(in the bottom where user writes comment) first to make it smoother.

1 Like

Hey it works! Look, what I did was I made a comment loading container as an exact replica of the comment container, and set the test filed as a primitive input, bound to a variable commentLoadingText, then when comment is sent, immediately make the comment loading container visible, then set the value of the commentLoadingText to the comment, but right after you make the comment loading container visible. After it is visible, use focus input and it scrolls to the bottom of the scrollvooew, and I used a fade in animate component, so that while the comment is writing to database and new list retrieved, the user sees their comment and it scrolls to the bottom of the scrollview because that is where the input is. Then get record collection and when returned, set the comment loading container variable to false so that the comment loading container disappears and their comment appears in same place.

Gimme some luvies!!!

Edit. I made the bottom where they write the comment unFocus first and it made it much smoother after I made this screen cast. Also, set the value of the input placeholder text to the variable of the comment as well so it shows during the brief moment while it is visible.

3 Likes

Here I made another screen video showing how it got smoother by unfocussing the first input first. It definitely works to scroll to bottom of scrollview, even though the comment input for writing the comment is outside the scroll view. Set the avatar image in the comment loading container to the current users avatar. I still have to make the value of the placeholder text in the input to the same variable as the commentLoading text so that the comment will show.

Sorry the video was too large to upload here so I uploaded it to our news feed don’t worry I don’t make any money from any of this and am not trying to promote anything.

1 Like

When I tested I thought I discovered that “focus input” does NOT scroll all the way down to the input field. Are you sure about this solution?

1 Like

It’s been working for me. Maybe place a spacer container under the last item in repeater list.

1 Like

Great, thanks for sharing. Maybe the fact that it’s a primitive input, as you described. I’ll give it another try!

Wow, you’re right, @Daniel_Perley1 ! Focus Input WILL scroll down to a primitive input! Cheers!

1 Like

Yeah and if you get fancy you can make it merely be an instant preview of the new comment. You can see a full working example here: https://wikacy.app

Yeah. But I made it exact dimensions 0 px w/h. And then dismissed keyboard so it doesn’t even come up. In my case, I wanted the user to land on the page with the scroll view all the way down, like a chat room.

1 Like

It’s a nice little trick. :pray: