Create a loop animation of a box that goes up and down infinitely.
Loop animations cannot be changed on the fly. If you want to restart a loop, you need to update a component's
See the explanation at the bottom.
To restart a
loop, you must re-render the component and change its
key prop. Every time the
key changes, it will restart its animation.
It's worth noting that using the
loop cannot be changed. For example, you can't set
loop to be
true at a random time. It must be
true when the component mounts, and stay true.
Similarly, the styles passed to
animate must exist when the component mounts, and cannot change over time. If they do, we cannot guarantee a working loop animation.
We're using Reanimated's
withRepeat function under the hood, which repeats back to the previous value. That means that if you change the value on the fly, that is where it will repeat back to.
If you want a loop that's constant, make sure you set
loop: true when the component mounts, and make sure that your
animate prop do not change throughout the component's lifecycle.
Sequence animations cannot be paired with
loop: true or with