This is used when an animation needs to keep repeating. One thing to note here is that the loop will reset the Animated.Value back to it's original value before starting the animation over.

So unless your animation ends back where it started you will see a jump. For example

this._animation = new Animated.Value(0);

Animated.loop(
  Animated.timing(this._animation, {
    toValue: 100,
    duration: 500,
  })
).start();

const animatedStyle = {
  transform: [
    {
      translateY: this._animation,
    },
  ],
};

This animation will start at 0, translate to 100 then revert back to 0. This is not a typical use of Animated.loop. Something a little more typical may be a constantly spinning view.

this._animation = new Animated.Value(0);

Animated.loop(
  Animated.timing(this._animation, {
    toValue: 1,
    duration: 500,
  })
).start();

const interpolated = this._animation.interpolate({
  inputRange: [0, 1],
  outputRange: ["0deg", "360deg"],
});

const animatedStyle = {
  transform: [
    {
      rotate: interpolated,
    },
  ],
};

Here you can see we are interpolating 0deg => 360deg. This is a complete rotation and then the animation will restart at the same point. Thus creating a smooth, looping animation. If you need something that animates smoothly in reverse you will need to craft this yourself. It can be done using the start function. This is not something that will be covered, merely a warning/recommendation.

Additionally in the configuration of loop you can specify the number of iterations that the animation should loop.

Code

Live Demo