React Native - How to measure size of content in ScrollView?

Question

I want to measure the size of the content in my ScrollView.

Therefore, I am using measure from NativeMethodsMixin:

import NativeMethodsMixin from 'NativeMethodsMixin'

I am not quite sure where to go from here, most SO posts relating to this issue seem to be outdated.

I understand that I need to create a ref to my ScrollView (which I did and called _scrollView, I can access it using this.refs._scrollView).

Problem is, I can't just pass in this.refs._scrollView into measure like so:

NativeMethodsMixin.measure(this.refs._scrollView, (data) => {
  console.log('measure: ', data)
})

I am getting the following error then:

ExceptionsManager.js:61 findNodeHandle(...): Argument is not a component (type: object, keys: measure,measureInWindow,measureLayout,setNativeProps,focus,blur,componentWillMount,componentWillReceiveProps)

I then tried to retrieve the actual node handle using findNodeHandle and pass it into measure as discussed in this github issue:

const handle = React.findNodeHandle(this.refs._scrollView)
NativeMethodsMixin.measure(handle, (data) => {
  console.log('measure: ', data)
})

But this results in the same error. Any ideas?

Answer 1

ScrollView defines a prop called onContentSizeChange:

<ScrollView
  onContentSizeChange={(width, height) => {
    console.log(width, height);
  }}>
  {content}
</ScrollView>

Answer 2

NativeMethodsMixin.measure.call(elementToMeasure, (x, y, width, height) => {
  ...
});