This project is a very quick case study comparing two ways of handling animations in React Native:
- React Native's built-in Animated-library
- The Reanimated-library by Software Mansion
The purpose of this comparison is to help reason decisions on which library should be used to handle animations in my work and hobby projects. The comparison was conducted by implementing the same animated component using both beforementioned libraries.
The task given in this comparison case study was to implement an animated alert banner component which has the following requirements:
- Animates into the screen after a user action
- Animates out of the screen when alert's close-button is pressed
- Can be dragged horizontally by the user
- Visually communicates to the user that they're successfully dragging the alert component
- Animates back to the original position if the user gently stops dragging the alert component
- If the user flings the alert quickly to either direction the alert is animated out of the screen to the direction of the fling
To be able to detect and act upon user's gestures an additional library called React Native Gesture Handler (also by Software Mansion) was used.
Other software libraries or packages and their respective versions can be found from the package.json file.
Video showing how the completed alert banners function.
Screen.Recording.2023-04-12.at.16.54.01.mov
Please see AnimatedAlertBanner.tsx and ReanimatedAlertBanner.tsx for the relevant code.
To make comparing the two different libraries as fair as possible all non-animation related code was kept as similar as possible.
Though both libraries were able to achieve the 6 simple requirements given for the alert banner, it is clear for me that the Reanimated library is the superior way to handle animations in a React Native application.
The API Reanimated gives for handling animations is intuitive and allows for a really simple way of handling gestures together with animations, which shows in the amount of code needing to be written: only for this rather simple component the Animated-library needed ~60% more lines of code to complete it (78 vs 127). Though the amount of code in itself isn't a perfect metric this kind of difference it is a telling example of how the Reanimated API simplifies things through understandable abstractions.
Other reasons to pick Reanimated vs. Animated library: