CODEWITHSUNDEEP
javascriptandroidanimationreact-native
corasan
corasan

Reputation: 2754

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

Upvotes: 2

Views: 5086

Answers (4)

FIREHIVE
FIREHIVE

Reputation: 35

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.

Upvotes: 0

Matteo
Matteo

Reputation: 1209

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.

Upvotes: 0

Rich
Rich

Reputation: 137

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.

Upvotes: 2

FuzzyTree
FuzzyTree

Reputation: 32392

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

Upvotes: 2

Related Questions