SortableList sometimes does not render at all.

[DigohD]

Hello!

I have encountered a bizarre issue where the sortable list fails to render about 10% of the time. The parent component does render, and I know this since I have a test tag before the list which is rendered correctly. The data passed to the list is the same every time and does not change. The data is simply an array containing 6 numbers. Any ideas?

<SortableList style={layoutStyles.wrapper} contentContainerStyle={layoutStyles.contentWrapper} data={testData} renderRow={this._renderRow} renderFooter={this._renderFooter} sortingEnabled={this.state.isSorting}/>

[gitim]

HI! SortableList requires data to be object, try to pass object.

[KhalilKhalaf]

I am having the same problem, and I could not find the pattern to reproduce still. Sometimes I feel it renders fine when I step through the code (component life cycle).

P.S data is an object.

[DigohD]

Thanks! Passing an object instead of an array makes no difference as far as I can tell though. About 10% of the time the list simply does not render. The random nature of the issue makes it near impossible to reproduce indeed. It's a shame, since the 90% of times it is working, it is excellent.

[luisfuertes]

I report it here

I try to fix but cant find the error. I think is something with local variables.

The failing function is:

 _onUpdateLayouts() {
    Promise.all([this._footerLayout, ...this._rowsLayouts])
       .then(([footerLayout, ...rowsLayouts]) => {
           // <----- SOMETIMES DONT ENTER HERE
    });
}

Dont resolve the promise sometimes.

[gitim]

could you try version from this branch https://github.com/gitim/react-native-sortable-list/tree/fix

[luisfuertes]

SyntaxError /react-native-sortable-list/src/SortableList.js "nextOrder" is read-only

Line 88: Change const {data: nextData, order: nextOrder} = nextProps; to let {data: nextData, order: nextOrder} = nextProps; and works.

It seems that now it does not happen, I'll try more

[gitim]

SyntaxError /react-native-sortable-list/src/SortableList.js "nextOrder" is read-only

fixed

[DigohD]

I now get: "undefined is not an object (Evaluating this.props.order.forEach)" in componentWillMount()

[luisfuertes]

I now get: "undefined is not an object (Evaluating this.props.order.forEach)" in componentWillMount()

Yes, same problem

[gitim]

I now get: "undefined is not an object (Evaluating this.props.order.forEach)" in componentWillMount()

it is bug, we should iterate over state.order there, fixed

[luisfuertes]

Updated to

  componentWillMount() {

    this.props.order && this.props.order.forEach((key) => {
      this._rowsLayouts[key] = new Promise((resolve) => {
        this._resolveRowLayout[key] = resolve;
      });
    });

and now:

[DigohD]

It should be this.state.order right?

this.state.order.forEach((key) => {
      this._rowsLayouts[key] = new Promise((resolve) => {
        this._resolveRowLayout[key] = resolve;
      });
    });

But then I get: (Undefined not an object: rowsLayouts[key].height) on line 219

[gitim]

I should be this.state.order right?

yes

But then I get: (Undefined not an object: rowsLayouts[key].height) on line 219

strange, Basic example seems works fine

[gitim]

try to log rowsLayouts in 218 line, it should contain layouts for row keys

[luisfuertes]

I fixed it wiht:

  componentWillMount() {

    let order = this.getOrder()

    order.forEach((key) => {
      this._rowsLayouts[key] = new Promise((resolve) => {
        this._resolveRowLayout[key] = resolve;
      });
    });

    if (this.props.renderFooter && !this.props.horizontal) {
      this._footerLayout = new Promise((resolve) => {
        this._resolveFooterLayout = resolve;
      });
    }
  }

  getOrder() {
    let order = []
    if(this.props.order) {
      order = this.props.order
    } else {
      Object.keys(this.props.data).forEach((key, i) => {
        order.push(i.toString())
      })
    }
    return order
  }

If dont receive order by props, generate new order