React Native - Get height of current component, inverted scroll view - ios

Question

I'm currently writing an application on react-native version 0.7.1. I'm attempting to write a chat component.
With chat, you usually have the text input at the bottom and messages get pushed from the bottom to the top of the screen. Also, when the chat screen initializes, it initializes at the bottom of the screen and allows the user to scroll up. I would like to implement the same behavior in react-native. The current behavior of the ScrollView pushes items from the top to the bottom. I've attempted a few different solutions to this:
The first solution involves attempting to measure the ScrollView component. The concept is, if I know the height of the view, I can this.refs.messages.scrollTo(contentHeight). Some people mentioned the following function: this.refs.messages.measure(callbackWithTheseParams((a, b, width, height, px,py )). But the measure function turns out to be undefined.
The second method involved the package https://www.npmjs.com/package/react-native-invertible-scroll-view. This package actually sorted my data correctly too (reverse). You can think about it like flipping the pixels on the screen so that (0,0) is the bottom. This allows me to call scrollTo(0,0). However, seems like this functionality is only available in the 0.8.0-rc. Which I'm not sure is stable (or as stable rather).
EDIT - Adding Example
My constructor:
componentDidMount() {
this.measureComponent()
}
// measureComponent
measureComponent() {
console.log('this gets called');
this.refs.messages.measure((ox, oy, width, height) => {
console.log(height); // does not get called.
});
}
My render function is:
return (
<ScrollView
scrollEventThrottle={200}
ref="messages"
style={styles.container}>
<View style={styles.messages}>
{messages.map(this.renderMessage)}
</View>
<TextInput
style={styles.newMessage}
value={this.state.message}
onSubmitEditing={this.sendMessage}
onChangeText={(text) => this.setState({message: text})} />
</ScrollView>
);

Answer 1

I'm not sure if there is an easier way to get the height of a ScrollView, but I did notice this in the React Native source code for ListView (/Libraries/CustomComponents/ListView/ListView.js):
_measureAndUpdateScrollProps: function() {
var scrollComponent = this.getScrollResponder();
...
RCTUIManager.measureLayout(
scrollComponent.getInnerViewNode(),
React.findNodeHandle(scrollComponent),
logError,
this._setScrollContentLength
);
...
},
_setScrollContentLength: function(left, top, width, height) {
this.scrollProperties.contentLength = !this.props.horizontal ?
height : width;
},
Which gets either the height or the width depending on if the horizontal property is set. RCTUIManager is part of the native modules module (require('NativeModules').UIManager).

Answer 2

this will probably turn out undefined if you did not bind the function in the constructor.
this.refs.messages.measure(callbackWithTheseParams((a, b, width, height, px,py )).
try something like:
_measureFunc() {
this.refs.MESSAGES.measure((ox, oy, width, height) => {
setState ({ h: height });
});
}
For example this would be your messages component:
<View ref='MESSAGES' ></View>
then add bind (placed in constructor):
this._measureFunc = this._measureFunc.bind(this);