React-native: Animated spring callback not called immediately after the animation finishes

[MarkOSullivan94]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: Linux 4.4
Node: 9.4.0
Yarn: Not Found
npm: 6.2.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.3.1 => 16.4.2
react-native: ^0.56.0 => 0.56.0

Description

This issue had been originally brought up back in 2015 but was never sorted https://github.com/facebook/react-native/issues/1951

There is a noticeable delay in the callback which is triggered after the animation ends, this is a major issue whenever you want to hide / show content once the animation is finished and so it would be great if this delay could be completely eliminated.

I have noticed that Animated.timing(...) does not have this delay after the animation has finished.

Reproducible Demo

I did try and get a expo snack demo working but wasn't able to.

Below is the code I use to setup the animation

let animation = Animated.timing(
            this.state.animation,
            {
                toValue: finalValue,
            }
);

animation.start(this._animationFinishCallback());

Below is the callback trigger when the animation finishes.

_animationFinishCallback = () => {
        console.log("animationFinish");
};

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[MarkOSullivan94]

Not sure if this has been fixed, would be good if one of the React Native team could clarify.

[sunnylqm]

@MarkOSullivan94 My guess is that there are still tiny bouncy movements ongoing which are difficult for a human to perceive but indeed not zero on Maths. So you may feel it already end but actually not.

After a glance at the source code here, I guess that you may try to increase restSpeedThreshold and restDisplacementThreshold of spring to make it more "immediate" to end.

[khusmann]

@sunnylqm @MarkOSullivan94 hmmm, I tried fiddling with restSpeedThreshold and restDisplacementThreshold but am not really observing an effect. There is still a delay for the callback to run after the animation stops.

[MoOx]

With something like restSpeedThreshold: 100, restDisplacementThreshold: 40 it can have a nice effect for an animation that cover an entire smartphone (eg: view swiped down to fold it a la Apple Music). Thanks for the pointer @sunnylqm

[satya164]

Spring animations take a long time to fully settle. You can't notice the animation during the end because it's too slow, but it's still happening. You should be able to verify this by adding addListener on the animated value.

Closing because it's not a bug.

[devproivansurzhenko]

@MoOx You solution works pretty perfect in my case. Thank you!