Top 5 Animation Libraries in React Native

My list of top 5 React Native animation libraries.

Animations have a great impact on mobile to create better the user experience, they are mostly used to interact with user’s actions and that keeps the user more engaged with your app.

In the technical side, React Native offers us a powerful declarative API to make animations usually called Animated API however, sometimes you may want to use some third party libraries to handle animations for you without dealing directly with Animated API and that’s what we are going to explore in this article and talk about 5 top animations libraries you can use in React Native.

Tip: Reuse React Native components

Use Bit to share and reuse React Native components across different projects. Collaborate over shared components as a team to build apps faster together. Let Bit do the heavy lifting so you can easily publish, install and update your individual components without any overhead.

Learn more:

Tutorial: Building Scalable React Native Apps with Independent Bit Components

react-native-animatable

I’m a big fan of react-native-animatable. it gives you declarative wrappers that you can use to animate your elements in React Native, and the good thing about this library is that it has an easy API to use and you don’t need to do any linking. so Let’s make an example and see how this thing works 😃

First, install the library!

yarn add react-native-animatable

Or if using NPM:

npm install react-native-animatable --save

Then Let’s make a slideInDown animation effect!

And here is our component looks like :

We first imported Animatable from react-native-animatable`, then we use Animatable element and compose it with the element we want to animate, you can use it Image , Text as well, you can use createAnimatableComponent to animate other elements you can see docs learn more.

MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Props:

• animation : it takes a string and it’s used to specify the type of animation we want Ex: slideInDown`, SlideInLeft please check the docs to explore the types of animations you can use
• iteractionCount : it specifies the number of times the animation should run and iterate. we can use infinite to make the animation run forever
• direction : specifies the direction of the animation, you can use normal ,alternate-reverse ,reverse .

we can use other props as well, like transition that allow us to define the style property we want to animate as the example below:

react-native-animatable, give us more options to have much control in our animation, and there is more much to tell about this library that one post cannot cover I really recommend you to check out the documentation.

react-native-motion

react-native-motion, is a library to make animations in React Native so simple to use and here is an example to make a simple Shake animation using react-native-motion:

react-native-motion offer us also a simple API to make shared transitions, the creator of this library made an article about shared transitions using react-native-motion please check it out here.

Lottie

This is my favorite library so far, Lottie is an animation library created by Airbnb that parses After Effect animations in into a JSON file that you can export and use it in your app, you can use Lottie on ios, Android, Windows, Web, and React Native.

To use Lottie in React Native you need to install lottie-react-native wrapper, it’s a simple wrapper element that takes a source for the JSON file path as the example below :

First import LottieView:

import LottieView from “lottie-react-native”;

You can check https://lottiefiles.com/ to get a free After Effect animations in JSON files to use with Lottie and enjoy another taste of animations 😎.

react-native-reanimated

react-native-reanimated, the creators of this library reimplemented The React Native Animated API from scratch, as the authors of this library described in the official docs, react-native-reanimated provides a more comprehensive, low-level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture-based interactions.

react-native-reanimated provide a new Animated API that you can use instead of React Native Animated API, to create animations in React native. here is why you may have to use react-native-reanimated instead of React Native Animated API:

• It gives you much control on the animated values by providing serval declarative APIs to keep on track,
• no needs to use useNativeDriver` anymore, because react-native-reanimated perform the animations directly on the UI thread

To learn more about this library I recommend you to check their documentation on GitHub . I also recommend you to check William Candillon, and his channel on youtube, he is doing some dope animations in React native and he is always using react-native-reanimated.

React Native Animations Library (rnal)

rnal , is a React Native animations library that I’ve created by SaidHayani@, it aims to make using animations in React Native so simple by providing simple wrappers to create transitions effects, like Fade, Scale, orrotation effects with the option to create custom animations, to create a Fade effect, you can just do the following :

You can explore more options you can use, checkout out docs.

Hi, my name is Said Hayani I created subscribi.io to help creators, bloggers and influencers to grow their audience through newsletter.

Thanks for your time, if you have any question hit me up on Twitter

Build a cross-platform design system for React and React Native with Bit:

Learn More

5 Tools for Faster Development in React

11 React UI Component Playgrounds for 2019

6 Tools for Documenting Your React Components Like a Pro

Encapsulate components with Bit to run them anywhere across your projects and applications

Bit encapsulates components in your projects with all their files and dependencies, so they can run anywhere across your applications.

Build faster by making your components reusable out-of-the-box, and collaborate as a team to share and discover components. No refactoring or configurations needed, just share components and build truly modular apps.

LEARN MORE