My problem so far, is following: I'm getting Tweets from Twitter Streaming API, so new data is appended to the bottom of the ListView, however the last item is not displayed in full, ie the last line of text (Text element), and there is no way I can scroll down to see that line.
My code for rendering ListView is:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <View style={{height: 515}}>
<ListView
ref='list'
onLayout={(event) => {
var layout = event.nativeEvent.layout;
this.setState({
listHeight : layout.height
});
}}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
console.log(rowData.text);
return (
<View>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</View>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderFooter={() => {
return (
<View onLayout={(event)=>{
var layout = event.nativeEvent.layout;
this.setState({
footerY : layout.y
});
}}>
</View>
);
}}
/>
</View>
}
</View>
);
}
And in the main render function (just in case this error caused by ScrollableTabView)
render() {
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar />}
ref={(tabView) => { this.tabView = tabView; }}
>
{this.renderTwitterSearch()}
{this.renderRealtimeSearch()}
{this.renderDBSearch()}
</ScrollableTabView>
);
}
}
In case it may be the help to others, I'd post a solution: in order to make this piece of code work, I wrap ListView
and its children into ScrollView
element, so code would be as follow:
renderRealtimeSearch() {
return (
<View
tabLabel='Realtime Search'
style={{padding: 10}}
>
<TextInput
style={{height: 40}}
placeholder="Type search query..."
onChangeText={(txt) => this.setState({query: txt})}
/>
<Button
onPress={() => this.handleStreamClick()}
style={styles.buttonStyle}
title='Submit query'
/>
{this.state.isStreamOn && <ScrollView style={{height: 520}}>
<ListView
renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
style={styles.realTweetsListView}
dataSource={this.state.realtimeTweets}
renderRow={(rowData) => {
return (
<ScrollView>
<View style={styles.container}>
<Image source={{uri: rowData.avatar_url}} style={styles.photo}/>
<Text style={styles.title}>{rowData.author_name}</Text>
</View>
<View>
<Text style={styles.text}>{rowData.text}</Text>
<Text style={styles.date}>{`${rowData.date_time.week_day}, ${rowData.date_time.date}/${rowData.date_time.month}/${rowData.date_time.year} ${rowData.date_time.time} GTM`}</Text>
<Text style={styles.link}>{rowData.tweet_url}</Text>
</View>
</ScrollView>
);
}
}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
/>
</ScrollView>
}
</View>
);
}