A First Look at Reanimated 2 - Shopify

What this post added

This post introduces Reanimated 2, a significant upgrade to React Native animation and gesture handling. It details the core concept of 'animation worklets' which are JavaScript functions that run on the UI thread independently of the JavaScript thread. The post contrasts Reanimated 2 with Reanimated 1, highlighting the drawbacks of the previous declarative DSL approach (steep learning curve, limitations, initialization performance issues, and bridge crossing for certain operations). It introduces the new API hooks: `useSharedValue`, `useDerivedValue`, `useAnimatedGestureHandler`, `useAnimatedStyle`, and `useAnimatedProps`. The post provides a practical example of building a draggable object using these new hooks and demonstrates advanced animation techniques with a liquid-swipe example.