How does React Native Reanimated work, exactly? Step-by-step, through its animation cycle

Reanimated is a library React Native devs touch everyday. It's become the standard, for interface animations. It's key to our apps.

But do most of us understand how it works? I didn't. Maybe I still don't - not as deeply as I'd like - but digging through the docs and the source code to make this video certainly sharpened my mental model of its inner workings.

In this video, we:

Get to grips with key Reanimated concepts, like "worklets" and "shared values".
See those concepts in action, across React Native's threads, moving step-by-step through the computation of animations.
Touch on related React Native architecture concepts. We learn almost as much about React Native as we do Reanimated.

--------

I'm a learner, not a Reanimated maintainer or expert, but I've read and tinkered and tried to distil what I've found.

If you are one of the former, and I've got something important wrong, please reach out and I'll make a correction.

--------

Source code of BMI app (undocumented, as I haven't had time to make the repo presentable): https://github.com/sorenfrederiksen/r...

--------

Further reading

Reanimated's official glossary of terms: https://docs.swmansion.com/react-nati...

Reanimated's official guide to "worklets": https://docs.swmansion.com/react-nati...

About Renimated's "workletizing" babel plugin: https://docs.swmansion.com/react-nati...

Reanimated 2.0 documentation explaining "shared values". (My video covers Reanimated 3.0, but no single document exists for that version that covers everything this does.) Implementation details may have been tweaked a little, but the API, the intention and the way this approach differs from React Native's built-in Animated.Value remains more or less unchanged: https://docs.swmansion.com/react-nati...

The Reanimated `useSharedValue` hook's "Remarks" section covers a lot of useful background, as well - and includes important tips for usage: https://docs.swmansion.com/react-nati...

About the fundamental Reanimated hooks used in this video: https://docs.swmansion.com/react-nati...

React Native's official "theading model" documentation: https://reactnative.dev/architecture/...

--------

Song is "Digital Artifact" by Newgrounds user "orbitron408": https://www.newgrounds.com/audio/list...

Cosy vectors of Copenhagen are hand-drawn by me.

--------

#reactnative #reactnativetutorial #reactnativereanimated #reanimated #react #reactjs #mobileapp #mobileappdevelopment #reactdeveloper #reactdevelopment