Creating a listview with a delete option using the real life example, mixed with animation list
My issue is 'On iOS, the list rows that are hidden do not reset on ListView re-rendering process'. So i have to reset the height of the cell View which work well, but i also need to snap the view back to it's original position. Currently i am using setVelocity to a high number, which limits the animation but there is still a small delay which doesn't look nice. As you can see in the code below.
_close() {
this.refs['row'].snapTo({index: 2})
Animated.parallel([
Animated.timing(this.state._deleteRight, {
toValue: -500,
duration: 500
}),
Animated.timing(this.state._rowHeight, {
toValue: 0,
duration: 500
}),
]).start(this.removeItem)
}
removeItem = () => {
if (this.refs['row']) {
this.refs['row'].setVelocity({x: 60000})
}
this.resetHeight()
}
resetHeight() {
Animated.parallel([
Animated.timing(this.state._deleteRight, {
toValue: width - 120,
duration: 0
}),
Animated.timing(this.state._rowHeight, {
toValue: this.state._defaultHeight,
duration: 0
}),
]).start(this.props.removeFromList())
}
My question is, has anyone else come across this issue, and came to a more elegant solution ? setting the view to the snapPoint of the closed index without an animation would be a great option.
The closest issue I've seen so far is this one:
https://github.com/wix/react-native-interactable/issues/29
It might shed some light because the views are not being reset because the views are being recycled instead of recreated. This can usually be overcome by adding a new key property. You can even try to change the key property of the Interactable.View itself when you want to recreate and reset it - even something like setting it to a random number every time you want to recreate it.
In any case, your other suggestion of adding a snapTo command without animation is interesting. I don't think it will still be snapTo, but I definitely see something like changePosition that will simply change the position immediately. I'll assign it to myself for iOS..
@talkol +1 for the changePosition (without animation) feature!
Added changePosition.
Most helpful comment
The closest issue I've seen so far is this one:
https://github.com/wix/react-native-interactable/issues/29
It might shed some light because the views are not being reset because the views are being recycled instead of recreated. This can usually be overcome by adding a new
keyproperty. You can even try to change thekeyproperty of theInteractable.Viewitself when you want to recreate and reset it - even something like setting it to a random number every time you want to recreate it.In any case, your other suggestion of adding a
snapTocommand without animation is interesting. I don't think it will still besnapTo, but I definitely see something likechangePositionthat will simply change the position immediately. I'll assign it to myself for iOS..