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

[gitim]

@luisfuertes this commit e99beff should fix it

[DigohD]

Logged rowsLayouts and it prints an empty object {}

Android, Samsung Galaxy Note 3, in case it is relevant.

[luisfuertes]

Yes, @gitim your commit fix it too

[DigohD]

If I pass an array as the data it works.

// This data causes the error, but worked with master-branch version
const testData = {
	data1: 0,
	data2: 1,
	data3: 2,
	data4: 3,
	data5: 4,
	data6: 5,
};

// This data works
const testData2 = [0, 1, 2, 3, 4, 5];

The list seems tor render every time now. Tried it about 100 times. Thanks!

[gitim]

Logged rowsLayouts and it prints an empty object {}

it is strange how it crashes on 219 line, because for empty object, Object.keys(rowsLayouts) returns empty array and forEach will not iterate at all.

[DigohD]

I am new to React Native and Javascript in this kind of context so I might have messed something up. But weird indeed, the for loop should not iterate over an empty object. The array works fine though., so its probably something in the rest of my code that screws it up. Maybe my row items?

[gitim]

@DigohD I fixed it, stupid bug :(

[DigohD]

Confirmed working!

Thanks for the help and for providing this great module!

[gitim]

Cool, will publish a new version very soon!

[gitim]

released 0.0.15

[luisfuertes]

Thanks! Good job.

My last suggestion is that apply scrollView style prop, for set padding.

If you add padding to container, rows dont render above container view. Need add to scrollView style.

Regards

[gitim]

@luisfuertes

My last suggestion is that apply scrollView style prop, for set padding.

If you add padding to container, rows dont render above container view. Need add to scrollView style.

contentContainerStyle prop is exactly what you need, isn't it?

[luisfuertes]

Oh yes i dindnt see, sorry

[KhalilKhalaf]

Guys thanks for your good work. So how can I update my local version so that I get this fix?

[gitim]

just update to 0.0.15

npm i --save react-native-sortable-list@0.0.15

[ArturGraefenstein]

still have this bug.

[afizboltz]

yup, still got this problem.