React-native: [Animated] Repeat / loop animation

Created on 25 Oct 2015 · 3Comments · Source: facebook/react-native

Is there anyway to loop or repeat animations with the current Animated API ?

I wanted to have a loading icon rotating while my app is getting the necessary information, but I am only able to make it rotate once.

Regards

Locked

Source

axelg12

Most helpful comment

The .start() method takes an completion callback. In that callback you can run the animation again!

Something like this should do

  ...
  runAnimation() {
    this.state.rotateValue.setValue(0);
    Animated.timing(this.state.rotateValue, {
        toValue: 360,
        duration: 500,
    }).start(() => this.runAnimation());
  }
  ...

dralletje on 25 Oct 2015

👍12 👎1

All 3 comments

The .start() method takes an completion callback. In that callback you can run the animation again!

Something like this should do

  ...
  runAnimation() {
    this.state.rotateValue.setValue(0);
    Animated.timing(this.state.rotateValue, {
        toValue: 360,
        duration: 500,
    }).start(() => this.runAnimation());
  }
  ...

dralletje on 25 Oct 2015

👍12 👎1

@dralletje Doea react-native support frame animation?

muyiou on 27 Oct 2015

Please use Stack Overflow and tag your question with react-native for asking these kinds of questions: http://stackoverflow.com/questions/tagged/react-native

Many people from the community hang out on Stack Overflow and will be able to see and likely also answer your question. Using Stack Overflow for questions also helps us use Github issues to keep track of bugs that need to be fixed.