react-native-sortable-list
react-native-sortable-list copied to clipboard
data not displayed when props changes (if it has zero elements previously)
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
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', }
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,
}
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}
/>
)
}
This solved two hours of frustration for me, so thank ya'll! My solution is similar:
<View>{ data.length > 0 ? <SortableList... /> : null }</View>
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