I have a data which is rendered as view and came across a issue on how to remove that particular index which is swiped
I have used FlatList as follows
render() {
this.leftOpenValue = Dimensions.get('window').width;
this.rightOpenValue = -Dimensions.get('window').width;
return (
<FlatList
data = {data}
keyExtractor = {data => data.id}
renderItem={ ({item}) => (
<View style={styles.container}>
<SwipeView
disableSwipeToRight = {false}
renderVisibleContent={() =>
<View>
<Text style={styles.text}> {item.title} </Text> // This repeats 9 times (9 Index)
</View>
}
renderRightView={() => (
<View style={{flex:1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'red'}}>
</View>
)}
leftOpenValue = {this.leftOpenValue}
rightOpenValue = {this.rightOpenValue}
onSwipedLeft={() => alert("deleted")}
swipeDuration = {300}
swipeToOpenPercent = {40}
disableSwipeToRight = {true}
/>
</View>
)}
/>
);
I have used Swipeview to swipe (react-native-swipeview) and delete the index in flatlist
I have an issue on how to remove an item from flatList
General pattern is to pass a uniquely identifiable id
(key, index, etc...) to your delete handler and filter your data on values that don't equal that key. This returns a new array without that entry to store in state.
deleteItemById = id => {
const filteredData = this.state.data.filter(item => item.id !== id);
this.setState({ data: filteredData });
}
render() {
...
return (
<FlatList
data={data} // Assuming this is `this.state.data`
keyExtractor={({item}) => item.id}
renderItem={({item}) => (
<View style={styles.container}>
<SwipeView
...
onSwipedLeft={() => this.deleteItemById(item.id)}
...
/>
</View>
)}
/>
);
}
Using a curried handler. This saves using an anonymous callback by setting the callback to be an event handler with the id
enclosed in the function scope.
deleteItemById = id => () => {
const filteredData = this.state.data.filter(item => item.id !== id);
this.setState({ data: filteredData });
}
render() {
...
return (
<FlatList
data={data} // Assuming this is `this.state.data`
keyExtractor={({item}) => item.id}
renderItem={({item}) => (
<View style={styles.container}>
<SwipeView
...
onSwipedLeft={this.deleteItemById(item.id)}
...
/>
</View>
)}
/>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With