jshanson7
When re-rendering a ListView of Swipeables after removing an item that is opened, the next item renders open
I have a ListView where each item is a Swipeable. Each one has a leftButton that removes the item from the list. When the ListView is re-rendered, the following item starts open. The ListView is recreated in render(), triggered by state change from redux.
What could be causing this?
Same issue with @zznull, not worked to set currentlyOpenSwipeable as null, and the ListView is re-rendered after deleted on item.
@zznull Are you resolved this issue? I fixed it to use recenter() function.
For example as swipeable-example.js in current project, it not worked if you just set this.state.currentlyOpenSwipeable as null, but it worked to use this.state.currentlyOpenSwipeable.recenter();
Same issue with @zznull. I also fixed it with a recenter function
@PanRu Thanks, I fixed this bug by your method here is my example:
_renderItem = () => {
const { currentlyOpenSwipeable } = this.state;
const rightButtons = [
<TouchableOpacity onPress={() =>
this.state.currentlyOpenSwipeable.recenter();
}>
<Text style={styles.delete}>delete</Text>
</TouchableOpacity>
];
const onOpen = (event, gestureState, swipeable) => {
if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
currentlyOpenSwipeable.recenter();
}
this.setState({ currentlyOpenSwipeable: swipeable });
};
const onClose = () => currentlyOpenSwipeable.recenter();
return (
<View>
<Swipeable
rightButtons={rightButtons}
onRightButtonsOpenRelease={onOpen}
onRightButtonsCloseRelease={onClose}>
</Swipeable>
</View>
)
}
by the way, English is not my first language :)
just add key prop and it works.
for example:
return (
<Swipeable
key={id}
rightButtons={rightButtons}
onRightButtonsOpenRelease={onOpen}
onRightButtonsCloseRelease={onClose}>
</Swipeable>
)
