React Native, Multiple Animations OnPress

Question

Thanks in advance for the help.

Attempting to have an image asset (in this case "yes.png") trigger two animations on touch ("onPress).

The image itself should spring (animated.spring) and then previously hidden text should appear.

Whatever I try I can only get it to do one or the other but not both.

Tried wrap both animations in a parallel aka

_springAnimation = () =>
    Animated.parallel([
      Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }).start(),
    ]);

and add <TouchableOpacity onPress={this._start}> after the first.

Here is the current code I have:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      springValue: new Animated.Value(0.47),
      useNativeDriver: true,
      fadeValue: new Animated.Value(0),
    };
  }
  _springAnimation = () => {
    Animated.spring(this.state.springValue, {
      toValue: 1.33,
      friction: 0.47,
      useNativeDriver: true,
    }).start();
  };
  _start = () => {
    Animated.timing(this.state.fadeValue, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._springAnimation}>
          <Animated.Image
            source={require('animation/assets/yes.png')}
            style={[
              styles.imageView,
              {
                transform: [{scale: this.state.springValue}],
              },
            ]}
          />
          <Animated.View
            style={{
              opacity: this.state.fadeValue,
              height: 60,
              width: 200,
              backgroundColor: 'black',
              justifyContent: 'center',
            }}>
            <Text style={styles.buttonText}>Win</Text>
          </Animated.View>
        </TouchableOpacity>
      </View>
    );
  }
}

Neetin Solanki · Accepted Answer · 2020-04-15 09:30:18Z

2

If you want to run animation one after another. You can do this by Animated.sequence.

Animated.sequence([
    Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
    }),
    Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
    })
]).start(); // start the sequence group

They will start stop accordingly.

And If you want to run it parallel then try below code.

Animated.parallel([
    Animated.spring(this.state.springValue, {
        toValue: 1.33,
        friction: 0.47,
        useNativeDriver: true,
    }),
    Animated.timing(this.state.fadeValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
    })
]).start(); // start the sequence group

answered Apr 15, 2020 at 9:30

Neetin Solanki

6814 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coffee1is1great Over a year ago

Cool, you should get credit/reputation for it even if its not showing on the front end. Thanks again. I also posted another animation question here stackoverflow.com/questions/61320650/… . Figured you may know that answer to that one as well if you choose to spend another few minutes helping :)

Collectives™ on Stack Overflow

React Native, Multiple Animations OnPress

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related