react-native-animatable
Standard set of easy to use animations and declarative transitions for React Native (by oblador)
react-native-reanimated
React Native's Animated library reimplemented (by software-mansion)
react-native-animatable | react-native-reanimated | |
---|---|---|
8 | 68 | |
9,903 | 9,548 | |
0.3% | 1.8% | |
5.1 | 9.9 | |
over 1 year ago | 2 days ago | |
JavaScript | TypeScript | |
MIT License | MIT License |
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-native-animatable
Posts with mentions or reviews of react-native-animatable.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2021-08-23.
-
React native animatable
tried this method and it throws and error ref.current.pause is not a function I also don't see anything on the GitHub page of the package...? https://github.com/oblador/react-native-animatable
-
Practice by doing a app
hello, thank you for the replay. For the animation I'm using https://github.com/oblador/react-native-animatable it is a very small library comparison with the other animation libraries but it is powerfull and easy to implement. And the animation type name is "fadeInDownBig"
-
Mistakes I made while maintaining an open-source React Native library for five years
The last mistake I wanted to mention is relying too much on third-party libraries. Specifically, in my case, react-native-animatable. React Native Animatable is a great library that allows defining transitions and animations in a declarative fashion by abstracting the React Native animated API. In 2015/2016, react-native-animatable was the way to sprinkle animations on top of React Native apps. Mad props to @oblador for building it. react-native-animatable powers all react-native-modalβs animation. Users can pick any animation exposed by react-native-animatable and apply it to the enter/exit state of the modal with a single line of code.
-
Update: Hey Reddit - My first app is ready for a beta test. Read comments if you're interested.
Tailwind Styles: https://github.com/vadimdemedes/tailwind-rn Storage: https://react-native-async-storage.github.io/async-storage/docs/api Navigation: https://reactnavigation.org/ Audio: https://docs.expo.io/versions/v41.0.0/sdk/audio/ Animations: https://github.com/oblador/react-native-animatable Modal: https://github.com/react-native-modal/react-native-modal Confetti: https://github.com/cdvntr/react-native-confetti Debounce: https://github.com/xnimorz/use-debounce Toast: https://github.com/calintamas/react-native-toast-message
-
A simple React Native flashcard game I'm making for my son. I'd love some feedback.
Animations: https://github.com/oblador/react-native-animatable
The animations are pretty simple though. I used React Native Animatable. From there you can add a ref to the element you want to animate and call the animate function on press on whenever. Looks something like:
-
React Native βοΈ Animation Libraries easy to use!
React Native Animatable creates simple animations and transitions with declarative components, just import the element and choose from a lot of animations pre-build or create a custom animation!
-
Useful React Native Packages
First off is React Native Animatable, and as the name suggests, this package helps you add animations to elements contained in mobile components. Now you can find more information about this package here, but I will try and explain how to use this package in your project. To add this package to your app, you will need to use either of these commands in your terminal.
react-native-reanimated
Posts with mentions or reviews of react-native-reanimated.
We have used some of these posts to build our list of alternatives
and similar projects. The last one was on 2025-03-05.
-
π Top React Native ESSENTIALS Tech Stack for 2025 π«΅β³οΈ
Reanimated: Create smooth animations with an excellent developer experience
-
Must-Know React Native Libraries for Faster Mobile App Development in 2025 π
3. React Native Reanimated β High-Performance Animations π¬
-
How to create Facebook inspired Animated Reactions with React Native, react-native-reanimated and Typescript
At its core, the package provides a customizable ReactionBar component that displays a row of animated reaction icons. It leverages react-native-reanimated to deliver smooth, natural animations that look great on both iOS and Android devices. The component is built with performance and simplicity in mind, so you can add interactive reactions to your user interface with just a few lines of code.
- Fundamentals of React Native App Development: Dependencies, Performance, Native Modules, and Publishing Guide
-
Let's reanimate
react-native-reanimated
-
Dynamic Island Liquid Animation with React Native Skia
If you've got another setup (e.g. raw React Native) refer to the setup on the Skia Docs and the Reanimated Docs as there are additional setup instructions.
-
The Skill of Finding Bugs and Their Root Cause in Software Development
However, this update actually messed up the animations in the app because there was a bug in the Reanimated update. So, I had to debug the app by downgrading the Reanimated version first and then checking with the latest version to ensure that the bug was caused by the library. I ended up reporting the bug to the Reanimated GitHub repo and earned a contribution to the open-source project. Another advantage of debugging library skills is that you can contribute to their GitHub repos and earn extra points in job interviews. You can see my contribution here
-
Exploring the Best UI Component Libraries for React Native apps
Supports Animation: Tamagui leverages the popular open-source library β Moti as a reanimated driver for animation libraries such as react-native-reanimated and React Native Animated.
-
Expo β open-source platform for making universal apps for Android, iOS, and web
FYI react-native-reanimated (https://github.com/software-mansion/react-native-reanimated) is not the Animated API from React Native. react-native-reanimated allows JS code to run on a UI thread that is able to synchronously modify layout, providing alternative synchronous ways for you to hook into the layouting. For instance, as opposed to the asynchronous `measure()` method provided by React Native to measure layouts, react-native-reanimated allows one to call their version of `measure()` (https://docs.swmansion.com/react-native-reanimated/docs/api/...) to perform the same operation on the UI thread, synchronously.
-
React Native is Multi Threaded
By using libraries like Reanimated, React Native MMKV, and React Native Skia, you leverage the native thread. However, I know there are developers building amazing things who think outside the box. I'm always thrilled when I read engineering blogs from companies like Netflix, Meta, and Shopify. They create solutions beyond the limits.
What are some alternatives?
When comparing react-native-animatable and react-native-reanimated you can also consider the following projects:
react-native-snap-carousel - Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
react-native-skia - High-performance React Native Graphics using Skia
moti - πΌ The React Native (+ Web) animation library, powered by Reanimated 3.
react-native-fast-image - π© FastImage, performant React Native image component.
tailwind-rn - π¦ Use Tailwind CSS in React Native projects