React Native Gestures & Animations: you only have 16ms to render everything

The default Gesture and Animation APIs from React Native have some small declarative parts but they are mostly imperative: in most cases, they rely on communication between the JS and Native thread. This communication (aka “crossing the RN bridge”) takes time and there are no guarantees that a frame can be rendered in time, especially on small Android devices. On top of that, the JS thread is often busy with other tasks such as processing REST API calls for instance. In such a scenario, there won’t be any possibilities to render each frame in time.

In the code snippet below, we grad an object around the screen using PanResponder and Animated. Because these APIs rely on communication between the JS and the UI thread, frames will be drop if the JS thread gets busy and/or the device has limited computing powers.

To overcome this challenge, Krzysztof Magiera, father of native gestures and animations in React Native, has published two libraries that will enable us to declare all gestures and animations beforehand on the UI thread: react-native-gesture-handler and react-native-reanimated. As a result, even if the JavaScript thread is continuously busy, the gestures and animations will still work seamlessly even on low-grade Android devices. Below is the exact same component rewritten with Gesture Handler and Reanimated: the JS thread is not used while running the gesture and animation.

Learn Declarative Gestures and Animations

Because of the declarative nature of Gesture Handler and Reanimated, the barrier to entry with these libraries is high. I started a YouTube series where I use these libraries to implement user experiences from apps that people know and love.

While the examples can YouTube can be sometimes complex, I released a course on the fundamental of Gesture Handler and Reanimated. My goal with this course is to provide you will all the tools and knowledge necessary in order to build butter-smooth gestures and animations that run at 60 fps even on low-grade Android devices.

We start by building simple transitions and then learn to harness the power of timing and physics-based animations, and more importantly how they integrate with gestures in order to provide professional-grade user-experiences. This course will be updated every month with new lessons as well as premium React Native starter kits.

Happy Hacking ??