React Native ListView renderRow method not firing with proper dataSource - arrays

Question

I have been using React Native for some time now and I have never had this problem before. Perhaps because usually my data object is in-fact an object where as currently it is an array of objects. It is crucial that it remains an array so that I can maintain the correct order. This is for a messenger app so once I have sorted the messaged by date I NEED it to stay that way.
The Problem
The new message in the conversation will NOT render! I use REDUX/Firebase to sync with my remote DB and when I send a message through the app I am listening for the new messages and then updating the state. I am not using the child_appended event but the value event because I want the entire inbox of messages on a change. All of this happens correctly and without errors.
The dataSource object in state updates just fine, I can do a row count and see that it updates correctly. I can also look to the last object in the incoming array and see my current message just added with the right text and date. However when stepping through the renderMessageRow function, I can see that every row renders EXCEPT the new row. WTF... When I pause or print inside this row rendering function, the parameters just stop at the object right before the new message. However, the real fun begins when I print out this.state.dataSource from inside the renderMessageRow method. When you do this, THE NEW MESSAGE IS RIGHT THERE!! I can see it and the row count shows it has increased by one in the dataSource object. lol
I have tried changing this implementation so many ways, adding in a ton of slices or spread operators to make sure it's not the same array going in as it was previously in state before the change. Nothing is working. What's weirder is that this operation worked fine before I changed the dataSource coming in from REDUX from an object of objects (can't maintain order) to an array of objects. When it was an object of objects the new message always showed up just in random places throughout the list...
The Code
export default class SingleConvoView extends Component {
//rN Lifecycle ----------------------
constructor(props) {
super(props);
this.dataProtocol = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
conversationListViewHeight: 0,
dataSource: this.dataProtocol.cloneWithRows(this.props.messages),
};
}
componentWillReceiveProps(nextProps, nextState) {
if(deepEqual(this.props.messages, nextProps.messages, {strict: true}) === false) {
//This fires every time the REDUX state changes without any problems at all
//The messages property here has the new message appended to it
//The row count shows 1 more showing than before sending the message
this.updateDataSource(nextProps.messages);
}
}
componentDidReceiveProps(nextProps, nextState) {
//Tried this just incase, didn't work, commented out...
//this.state.dataSource.rowShouldUpdate('s1', (nextProps.messages.length - 1));
}
render() {
return (
<View style={[
styles.container,
{
width: this.props.display.width,
height: this.props.display.height,
}
]}>
{ this.renderConversation() }
</View>
);
}
renderConversation() {
if(this.state.dataSource.getRowCount() > 0) {
return (
<View style={{ height: (this.props.display.height - headerBarHeight - 50) }}>
<ListView
onLayout={event => {
// console.log('on layout event: new content size is: ', event.nativeEvent.layout.height);
this.setState({ conversationListViewHeight: event.nativeEvent.layout.height });
}}
onContentSizeChange={(newWidth, newHeight) => {
let totalContentHeight = newHeight - this.state.conversationListViewHeight + headerBarHeight;
if(this.state.conversationListViewHeight === 0 || newHeight < this.state.conversationListViewHeight) totalContentHeight = 0;
this.conversationScrollViewRef.scrollTo({ x: 0, y: totalContentHeight, animated: false });
}}
scrollEnabled={true}
removeClippedSubviews={false}
dataSource={this.state.dataSource}
renderRow={this.renderMessageRow.bind(this)}
pageSize={this.state.dataSource.getRowCount()}
ref={ref => { this.conversationScrollViewRef = ref; }}
renderScrollComponent={this.renderScrollComponent.bind(this)} />
</View>
);
} else {
return null;
}
}
renderScrollComponent(props) {
return (
<ScrollView
contentContainerStyle={{ paddingBottom: 20 }}
style={[
styles.conversationBox,
{ width: this.props.display.width - mainContainerSideMargins }
]} />
);
}
renderMessageRow(message, sectionID, rowID, highlightRow) {
let messageUser = message.userMessage ? 'You' : (this.props.senderFirstName || 'no name'),
messageTime = '', messageTitle = '';
if(message.hasOwnProperty('created')) {
let currentSentDate = new Date(message.created);
messageTime = `${currentSentDate.toLocaleDateString('en-US', DATE_DISPLAY_OPTIONS)}`;
}
messageTitle = message.userMessage ? `${messageTime}: ${messageUser}` : `${messageUser}: ${messageTime}`;
return (
<View style={styles.messageRow}>
<Text style={[
bodyFontStyle,
styles.messageOwnerHeader,
{
color: message.userMessage ? brand_blue_color : primary_color,
alignSelf: message.userMessage ? 'flex-end' : 'flex-start',
}
]}>
{ messageTitle }
</Text>
<View
shadowRadius={2}
shadowOpacity={1}
shadowColor={'rgba(0, 0, 0, 0.4)'}
shadowOffset={{width: -1, height: 1}}
style={styles.messageBodyContainer}>
<Text style={[
styles.messageBody,
{ textAlign: message.userMessage ? 'right' : 'left' }
]}>
{ message.body }
</Text>
</View>
</View>
);
}
//Functionality ---------------------
updateDataSource(data) {
if(typeof data != 'undefined' || data != null) {
let tempData = data.slice();
this.setState({
dataSource: this.state.dataSource.cloneWithRows(tempData),
});
}
}
}

Answer 1

I have solved this for now by adding in the initialListSize prop as well. I can't imagine this being the permanent solution however since no one else has responded I am answering this for Google searchers. If anyone else gives a better answer I will remove this and give them the credits.
renderConversation() {
if(this.state.dataSource.getRowCount() > 0) {
return (
<View style={{ height: (this.props.display.height - headerBarHeight - 50) }}>
<ListView
onLayout={event => {
this.setState({ conversationListViewHeight: event.nativeEvent.layout.height });
}}
onContentSizeChange={(newWidth, newHeight) => {
let totalContentHeight = newHeight - this.state.conversationListViewHeight + headerBarHeight;
if(this.state.conversationListViewHeight === 0 || newHeight < this.state.conversationListViewHeight) totalContentHeight = 0;
this.conversationScrollViewRef.scrollTo({ x: 0, y: totalContentHeight, animated: false });
}}
initialListSize={this.state.dataSource.getRowCount()}
scrollEnabled={true}
removeClippedSubviews={false}
dataSource={this.state.dataSource}
renderRow={this.renderMessageRow.bind(this)}
pageSize={this.state.dataSource.getRowCount()}
ref={ref => { this.conversationScrollViewRef = ref; }}
renderScrollComponent={this.renderScrollComponent.bind(this)} />
</View>
);
} else {
return null;
}
}