Animated.View does not change position called with timing until I do not force rerender.

Hi, I have been struggling with some problem.

I have an idea of taking “block” and drag it to other place, but with possibility to undo this action and revert the action (confirmed on modal). Unfortunately block does not move until I force change on transform prop by changing state of some value.

Code for calling undo action

undoDragging = () => {
        // This forces re-render and not denies queued animations.
        this.setState(
            ({ verticalScrollOffset }) => ({
                animating: true,
                verticalScrollOffset: verticalScrollOffset ? 0 : 1,
            }),
            () => {
                timing(this.Y, timingAnimationConfig(500, 0)).start();
                timing(this.X, timingAnimationConfig(500, 0)).start();
            },
        );
    };

<Animated.View
    style={[
        {
            transform: [
                { translateY: verticalScrollOffset },
                { translateY: this.Y },
                { translateX: this.X },
            ],
        },
    ]}
>

Unless I do not call this setState for changing verticalScrollOffset Block will never move.

Another problem is that block sometimes is going back in one direction or another 😄 and it’s really annoying 😄

GIF

P.S. Without changing verticalScrollOffset on setState block will never move. Of course moving block is implemented in PanGestureHandler

        this.panHandler = event([
            {
                nativeEvent: ({ translationX: x, translationY: y, state, absoluteX, absoluteY }) =>
                    animationBlock([
                        condition(eq(state, GestureState.ACTIVE), [
                            set(this.X, multiply(round(divide(add(x, this.offsetX), columnWidth)), columnWidth)),
                            set(this.Y, add(y, this.offsetY)),
                        ]),
                    ]),
            },
        ]);

[osdnk]

@dsznajder I’va handled to fix your case. I’m extremely thankful to you since your issue have realised me that maybe not everything in reanimated is very clear and understandable.

So firstly let you see the code: https://gist.github.com/osdnk/4a5b3d2237c4c4558c8d3280a50eb118

Maybe not everything is clear so I hasten to explain:

The first problem is this.panHandler function. To understand it properly please realised it’s not a real function but set of animated values which are being updating. So if you call this method only onGestureEvent the state will always be active. Why is it a problem? If we update something in block which is result of the function, the whole block is being reevaluated and it might provide to unwanted effects (e.g. your timing animation was probably working withouts forcing update, but it was immediately overriding by setters from onGestureEvent 😅 ). So I merged onHandlerStateChange with onGestureEvent and it appears to work.

[chillios-ts]

@osdnk Here you have snack demo: https://snack.expo.io/ByfLIepJ4

If you first setState here:

undoDragging = () => {
        // This forces rerender and not denies queued animations.
        this.setState(
            ({ verticalScrollOffset }) => ({ animating: true, verticalScrollOffset: verticalScrollOffset ? 0 : 1 }),
            () => {
                timing(this.opacity, timingAnimationConfig(250, 1)).start();
                timing(this.Y, timingAnimationConfig(300, 0)).start(() => {
                    setTimeout(() => {
                        this.blockContainer.setNativeProps({ style: { borderLeftColor: "green" } });
                        this.setState({ animating: false });
                    }, 300);
                });
                timing(this.X, timingAnimationConfig(300, 0)).start();
            },
        );
    };

The block stops animating back 😃 I hope this helps.

P.S. Android and iOS works differently, sometimes iOS works but Android don’t.