React-native-interactable: snapTo no animation,

Created on 13 Apr 2017  路  3Comments  路  Source: wix/react-native-interactable

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.

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 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..

All 3 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

iremlopsum picture iremlopsum  路  7Comments

m10653 picture m10653  路  4Comments

BogdanRad picture BogdanRad  路  4Comments

yoavrofe picture yoavrofe  路  4Comments

dmitryusikriseapps picture dmitryusikriseapps  路  3Comments