react-native-sortable-grid
react-native-sortable-grid copied to clipboard
ollija
drag and drop fails on adding new items
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.
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>
</View> :
<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" />
<Text style={styles.addText}>add photo</Text>
</View>
</TouchableOpacity>
)
})
}
</SortableGrid>
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))