React Native Reanimated is a valuable React Native library that allows developers to create seamless and polished animations and interactions for their mobile applications.
React Native is a robust framework for building mobile applications, but its architecture can struggle with certain types of interactions, particularly those that are event-driven.
React Native has its Animated API, which can run animations on the UI thread by setting
useNativeDraver to true. This option will send the complete animation information to the UI thread before starting the animation from the JS thread.
useNativeDriver option can be used with restricted properties. For example, if we try to use this option for layout related properties, the following error will be invoked.
The solution to this problem is using Reanimated. The Reanimated v2 removed all complex API for declaring animations from its previous version(Reanimated v1) and is simple like the core Animated API. It provides some hooks and functions to create animations, and those are very intuitive.
The Worklet in Reanimated v2 is a secondary JS context in the UI thread. Therefore, we should understand Worklet correctly for utilizing Reanimated v2. In this library, the Worklet is represented as a function with a ‘
worklet‘; directive at the first line of the function like the following example.
Worklet functions can be executed on different threads depending on how they are called in the application code. By default, if you call a worklet function, it will be conducted on the application’s main thread. However, there is also a way to run worklet functions on the UI thread using the runOnUI method.
Shared Values are one of the main concepts behind Reanimated v2, similar to
Animated.Values from React Native Animated API.
Shared Values are a vital feature of Reanimated v2, designed to provide a way for developers to work with mutable data across multiple threads in a secure and reactive way.
In addition to providing a way to work with mutable data across threads, Shared Values also enable a notion of reactiveness within the Reanimated framework. This means that updates to Shared Values can trigger corresponding code execution on the UI thread, which can result in starting animations, updating views, and other UI-related tasks.
Creating shared value:
We can see how shared value is being changed in the
scrollTo function in the picture above.
As part of this blog, we will create an animated bottom sheet with React Native Reanimated used for animations, and React Native Gesture Handler used for touch interactions.
To work, we need to wrap our
BottomSheet component in the
GestureHandlerRootView that is imported from React Native Gesture Handler.
To detect touch interactions, we will implement
Gesture.Pan() and utilize its callback functions:
onEnd. We will manipulate shared values within these functions to animate the bottom sheet’s border radius and translateY values. Modifying these shared values allows us to create dynamic and visually appealing animations that respond seamlessly to user touch inputs.
To create these animations we will use the useAnimatedStyle hook imported from React Native Reanimated. We are creating animated styles that are being changed based on the
translateY shared value.
All left is to assign this style we created to the
Animated View inside
If you’ve followed all the necessary steps outlined in the previous sections, you should now be able to achieve a similar result to the one demonstrated.
Specifically, when the user taps the “Add new car” button on your app’s screen, the ‘
scrollTo function will be called, causing the Bottom Sheet to animate up smoothly from the bottom of the screen. Again, this creates a polished and engaging user experience.
With this animation implemented in your React Native app, you can create a dynamic and engaging interface that encourages user interaction and enhances the overall functionality of your app.
In conclusion, React Native Reanimated is a powerful tool that enables developers to create stunning and responsive animations for their mobile applications. Whether you are building a simple or complex app, React Native Reanimated is a must-have tool in your toolkit.
With its intuitive API, flexible architecture, and excellent performance, Reanimated empowers developers to take their mobile app development to the next level.
The latest version of this widely-used library is Reanimated v3, which builds on the successes of its predecessor, Reanimated v2, by prioritizing worklets and shared value architecture. It also supports the New Architecture, granting developers access to more sophisticated animation techniques for React Native applications. Stay tuned for further details about Reanimated v3 in one of our upcoming releases.
You can also take a look at the code here.