Chapter 10: How To Nail It: Controlling Your Animation

At this point, we have a fully functional animation in our React Native app that starts playing as a loop when it is mounted and stops when unmounted. But what if we want to control the playback of the animation? Let's give an example: we need to display the animation of a loading bar while we sequentially download five different files into our app. The loading bar will show the progress of the downloading files by filling itself (20% more each time a file is downloaded), resulting in a fully filled bar once those five files have been downloaded.

Figure 10.1 – Animated loading bar used as an example

In this case, we need to control the animation, updating it every time a file has been fully downloaded and stopping it while the next download is in progress.

To explain how this process works in lottie-react-native, we will review two different alternatives: the declarative and the imperative...