57

Top 5 Animation Libraries in React Native

 5 years ago
source link: https://www.tuicool.com/articles/IvUNze2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 components

Use Bit to share and reuse React 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. Click here to learn more .

QZ7vAfB.jpg React loader components with Bit: Easily share and sync across apps

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 :smiley:

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!

Nr6FJnu.jpg

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 :

bYJnYfy.jpg

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

ABzeeii.jpg

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”;

ABzeeii.jpg

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 :sunglasses:.

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 : 

useNativeDriver

To learn more about this library I recommend you to check their documentation on GitHub . I also recommend you to checkWilliam 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)

nMz63yA.jpg

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

7bYvieA.jpg

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK