Why are we not using Animated or Reanimated?
A common question for React Native beginners is which library they should use for displaying animations on their apps. After a quick search, three different ways of doing so arise: the Animated API, Reanimated, or lottie-react-native.
Animated and Reanimated are not technologies that compete lottie-react-native as they serve different purposes. Both Animated and Reanimated excel in animating React and native components on iOS and Android, but they are based on transforming mobile UI components (for example, Text, Containers, Views, or Lists). This means they are not designed to create complex animations or visual icons, which designers can do with Adobe After Effects.
Let's look at an example of what Animated/Reanimated can do versus what Lottie is capable of:
What Lottie does easily:
Figure 7.1 – Typical lottie-react-native animation
What Animated and Reanimated do well:
