react-native-sortable-list icon indicating copy to clipboard operation
react-native-sortable-list copied to clipboard

data not displayed when props changes (if it has zero elements previously)

Open Abenezer opened this issue 6 years ago • 5 comments

data not updated when props changes. i am currently using react-redux .. but other components and the console shows the updated data. console.log(this.props.data); // shows the data <SortableList style={styles.list} contentContainerStyle={styles.contentContainer} data={this.props.data} renderRow={this._renderRow} /> it seems the rows component 's render method is called but nothing is rendered

Abenezer avatar May 08 '18 14:05 Abenezer

i think i figured it out.. it has to do with the height of contentContainer ..it is set up relative to the content (rows).. so if rows were initially zero the height will be zero and nothing will show up even when new content are added.

my workaound is always to initilize the data with at least one element and make contentContainer flex contentContainer: { width: window.width, flex: 1, flexDirection:'column', }

Abenezer avatar May 08 '18 15:05 Abenezer

My first comment :) After few hours i found solutions. Your comment help me a lot. I changed style and method of load elements. I add one static element in state to array and remove it before load next.

constructor(props) {
   super(props);
   this.state = {
      buttons: [{
        id: 0,
        name: 'name',
      }]
   }
}

load elements in componentDidMount:

...
this.state.buttons = new Array();
this.state.buttons = this.state.buttons.concat(item);
this.setState({ buttons: this.state.buttons });

style:

contentConcatiner: {
   width: window.width,
   flexGrow:1,
}

Zummek avatar Jun 01 '18 11:06 Zummek

Just bumped into this, I would say the cleanest way is to only mount the list if at least on element is available.

render() {
  if (Object.keys(this.props.data).lenght === 0) return null 

  return (
      <SortableList
        style={{ flex: 1 }}
        data={this.props.data}
        renderRow={this._renderRow}
      />
  )
}

Fsarmento avatar Aug 08 '18 12:08 Fsarmento

This solved two hours of frustration for me, so thank ya'll! My solution is similar:

<View>{ data.length > 0 ? <SortableList... /> : null }</View>

robert-sjoblom avatar Apr 09 '19 14:04 robert-sjoblom

thank you! I had the same problem where I had a list and then added a new entry, which never appeared. This gets the new one to appear, however when I do it does, sorting fails because 'nextRowLoayout.height' is undefined. This causes the next attempt to add a row to also fail

markpothers avatar Jan 25 '20 19:01 markpothers