Building Arrive's Confetti in React Native with Reanimated
Article Summary
Joel Besada from Shopify reveals how they built a delightful confetti animation in React Native that runs at 60 FPS without blocking the JavaScript thread. The secret? Declarative animations that execute entirely on the native UI thread.
When Shopify rewrote their Arrive package tracking app in React Native, they faced a challenge: recreating the beloved confetti celebration effect for both iOS and Android. Instead of writing platform-specific native code, they chose to implement it purely in JavaScript using the Reanimated library, allowing them to share code across platforms while maintaining native-level performance.
Key Takeaways
- 100 confetti pieces animated at 60 FPS using declarative instructions on native UI thread
- Reanimated sends animation programs to native layer, avoiding JavaScript blocking issues
- Added physics like velocity, rotation, and edge bouncing with elasticity multipliers
- Staggered animations in waves and dual cannons for more dynamic visual effect
By using Reanimated's declarative API, Shopify achieved smooth cross-platform confetti animations that run entirely on the native UI thread, eliminating performance concerns from JavaScript computation.
About This Article
Shopify needed to recreate the Arrive app's confetti effect on both iOS and Android without duplicating code across platforms.
Joel Besada's team built the confetti animation in JavaScript using React Native Reanimated's declarative API. Instead of relying on JavaScript frame calculations, the API sends animation instructions directly to the native UI thread.
The result animates 100 confetti pieces with randomized velocities and rotation angles. The pieces bounce elastically while the app maintains 60 FPS performance without blocking the JavaScript thread.