Shopify is investing in React Native as our primary choice of mobile technology moving forward. As a part of this we’ve rewritten our package tracking app Arrive with React Native and launched it on Android—an app that previously only had an iOS version. One of the most cherished features by the users of the Arrive iOS app is the confetti that rains down on the screen when an order is delivered. The effect was implemented using the built-in CAEmitterLayer class in iOS, producing waves of confetti bursting out with varying speeds and colors from a single point at the top of the screen. When we on the Arrive team started building the React Native version of the app, we included the same native code that produced the confetti effect through a Native Module wrapper. This would only work on iOS however, so to bring the same effect to Android we had two options before us: Write a counterpart to the iOS native code in Android with Java or Kotlin, and embed it as a Native Module. Implement the effect purely in JavaScript, allowing us to share the same code on both platforms. As you might have guessed from the title of this blog post, we decided to go with the second option. To keep the code as performant as the native implementation, the best option would be to write it in a declarative fashion with the help of the Reanimated library. I’ll walk you through, step by step, how we implemented the effect in React Native, while also explaining what it means to write an animation declaratively. When we worked on this implementation, we also decided to make some visual tweaks and improvements to the effect along the way. These changes make the confetti spread out more uniformly on the screen, and makes them behave more like paper by rotating along all three dimensions. Laying Out the Confetti Defining Animations Declaratively Animating the Confetti Staggering Animations Containing the Confetti Adding a Cannon and a Dimension Driving Native-level Animation with JavaScript Laying Out
NayaRead shows a summary and links to the original article. The full article is hosted on shopify.engineering.