Emmett Harper Emmett Harper - 6 months ago 28
Android Question

Container Size not being reported correctly from RCTUIManager.measure and onLayout

Good afternoon,

I am trying to programmatically scroll a ScrollView that holds a view container that is larger than the ScrollView in true size. However the ScrollView needs to cut off the container at a predetermined size. So if the ScrollView height is 600px and the container size is 1000px then I need access to the 1000px so I can scroll fluidly programmatically. This issue was solved on github for another developer here but this doesn't seem to be working for me. Here is what I have tried:

<ScrollView>
<View onLayout={(event) => {console.log(event.nativeEvent.layout);}>
...
</View>
</ScrollView>


Attempt 1: Put an onLayout callback in both the scrollView and the inner View and use the innerViews layout height.
Result: This didn't work both the ScrollView and inner View are reporting a height of 600.

Attempt 2: Save reference to the ScrollView and then call RCTUIManager's measure function at a later point like so:

RCTUIManager.measure(this.refs.scrollView.getInnerViewNode(), (...data)=>{console.log(data)});


Result: This didn't work either, the innerViewNode is reporting a container height (4th parameter in data) of 600 again.

Anyone have a difference solution to receiving the container height? I am definitely putting a 1000ish px view within a 600ish px scroll view and when I scroll programmatically say 100px, I can see that the content is actually bigger than the ScrollView wrapper.

Thanks for any help anyone can provide!

Answer

Here is a solution I found to work:

<ScrollView>
     {{...components of variable length...}}
     <View key="bottomMarker" onLayout={() => {console.log(event.nativeEvent.layout.y)}}></View>
</ScrollView>

By using the View as a marker for the bottom, you can find the location of the bottom of the scroll view.