javascript - React Native - Animated.spring blinks when reverting the animation -

in react native app i'm trying create drawer. when click button should open, , works fine, problem when close it. when click close button animation blinks, kind of opening , closing 2-3 times before closes.

this how i'm doing it

export default class drawer extends component {     constructor(props) {         super(props);         this.state = {             height: new animated.value(0)         }     }      showcontent = () => {         animated.spring(this.state.height, {tovalue:130}).start();     }      hidecontent = () => {         animated.spring(this.state.height, {tovalue:0}).start();     }      render() {         return (             <view>                 <touchablehighlight                      onpress={this.showcontent}                     underlaycolor="transparent"                 >                     <text>show</text>                 </touchablehighlight>                  <touchablehighlight                      onpress={this.hidecontent}                     underlaycolor="transparent"                 >                     <text>hide</text>                 </touchablehighlight>                  <animated.view style={{height: this.state.height}}>                     <text>content</text>                 </animated.view>             </view>         );     } } 

the reason animation appears 'blink' because you're using spring animation recoils or bounces once reaches final value. try replacing spring timing rid of bounce:

showcontent = () => {     animated.timing(this.state.height, {tovalue:130}).start(); }  hidecontent = () => {     animated.timing(this.state.height, {tovalue:0}).start(); }