Performance

[i8wu]

I'm trying to use this module with a simple text listview, but the performance is still not very good. On Android and iOS the movement is choppy. (Even with jsdev turned off for android) Any tips on improving performance?

[gitim]

For performance improving you should add shoudlComponentUpdate into your component, that is rendered in renderRow function.

[gitim]

Also there is another way to improve performance, we can switch back to LayoutAnimation while animating rows swapping, I switch from it to js-animation, because it was buggy on android.

[i8wu]

Wouldn't modifying shouldComponentUpdate for the row cause it not to actually move around onscreen? (Haven't actually tried it yet so don't quote me)

[gitim]

Seems, you didn't understand me.

You should implement shouldComponentUpdate inside MyRow component:

<SortableList
  style={styles.list}
  contentContainerStyle={styles.contentContainer}
  data={data}
  renderRow={({data, active, disabled}) => <MyRow data={data} active={active} disabled={disabled} /> } />

[i8wu]

Oh, well in that case my row component shouldn't be re-rendering at all. It's a very dumb component:

const SavedItem = ({ data, active }) => (
    <TouchableOpacity>
        <Icon
            name="ellipsis-v"
            size={20}
        />
        <Text>
            {data.name.trim()}
        </Text>
    </TouchableOpacity>
);

[srameshr]

@gitim Ive got the same problems too. My renderRow returns a class with just a Text. Could you be more elaborate about how do I fix perf issues?

[gitim]

@gitim Ive got the same problems too. My renderRow returns a class with just a Text. Could you be more elaborate about how do I fix perf issues?

Strange, how many entries in your list component?

[srameshr]

Hey!

This is my state:

this.state.data = {
  a: {
    index: 'a'
  },
  b: {
    index: 'b'
  }
}

Now when I want to update my object, I do this:

this.setState({
  data: {
    ... this.state.data,
   [key]: {
      index: key
    }
  }
});

This causes the whole list to re-render. All the rows flash. Looks bad. I even tried shallow update it did not work. Can you tell me how do I fix this? How to add new items without re rendering.

[gitim]

Well, we talk about different things, I talked about performance of the component.

As regards to your question

How to add new items without re rendering.

I answered to this question here https://github.com/gitim/react-native-sortable-list/issues/47, looks possible to implement this heuristic, but I have not implemented it yet. Will try to take a look on it this week.

[srameshr]

@gitim Looking forward to it. I tried it with this.forceRender() by setting my state like this:

this.state[key] = {
  index: key
}

But it did not work.

[nixvalentine]

Any progression on this so far? This "flashing-the-whole-list" is killing me all day. My newbie skill could not help me at all digging around to try to fix it. I am using this for my to-do app, change a bit of Sortable List to accept child button and check box. Worked nicely until I saw the Flashing nightmare. T~T

[srameshr]

@nixvalentine No! It still flashes. The whole state object gets updated because we are reassigning it.

[nixvalentine]

@srameshr I am currently trying this one https://github.com/deanmcpherson/react-native-sortable-listview. It seems it does not have the flashing problem but I've still yet finished implementing.

[srameshr]

@nixvalentine I need horizontal scrolling list. Does it support that?

[srameshr]

@nixvalentine Also let me know how it fares.

[Shark900]

@srameshr I had a similar problem.

My structure looks like the following:

this.state.data = [
  {
    index: 'a'
  },
  {
    index: 'b'
  }
];

Now i also tryed to update my code:

var data = [...this.state.data]; 
var pos = data.findIndex((item) => item.index === 'a');

if (pos !== -1) {
    data[pos] = {
        ...data[pos],
        changedSomething: true
    };

    this.setState({ data });
}

By changing this line var data = [...this.state.data]; to this var data = this.state.data; fixed the problem for me.