Re-renders entire view when adding/removing rows

[jlo1]

If I add a new row to :data, the entire list view will re-render. Any plans to support just rendering the rows that have changed, as opposed to the entire list view?

[gitim]

I didn't think about it. Though I think it is possible to render only new rows after adding record at the end of the data, but if a new element is not the last re-render is required, because layouts of rows below the new row changed.

[srameshr]

@gitim

+1 for this. As and when I update the data the whole component get re-rendered. I see all slides flash when there is new data insertion or deletion.

PS: I do add the data at the end.

constructor(props) {
    super(props);
    this.state = {
      slidesData: {}
    };
  }
onNewSlideAdded(image) {
    this.setState({
      slidesData: { ...this.state.slidesData,
        [Object.keys(this.state.slidesData).length]: { image: image.pic.uri } } // "1": {image:'url'}
    });
  }

[Redfard]

I had to solve the problem with blinking when deleting an item. Perhaps the solution is suitable for adding items.

In SortableList.js

in componentWillReceiveProps method in setState remove rowsLayout

            this.setState({
                animated: false,
                data: nextData,
                containerLayout: null,
                //rowsLayouts: null,
                order: nextOrder
            });

in _renderRows method change "onLayout" prop
onLayout={this._onLayoutRow.bind(this, key)}

In Row.js

and I think that it is necessary to add a check in method _onLayout so that the callback does not always work

    _onLayout = (e) => {
        if (this.props.onLayout && !this._active) {
            this.props.onLayout(e);
        }
    };

Perhaps in this solution there are bad consequences, but everything is working correctly for me.

[rammi44]

deleteNote(key) {
this.state.todoItemArray.splice(key, 1);// This will remove the element at index, and update this.state.todoItemArray with new array
this.setState({ todoItemArray: this.state.todoItemArray });
}

After this it doesnt renderRow.. data coming in renderRow as undefined.. I am doing anything wrong. but there is a data in the state.todoItemArray..

[JustinRohweller]

For anyone still looking for a solution to the flash when deleting items: a solution that worked for me was in SortableList.js in componentWillReceiveProps replace the entire setState with:
if (nextData.length > data.length) {
this.setState({
animated: false,
data: nextData,
containerLayout: null,
rowsLayouts: null,
order: nextOrder
});
} else {
this.setState({
// animated: false,
data: nextData,
// containerLayout: null,
// rowsLayouts: null,
order: nextOrder
});
}

[piersolenski]

Any chance of seeing this fix in the next release?

[gitim]

released the fix from #139