React-native: Inverted ListView that renders from the bottom up

[ide]

Inverted lists are useful for UIs like terminals, event logs, chat, etc... where you want to insert new content from the bottom and load old content when the user scrolls to the top. An inverted ListView would also make it easy to scrollToBottom and hard to scrollToTop, which is the opposite of traditional ListViews.

A simple API would look like <ListView inverted={true}>. Some open questions are whether the bottom-most row should come from the front or back of the data source and how to let the programmer check if the view is scrolled to the bottom to allow for a common pattern:

if (scrolledToBottomWithinXPixels(threshold)) {
  insertNewContentAtBottom();
  scrollToBottom();
}

[sunify]

+1 I try to do this with normal ListView, but it did not work properly.

Sample code:

if(this.refs.list) {
    var metrics = this.refs.list.getMetrics();
    this.refs.list.refs.listviewscroll.scrollTo(metrics.contentHeight - this.refs.list.scrollProperties.visibleHeight);
}

contentHeight calculates without last item and scroll stop before them. Here is short video showing this issue.

Also, IMO, ListView should have scrollTo method like in ScrollView.

[jasalo]

Hey @Sunify , does ScrollView have a scrollTo method? I can't seem to find it! And I'm also implementing a Chat view.

[stirman]

Still not able to programmatically scroll to the bottom of a ScrollView or a ListView, has anyone found a way to do this successfully?

[awingla]

Same here. I did the same thing as @Sunify did and got the same result. contentHeight value is calculated without last item so that it won't scroll to bottom. Does anyone know the solution to this?

[lazywei]

@stirman I think this might help: https://github.com/650Industries/react-native-invertible-scroll-view

[d-vine]

@Sunify @awingla
Do you call getMetrics() directly in componentDidUpdate()? I don't use the list view but the ScrollView directly to solve the "chat problem" and ran into the same issue. I think the problem is, that the layout recalculation is not completed at that point. Try to wrap the call in _requestAnimationFrame_ timer.

My current, somewhat hacky implementation of a jump to bottom function uses the _measure_ method of _RCTUIManager_ directly.

_jumpToEnd: function() {
    this.requestAnimationFrame(
        () => {
            RCTUIManager.measure(
                this.refs.scroller.getInnerViewNode(),
                (x,y,width,inner_height) => {
                    RCTUIManager.measure(
                        React.findNodeHandle(this.refs.scroller),
                        (x,y,width,outer_height) => {
                            if (inner_height > outer_height) {
                                var scrollTop = inner_height - outer_height;

                                //do some additional logic here if we really want to jump down

                                this.refs.scroller.scrollWithoutAnimationTo(scrollTop, 0)
                            }
                        }
                    )
                }
            );
        }
    );
},

[lazywei]

@ide why is this closed? is there any new proper solution to this issue?

[ide]

I wrote my own inverted scroll view, and I believe it should be a standalone component. No need for it to be deeply integrated with the core for now.

[jawadrehman]

@ide I am using the https://github.com/exponentjs/react-native-invertible-scroll-view .

i can easily add new content to the top , by pushing entries to the array. how do i add new entries to the bottom ?

the only solution i have in mind is to force an update by settting the array to be empty and then resetting it to an old one. but there has to be a better way ?

looking forward to a response. thanks

[ide]

@jawadrehman open an issue on the other repo if you have trouble with it, but to answer your question you should unshift items onto your array instead of pushing them. It's the exact same as a regular scroll view, only that the pixels are flipped upside down.

[alireza-nouri]

Hey @ide can you share your work around with us?? I mean your own inverted scroll view.

[satya164]

@alireza-nouri https://github.com/exponentjs/react-native-invertible-scroll-view

[alireza-nouri]

@satya164 Thanks, It's great

[ptomasroos]

I think we should open this again, making rendering and all associated behaviours of ScrollView and ListView invertable both from vertical and horizontal mode would make ton's of sense for the react native community in terms of flexibility to construct views.

Including onRefresh and scroll events ect.

[ppsreejith]

I hope this should make it possible to efficiently prepend items to the listview. I added a boolean prop, inverted, which allows us to render items in reverse order and hence prepend efficiently.

https://github.com/ppsreejith/react-native/pull/1