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

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

• javascript
• android
• animation
• react-native

Share Improve this question Follow edited Aug 29, 2016 at 14:24 corasan asked Aug 29, 2016 at 5:24 corasancorasan 2,77444 gold badges2727 silver badges4141 bronze badges 2

• this.state.height isn't being used anywhere in the code you posted. please post a minimal verifiable example – FuzzyTree Commented Aug 29, 2016 at 14:10
• @FuzzyTree sorry about that, didnt notice. I fixed it now – corasan Commented Aug 29, 2016 at 14:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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.

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

You can find more info about in the documentation.

I know this question is 6.5 years old but I had this problem right now and because its the first questions that pops out on google when searched I'll tell you what fixed it for me.

So this is my animation:

const progressBarAnimation = useRef(new Animated.Value(progressBarValue).current

useEffect(() => {
    Animated.spring(progressBarAnimation, {
      toValue: progressBarValue(),
      speed: 10,
      bounciness: 10,
      useNativeDriver: false,
    }).start()
  }, [progressBarValue])

And I fixed it by using intrapolate and using the extrapolate: 'clamp' value:

const animatedWidth = progressBarAnimation.interpolate({
    inputRange: [0, 100],
    outputRange: ['0%', '100%'],
    extrapolate: 'clamp',
  })

And use it like this:

<Animated.View style={{ width: animatedWidth }}/>

Without extrapolate: 'clamp', when my progress bar would reach 0 it would fill up to 100% and back to 0% 2 or 3 times.