Reanimated

Shopify · Apr 7, 2020

Building Arrive's Confetti in React Native with Reanimated

Shopify rewrote its Arrive package-tracking app in React Native and launched it on Android, where the earlier iOS-only app’s delivery confetti needed a cross-platform implementation. Rather than duplicate the iOS CAEmitterLayer code in Java or Kotlin, the team implemented the effect in JavaScript with Reanimated, whose declarative instructions run animation computations on the native UI thread after setup. The walkthrough initializes 100 randomized confetti, animates position and three-dimensional rotation from randomized velocities, and uses delta time, a clock, staggered delays, and edge-bounce elasticity to shape their motion. It also adds two confetti cannons and 2-dimensional confetti, while leaving cleanup of images and animation stopping beyond the post’s scope. The resulting version is described as resembling the original while spreading confetti more uniformly and making it behave more like paper.