React Native Animated Multiple Animations on one element

Issue

Is there a way to have multiple animations on a single Animated View, changing the same css property?

this.expandAnimation = new Animated.Value(50);
this.shrinkAnimation = new Animated.Value(200);

Animated.sequence([
  Animated.timing(this.expandAnimation, {
    toValue: 200,
    duration: 1000
  }),
  Animated.timing(this.shrinkAnimation, {
    toValue: 50,
    duration: 1000
  })
]),

  <Animated.View style={[styles.box, { width: this.ExpandAnimation }]}> // What value to bind to width?
    <View>
    </View>
  </Animated.View>

Solution

Answered by Federkun. You use a single animated value.

this.expandAndShrinkAnimation = new Animated.Value(50);

Animated.sequence([
  Animated.timing(this.expandAndShrinkAnimation, {
    toValue: 200,
    duration: 1000
  }),
  Animated.timing(this.expandAndShrinkAnimation, {
    toValue: 50,
    duration: 1000
  })
]),

  <Animated.View style={[styles.box, { width: this.expandAndShrinkAnimation }]}> // What value to bind to width?
    <View>
    </View>
  </Animated.View>

Answered By – wallis granda

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0