---
title: "Building Arrive's Confetti in React Native with Reanimated"
description: "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."
---

# Building Arrive's Confetti in React Native with Reanimated

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Apr 7, 2020

**Type:** Tutorial

## Summary

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.

## Context

The Arrive app’s confetti effect was originally implemented with iOS CAEmitterLayer code, which could not provide the same implementation on Android. The team wanted a cross-platform React Native effect while retaining performance comparable to the native version.

## Approach / What changed

The effect is implemented in JavaScript with Reanimated’s declarative animation API. The component renders 100 Animated.View confetti elements, drives position and rotation with a clock and delta time, staggers groups with delays, applies elasticity when pieces reach horizontal bounds, and adds two cannons with 2-dimensional confetti.

## Takeaways

- Reanimated sends declarative animation instructions to the native UI thread after JavaScript sets up the animation, avoiding per-frame JavaScript computation that could be blocked by other work.
- The confetti motion uses randomized velocities, a clock-derived delta time, staggered delays for groups of 10, and an elasticity multiplier to bounce pieces back from horizontal screen edges.
- The implementation adds two confetti cannons and three-dimensional paper-like rotation, but cleanup of confetti images and stopping the animation at the bottom are left out.

**Tags:** [JavaScript](https://yomu.fyi/topic/javascript), [React Native](https://yomu.fyi/topic/react-native), [Reanimated](https://yomu.fyi/topic/reanimated)

- Source: [Shopify](https://shopify.engineering/building-arrives-confetti-in-react-native-with-reanimated)
- Source URL: https://shopify.engineering/building-arrives-confetti-in-react-native-with-reanimated
- Ingested by Yomu: 2026-08-31T01:12:58.795Z

[Read original post](https://shopify.engineering/building-arrives-confetti-in-react-native-with-reanimated)