Sebastian Templin Sebastian Templin - 7 days ago 5
Javascript Question

Start multiple Animated.timing at once with React Native

I'm trying to start multiple React Native animations at once, with one callback for all animations. The example works fine, but I don't like the fact, that I have to start one after the other and having only one animation with a callback. Is there a more elegant way?

Animated.timing(this.state.opacity, {
toValue: 0,
duration: 300
}).start();

Animated.timing(this.state.height, {
toValue: 0,
duration: 300
}).start(() => {
// callback
});

Answer

Yes, there is. You can use Animated.parallel!

Animated.parallel([
    Animated.timing(this.state.opacity, {
        toValue: 0,
        duration: 300
    }),
    Animated.timing(this.state.height, {
        toValue: 0,
        duration: 300
    })
]).start(() => {
    // callback
});