React Native - Get height of current component, inverted scroll view
I am currently writing an app based on react version 0.7.1
. I am trying to write a chat component.
In chat, you usually enter text at the bottom, and messages are displayed from bottom to top at the top of the screen. Also, when the chat screen is initialized, 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 ScrollView pushes items from top to bottom. I tried several different solutions:
- The first solution involves trying to measure the ScrollView component. Concept: if I know the height of the view, I can
this.refs.messages.scrollTo(contentHeight)
. Some people have 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 included the package https://www.npmjs.com/package/react-native-invertible-scroll-view . This package did indeed sort my data correctly (reverse). You can think of it like clicking pixels on the screen so that (0,0) is bottom. This allows me to call
scrollTo(0,0)
. However, it looks like this feature is only available in version 0.8.0-rc. Which I am not sure is stable (or how stable rather).
EDIT - Adding an 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:
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>
);
source to share
I'm not sure if there is an easier way to get the height of the ScrollView, but I noticed 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 height or width, depending on whether the property is set horizontal
. RCTUIManager
is part of the native modules module ( require('NativeModules').UIManager
).
source to share
this will probably end up being undefined unless you chained 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 message component:
<View ref='MESSAGES' ></View>
then add bind (placed in constructor):
this._measureFunc = this._measureFunc.bind(this);
source to share