A First Look at Reanimated 2

With Reanimated 2, the team at Software Mansion asked: “How would it look if there were no constraints when writing gestures and animations in React Native?” and started from there.

Shopify logo
Shopify
•
William Candillon
•7 min read•beginner•
--
•View Original
JavaScriptReact

Overview

Reanimated 2 represents a significant evolution in building gestures and animations within React Native, leveraging a new API called animation worklets. This article explores the features, benefits, and practical applications of Reanimated 2, highlighting its ability to enhance performance and simplify the animation process.

What You'll Learn

1

How to create animation values using useSharedValue() and useDerivedValue() hooks

2

How to handle gesture states with useAnimatedGestureHandler()

3

How to assign animated values to component properties using useAnimatedStyle() and useAnimatedProps()

Key Questions Answered

What are animation worklets in Reanimated 2?
Animation worklets are JavaScript functions that run on the UI thread independently from the JavaScript thread, allowing for more efficient animations without crossing the React Native bridge. They can receive parameters, access constants from the JavaScript thread, and invoke functions asynchronously.
How does Reanimated 2 improve performance compared to Reanimated 1?
Reanimated 2 enhances performance by eliminating the need for frequent communication between the JavaScript and UI threads, which was a limitation in Reanimated 1. This results in faster initialization times and reduced overhead during animations.
What hooks are introduced in the new Reanimated API?
The new Reanimated API introduces five hooks: useSharedValue(), useDerivedValue(), useAnimatedGestureHandler(), useAnimatedStyle(), and useAnimatedProps(). These hooks facilitate the creation of animation values, handling gesture states, and assigning animated properties to components.
What are the key features of worklets in Reanimated 2?
Worklets in Reanimated 2 run on the UI thread, can be declared with the 'worklet' directive, receive parameters, invoke other worklet functions, access constants from the JavaScript thread, and call functions from the JavaScript thread asynchronously.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used as the framework for building mobile applications with enhanced animations and gestures.

Key Actionable Insights

1
Utilize animation worklets to enhance the performance of your React Native applications.
By running animations directly on the UI thread, you can reduce lag and improve responsiveness, especially for complex gestures.
2
Adopt the new hooks in Reanimated 2 to simplify your animation code.
The new hooks provide a more intuitive way to manage animation values and gestures, making your code cleaner and easier to maintain.
3
Explore the liquid-swipe example to understand advanced animation techniques.
This example demonstrates the capabilities of Reanimated 2, including bezier curve interpolation and physics-based animations, which can inspire your own implementations.

Common Pitfalls

1
Mismanaging the initialization of animation nodes can lead to performance issues.
In Reanimated 1, developers often faced challenges with memoization and unnecessary re-declarations, which could slow down the application. Transitioning to Reanimated 2 helps mitigate these issues.

Related Concepts

Animation Worklets
Gesture Handling In React Native
Performance Optimization In Mobile Apps