drag and drop fails on adding new items

[Thanmai-C]

In Drag-and-drop -style rearrangable grid view, Drag-and-drop works fine as far as it is assigned with items prior. But drag and drop doesnot work if i try to add new items to it dynamically. Please help with a solution.

[mayursolanki26]

render item drag and drop <SortableGrid key={"sortableGrid"} style={{ margin: 10,flex:1}} itemsPerRow={3} dragActivationTreshold={100} ref={'SortableGrid'} dragStartAnimation={this.getDragStartAnimation()} onDragRelease={(item, index) => this.onDragRelease(item, index)} onDragStart={() => this.startCustomAnimation()}

{ this.state.media.map((item, index) => { return ( item !== "empty" ? <View style={{ height: 106, width: 106, alignSelf: "center" }} key={unique-key-${index}}> <Image source={{ uri: item.image_id === "" ? item.thumbnail : item.image }} style={{ width: 100, height: 100, borderRadius: 20, alignSelf: "center", borderColor: '#ababab', borderWidth: 2 }} /> <TouchableOpacity style={[styles.Indicator, { borderWidth: 1, borderColor: "#ababab", borderRadius: 10, backgroundColor: "#FFF" }]} onPress={() => this.removeMedia({ item, index })}> <Image source={require("../../assets/images/error.png")} style={{ height: 20, width: 20, alignSelf: "center", }} resizeMode="contain" /> : <TouchableOpacity onPress={() => this.getImageOrVideo(index)} key={key-${index}} inactive={true}> <View style={[styles.cellEmptyImg, { alignSelf: "center" },]}> <Image source={require("../../assets/images/button.png")} style={{ height: 50, width: 50, }} resizeMode="cover" />

add photo

) }) }

[mayursolanki26]

create array for sortable list. for (var i = 0; i < 6; i++) { if (res.Results[i] !== null && res.Results[i] !== "" && res.Results[i] !== undefined) { let count = 1 this.setState({ count: count }) data.push(res.Results[i]) tempData.push(res.Results[i]) } else { data.push("empty") } if (this.state.count === 1) { this.setState({ disabled: false }, () => console.log(this.state.disabled)) } } this.setState({ media: data, loading: false, tempImageArray: tempData }, () => console.log("verified photos =====>", this.state.media))