Over the years, the React Native community has become larger and more diverse. The number of accessible and usable libraries has increased considerably, which allows us to generate apps that are not only performant using React but also have the possibility of differentiating themselves from traditional applications.Another thing that has changed is our usage and expectations of applications. Not only do we expect them to fulfill functionalities and customer needs correctly, but they also need to be interactive, have a creative design, be fun, and definitely not “boring”.
That is where animations come in. Lately animations have been gaining more and more value not only in design circles but also in the software industry. They allow us to generate interactive, fun and smooth experiences.
React Native already has an inbuilt animated API to generate animations and transitions. But with new requirements and market expectations, it often comes short and has some limitations when enabling gesture-based interactions.
The idea of this blog is to compare and learn about alternative libraries for animations, so next time you have to decide which one you want to use, you can choose wisely.
To summarize, React Reanimated is great because of its similarities with Animated, its low cost and great performance. That’s why today it is the most used library for animations.
If you want to start using it, it has a great documentation, with lots of examples and blogs. It’s really simple to install and start applying to your app.
About React Reanimated:
Next we have Lottie Files, a great and simple way to animate your app. This is one of my favorite libraries, but it requires more than just programming skills. Lottie files, as they say on their website are a “JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets.” These files are really small so they don’t affect the size or the performance of an app as you might think a moving image would. They can work on any device, with the ability to scale up or down without pixelation.
It’s really simple to start using and to take advantage of, because it’s pretty similar to just creating a new image in React (from a code perspective).
Besides its simplicity, because these animations are not made by coding, we might need a little help from our fellow designers. But if you’re just like me and have an interest in design, you might be able to do it yourself from scratch using Adobe After Effects. If this is not the case, you don’t need to worry. Lottie files have hundreds of free animations that you can use on your app. One of the great things that Lottie file has is a web editor that is very easy to use, where you can change color, size and looks of any animation at a glance.
Example animations from Moove It Design Studio (Candidly Design Case)
React Native Animatable
Coming in third, we have React Native Animateble. If we would have to rank code animation libraries, this one would come right after React Reanimated. Animatable is a very popular library among its peers. It’s a great alternative to Reanimated when creating micro-interactions or just making simple and fast animations.
Animatable is a well-documented library that is really simple to install and use. It’s a great alternative for looping and generating transitions for elements in your apps.
About Animatable: React Native Animatable on Github
React Native Tabbar Interaction
React Native Tabbar interaction is not a full animated library for all elements of an app but rather, as the name suggests, it’s an animation for the tab bar. This library was created by MindInventory and is a really great way to make your tab bar look great effortlessly. If you want your tab bar to be different, this library won’t disappoint. Tabbar Interaction is made using SVG elements and has the latest of Google’s Material Design.
It’s easy to use, adaptable and easy to accommodate the client’s needs. This library is well maintained and documented.
About Tabbar Interaction: React Native Tabbar Interaction on Github
React Native Shared Element
As well as with Tabbar Interaction, React Native Shared Element is not an animation library for elements, but rather for navigation. React Native shared element transitions are often used to add shine to applications. It’s possible to achieve nice transitions by building custom modals and using the core React Native API, but this usually brings some restrictions. Resizing images or guaranteeing that no “flicker” occurs on older Android devices can be really difficult.
Because of these problems it’s why React Native shared elements come to light. This library, as the documentation says, “solves the problem through an all native implementation which is very close to the metal of the OS. It provides a set of primitives, which don’t require any back-and-forth passes over the react-native bridge”. This is how this library manages to achieve better performance and faster image transitions.
So next time you want to guarantee smooth transitions, keep in mind that this library can be a great problem solver.
About Shared Element: Shared Element on Github
Last but not least, we have React Spring. This library might not be the most widely used, but what differentiates it from the others is that it is a cross-platform library, supports react-native-web, React Native and web among other platforms. It’s very easy to use and has physics-based animations. What’s so cool about React Spring is that its API is available in a pattern of plug and play react hook. So next time you are thinking about making a React web and a React mobile app, if you want to reuse code and make your app shine, React Spring might be your best choice.
About React Spring:
Animations are very useful nowadays. Using these libraries can really change the perspective of users. Having great animations can make the difference between having a standard app and a high-quality app. As we’ve seen, there are a lot of libraries with different focuses and the number and quality is only likely to increase over time.
So if you are thinking about making a new app or adding animations to it, feel free to test these libraries and combine them to get the most out of them.
As an example of animations, here at Moove It’s Mobile Studio we made Candidly’s Mobile App. Candidly is a company dedicated to the photography business, where you can book a photographer for an event and after 24 hours get the photos of that event on your phone.
Because it was an app where its looks and appearance mattered a lot, we needed the app to stand out with more than just photos and nice fonts. That’s where animations came into play. Candidly customers really love to interact with the app and see gesture-based interactions in it, so we were able to focus on this and play around with animations.
Using two of the libraries mentioned above (Reanimated and Lottie), we added animations to the app and it took off. Candidly and their app users loved it and, with simple changes, the app looked more professional at a low cost.
Here is the process of how we did it using Lottie and Reanimated.
Starting with the most complex one we had Lottie, not because of its implementation but because it required previous steps before writing code. For Lottie animations, we had help from Moove It’s Design Studio. They designed the animations and brought them to life using Adobe After Effects and the Lottie files plugin. Which might sound easy but believe me it’s not.
After generating those animations, they exported them into JSON files so we could use them. Once we had those files, the process of showing those animations was pretty straight forward.
After Lottie we used Reanimated. This one only required code work, so the process was a little bit less difficult. We used Reanimated to generate a parallax scroll view so when the user wanted to over scroll the background image, it would zoom in and out depending on the scroll direction.
Special thanks to Candidly for letting us use their project as an example and also the Design Studio Team at Moove It.
Design studio case: Candidly on Behance