React Native - Animated.spring blinks when reverti

Question

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 button the animation blinks, kind of like opening and closing for 2-3 times before it definitely closes.

This is 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>
        );
    }
}

Answer 1

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.

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

Answer 3

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();
}