Scroll down to ScrollView in React Native

Question

I would like to find a way to programmatically scroll to the bottom of scrollView. I am aware of the scrollTo method after viewing the ScrollView source code, however I cannot find a way to measure the size of the contents of the scrollView.

After inspecting, I came across this github problem that mentions how to use the UIManager.measureX methods to measure the size of the content. However, after several attempts to search through the source code, I cannot find where these methods are used.

Can anyone point me in the right direction?

Answer 1

This was fairly concise, and I ran into the source code.

You can try the following:

required:

var RCTUIManager = require('NativeModules').UIManager; 

Render:

 <ScrollView ref = {component=>{this._scrollView=component;}}> </ScrollView> 

Event:

 someEvent: function() { RCTUIManager.measure(this._scrollView.getInnerViewNode(), (...data)=>{console.log(data)}); } 

From the data, you can get the contents of the scroll whose height is the fourth data element. Of course, you can get content bias from it. Run the source code RCTUIMananger.m for more details.

When you use getInnerViewNode , you can get the frame of the inner ScrollView frame. If you want to get a ScrollView frame, you must use React.findNodeHandle(this._scrollView) , and the ScrollView frame is not always equal to its inner view frame.

---

(updated)

If you want to replace (...data)=>{console.log(data)} with callback , you should use it like this:

 RCTUIManager.measure(this._scrollView.getInnerViewNode(), callback.bind(this)); 

Answer 2

There is a better way to do this. In wide strokes:

Use ListView to display chat.

 <ListView ref="list" ... 

Add a footer to the renderFooter list, which uses onLayout to keep its y position. The footer should not display anything visible, just an empty View . All you need is where the bottom of the list is.

 renderFooter={() => { return <View onLayout={(e)=> { this.footerY = e.nativeEvent.layout.y; }}/> }}, 

Add an onLayout handler to the ListView itself, which stores the height lists.

 onLayout={(e)=>{ this.listHeight = e.nativeEvent.layout.height; }} 

With these two bits of information, you can scroll to the bottom of the list with something like:

 if (this.listHeight && this.footerY && this.footerY > this.listHeight) { var scrollDistance = this.listHeight - this.footerY; var scrollResponder = this.refs.list.getScrollResponder(); scrollResponder.scrollWithoutAnimationTo(-scrollDistance); } 

How often you browse to the end is up to you and depends on your behavior.

An example of this in action is GiftedMessenger .

Answer 3

While RCTUIManager.measure() works by extracting the fourth element of the data array by reference, it is much more convenient (and easier) to use the following when working with ScrollViews:

RE: https://facebook.imtqy.com/react-native/docs/scrollview.html#oncontentsizechange

 onContentSizeChange={( contentWidth, contentHeight ) => { this._contentHeight = contentHeight }} 

This event will fire when internal child components complete and after the change. This works for me, and I recommend this supported approach when defining content boundaries.

Answer 4

Yo can use the scrollToEnd () method of the ScrollView:

https://facebook.imtqy.com/react-native/docs/scrollview.html#scrolltoend

According to the documentation: If it is a vertical scroll scroll down. If it's a horizontal ScrollView, scroll right.