React Native - Animated.spring Blinks When Reverting The Animation

In my react native app I'm trying to create a drawer. When I click a button it should open, and that works perfectly fine, the problem is when I close it. When I click the close bu

Solution 1:

The reason the animation appears to 'blink' is because you're using a spring animation which recoils or bounces once it reaches its final value. Try replacing spring with timing to get rid of the bounce:

showContent = () => {
    Animated.timing(this.state.height, {toValue:130}).start();
}

hideContent = () => {
    Animated.timing(this.state.height, {toValue:0}).start();
} 

Solution 2:

Just ran into the same issue. You can still use Animated.spring but it needs the correct min height for the extra "wiggle room". Seems it may vary, in my case it was a min height 2 for a max height of 55.

Solution 3:

I'm pretty late, but I had this issue and solved by just using the config bounciness: 0 to disable the blink completely.

You can find more info about in the documentation.