An important aspect of our application is the fluidity of our user interface. Animations are used to give a sense of this rich user experience. We can employ animations for all sorts of interactions, from changing entire views, to reacting to a user's touch interaction on a component. The most important factor after having a visually appealing animation is to make sure it does not stop the JavaScript thread. In order to keep our animations fluid and not interrupt the UI interactions, our render loop has to render each frame in 16.67 ms.
In this recipe, we will take a look at several techniques for improving the performance of our animations. These techniques focus on preventing JavaScript execution interrupting the main thread.
For this recipe, we assume you have a React Native application that has some animations defined.