[ListView] prepend function ?

[jawadrehman]

I would like to append stuff on a ListView, and stay on the original position

My rowHasChanged is r1.message != r2.message

Currently I unshift the new data to be appended. I have noticed sometimes it doesnt update the ListView, and I have had to tinker with the dirtyRows to force an update.

Can anyone help me achieve what I intend to ?

[brentvatne]

Can you post the code that you're using with this? Are you using cloneWithRows?

[jawadrehman]

My bad, I should have said prepend instead of append.

since its something to do with the history of messages, I first remove an item if it exists and then unshift it so that its at the top. Here's a small snippet

var chatMessages = main.state.chatMessages;
var id = messageKeys[jid];
chatMessages.splice(id, 1);
chatMessages.unshift(item);

//this is the code I am not too fond of, and would like it to be simpler
for(var i = 0, j = id; i<= j ; i++){
messageKeys[chatMessages[i].jid_id] = i ;
main.refs.ListMessageHistory.refs.listMessages.props.dataSource._dirtyRows[0][i] = true;
}
main.setState({chatMessages : chatMessages, messageKeys : messageKeys }, function(){
main.refs.ListMessageHistory._renderRows();
});

INSIDE MY _RENDERROWS function

this.setState({dataSource: this.state.dataSource.cloneWithRows(
this.props.chatMessages
)});

[marcshilling]

I'm having a similar issue. Trying to dynamically add items the beginning of my ListView, but when I call setState to update the DataSource, it doesn't work correctly. I do get a new row added (to the end), but it's just a duplicate of the last item.

Before insertion:
[A]
[B]
[C]

Then, after inserting [D] at the beginning of my DataSource array I get:
[A]
[B]
[C]
[C]

If I explicitly return true from rowHasChanged, I get the expected result:
[D]
[A]
[B]
[C]

[akabab]

had the same issue:
http://stackoverflow.com/questions/31774399/react-native-listview-how-to-push-new-rows-from-top
got to make it work with passing a new array reference (concat instead of unshift) to cloneWithRows,
but then it seems to rerender the whole list.. performance issues on large list.

[tachim]

I'm seeing the same issue, but @akabab 's concat approach doesn't work in my case.

[JonathanWi]

Any news about this? I've spent the best part of my day trying to simply unshift a new item at the top of my ListView without success. I'm having the exact same issue than @marcshilling ...

PS: @marcshilling , can you explain what you mean by "If I explicitly return true from rowHasChanged"?

[marcshilling]

@JonathanWi

When defining the ListView dataSource, literally just doing this:

dataSource: new ListView.DataSource({
  rowHasChanged: (row1, row2) => {
    //return row1 !== row2;
    return true;
  }
})

[jasonmerino]

I just ran across this same issue and switching from unshift to concat worked for me.

[rt2zz]

After playing around with this a bit, it seems that because ListView assigns keys based on row index, anytime the datasource is prepended to, it will re-render all rows. This can be fixed by assigning a row specific key to the StaticRenderer on line 346 of ListView and also setting shouldUpdate={false}.

Obviously this is not a generic solution for react-native core, but it is trivial to copy your own "StaticListView" with these two line changes to prevent row rerender. Also I do not yet have it working with sticky headers.

Perhaps I am missing something, but it appears ListView's were not designed to prepend without rerender. It would be great to get this supported, but it would require a signifigant change to the way the data source works.

[rt2zz]

Actually sticky headers work no problem: https://gist.github.com/rt2zz/d1298e7b860e0707d7b4

Note for anyone trying to use this component, it is not well though out, and may break under certain prop combination or with unorthodox datasource setups. Also the row data must have a unique id property, as this is used as the row component key.

[marcshilling]

Ok so, I think I figured out what's going on with my particular issue.

The key was closing my data first so you get a brand new object reference, and then making my changes. I'm using the lodash library to accomplish this with the function _.cloneDeep() (https://lodash.com/docs#cloneDeep), like so:

let newData = _.cloneDeep(this.state.data);
newData.unshift({name: 'Marc Shilling', avatarUrl: null});
this.setState({
  data: newData
});

My new row is now successfully being added to the top of the ListView. Maybe you guys already knew this, but hopefully I'll help someone else. Still doesn't solve the issue of causing the entire list to be re-rendered though, since with the addition of the new row obviously everything is shifted by 1.