Editorβs note: This article was last updated on 4 September 2023 to include revised information about popular animation libraries React Native Reanimated and React Spring.
In a mobile app, animations can greatly impact user experience in terms of interactions and engagement. Animations can quickly become one of the key factors that users love engaging with on your mobile app.
While building a React Native app, it is essential to think of user interactions. Animating some of the user actions can help improve user engagement within the app. In this post, we will cover a list of open source animation libraries for React Native that you can use for your next app, and compare them based on functionalities, ease of use, and popularity.
Jump ahead:
React Native Reanimated, or Reanimated, is a React Native animation library for creating animations and transitions for iOS and Android mobile applications. It greatly streamlines the process of creating smooth and powerful animations by offering full native support and performing animations directly on the UI thread instead of the JavaScript thread.
React Nativeβs built-in Animated
API faces some limitations when it comes to animating and enabling gesture-based interactions. The Reanimated library solves this problem and provides flexibility for adding animations and transitions to in-app interactions.
Reanimated was created and is actively maintained by developers at Software Mansion and Expo. It integrates with the React Native Gesture Handler library for creating tap, pan, and fling gestures.
React Native Reanimated has gone through version updates over the years, with the release of v2 in 2020 and v3 in 2023. While v2 came with some breaking changes, v3 only included a new Shared Element Transitions feature. This new addition allows you to animate views between navigation screens, which adds a smooth transition between the elements of different screens. Besides adding new features, the updates to Reanimated also included performance improvements, improved memory usage, and library stability.
Hereβs a demo of an animation created using Reanimated:
React Native Shared Element provides a set of native building blocks for performing shared element transitions, and enhancing the building of custom transitions beyond what the core React Native API provides. These primitives are all through native implementation.
React Native Shared Element solves a set of specific problems through its native implementation approach. For example, if you were trying to add heavy transitions like navigation between two screens or even add a modal transition to your app with the React Native Animated API, you could still run into performance issues like frame drops.
This library solves the following problems:
resizeMode
transitionsMoreover, React Native Shared Element has a separate version to support shared transitions between navigators using the React Navigation library called react-navigation-shared-element. It uses createSharedElementStackNavigator
, which has a similar API to stackNavigator
, which you can use to wrap each route screen in the navigator and detect changes to trigger shared element transitions.
Here is a demonstration of an animation created using React Native Shared Element:
Popmotion is a physics-based animation library that allows you to easily create animations. Unlike the other libraries mentioned in this post, with Popmotion, you donβt have to explicitly define the animations to transition between states. It automatically selects an animation based on the name of the property being mentioned.
Popmotion supports gestures, mounts, and unmount animations just like a React component. The library is also available for React and Vue.
React Spring is another physics-based animation library that allows you to create smooth and realistic animations with just a few lines of code. It is a cross-platform library, meaning that it supports multiple platforms like the web, React Native, and more. It can animate HTML, SVG, Native Elements, Three.js, etc.
React Spring provides a wide range of interpolation and easing functions that can further enhance your animations. It supports SSR, is fully written in TypeScript, and is compatible with any UI framework you choose.
To use React Spring in a React library, all you need to do is select the native platform target from the @react-spring
package like so: @react-spring/native
.
React Spring provides an imperative API, two custom components, and a set of hooks for creating different types of applications. The components (Parallax and Parallax Layer) are only available on web platforms (the browser) and are for creating parallax effects. The hooks include:
useSpring
: For animating elements between two points, a to buseSprings
: For animating multiple springsuseScroll
: For creating scroll-based animationsuseTransition
: For mount and unmount transitionsuseChain
: For chaining or queueing multiple animationsuseTrail
: For animating multiple springs one after the otheruseInView
: For tracking the visibility of elements in the viewportExplore this in-depth article on React Spring animations to learn more. Hereβs an example of an animation created using React Spring:
Like all the other examples in this article, React Native Animatable is a library that makes it easy to add animations to React Native apps. Similar to React Native Reanimated, React Native Animatable supports declarative usage and is great for building micro-interactions.
React Native Animatable has a vast set of properties for declarative usage, such as animations, looping, generic transitions, and more. It also comes with an API that is easy to use and provides developers with powerful options to control the animations you create. It also currently has over 60 built-in animations.
Hereβs a demo of an animation created using React Native Animatable:
N.B., As of this writing, React Native Animatable is not actively being maintained or updated.
React Native Reanimated | React Native Animatable | React Native Shared Element | Popmotion | React Spring | |
---|---|---|---|---|---|
GitHub stars | 7.7k | 9.6k | 2.1k | 19.5k | 26.3k |
Popularity | Popular | Popular | Not very popular | Very popular | Very popular |
Ease of use | Straightforward and seamless | Straightforward and seamless | Straightforward and seamless | Straightforward and seamless | Straightforward and seamless |
Actively being maintained | Yes | No | Yes | Yes | Yes |
Provides prebuilt animations | Yes | Yes | Yes | No | No |
The libraries featured in this list are either based on personal experience or those which are actively maintained. The goal of these component libraries is to make your development faster and provide a robust way to build apps, ensuring that you donβt have to start from scratch with every new React Native project.
Do you know any other React Native animation libraries you would recommend? Share your suggestions in the comments below and let us know what makes them stand out.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps β try LogRocket for free.
Hey there, want to help make our blog better?
Join LogRocketβs Content Advisory Board. Youβll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowBuild scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]