TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

React Native Animation Performance

13 posts · Feb 2020 – Jul 2025

What this trail covers

Shopify has developed and enhanced its use of React Native Skia, a library that exposes Skia graphics engine functionality to React Native. This involves leveraging Skia's primitives for custom drawings, animations, and visual effects, integrating tightly with react-native-reanimated for performant animations and react-native-gesture-handler for interactive gestures. The library enables the creation of advanced UI elements and dynamic user experiences beyond the capabilities of standard React Native. This post details the integration of WebGPU and Skia Graphite, enabling unified backend architecture, web ecosystem symmetry, and general-purpose GPU computing. It showcases the use of Three.js and React Three Fiber with WebGPU, the ComputeToys for compute shaders, and TensorFlow.js for machine learning. Architectural improvements to React Native Skia's reconciler and scene graph model have led to significant performance gains and expanded platform support to macOS, tvOS, and Node.js. Skia Graphite offers automatic threading and seamless 2D/3D composition.

All Shopify trails
  1. FlashList v2: A ground-up rewrite for React Native's New Architecture (2025) - ShopifyFlashList v2 is a ground-up rewrite for React Native's New Architecture, eliminating the need for item size estimates and native dependencies. It achieves precise scrolling and improved horizontal list support through progressive rendering, predictions, and corrections within `useLayoutEffect`. The new architecture enables synchronous layout measurements, leading to faster load times and smoother scrolling. Advanced features include improved scroll position maintenance, masonry support, and control over the recycle pool.
  2. The Future of React Native Graphics: WebGPU, Skia, and Beyond (2025) - ShopifyThis post details the integration of WebGPU with React Native Skia, enabling a unified backend architecture (replacing separate OpenGL and Metal implementations) and symmetry with the web ecosystem. It showcases the use of Three.js and React Three Fiber with WebGPU, compute shaders via ComputeToys, and TensorFlow.js for ML workloads. Architectural improvements to React Native Skia's reconciler (moving from mutable SkiaDOM to an immutable fabric reconciler) have resulted in significant performance gains (up to 50% faster on iOS, nearly 200% faster on Android for animation time) and expanded platform support to macOS, tvOS, and Node.js. Skia Graphite, a new Skia backend for modern GPU APIs, is introduced, offering automatic threading and seamless 2D/3D composition.
  3. Improving Shopify App’s Performance - ShopifyThis post details the performance improvement journey of the Shopify App, focusing on optimizing critical screens to load under 500ms (P75) and app launch within 2s (P75). Key technical contributions include: implementing LazyScrollView powered by FlashList to render only visible content, optimizing the Home screen by not waiting for all queries, switching horizontal lists to FlashList, rewriting screens as lists using ListSource for optimized rendering and updates, enabling inlineRequires in metro.config.js for a 17% launch time improvement, optimizing native module initialization, freezing background components to reduce navigation time by up to 70%, enhancing the Restyle library for a 5-10% performance boost, implementing custom code for batched state updates improving screen load time by 15-30%, tracking and improving cache hits by resolving GraphQL cache issues, and pre-warming the cache for critical screens to achieve 90% cache-first loads.
  4. Getting Started with React Native Skia - ShopifyThis post introduces React Native Skia to a broader audience by providing a getting started guide. It covers the use cases for RN Skia, demonstrating how to draw basic shapes and custom paths using SVG notation and imperative commands. It details how to integrate with `react-native-reanimated` for animations, explaining shared values and animation functions like `withRepeat` and `withSpring`. It also shows how to add interactivity using `react-native-gesture-handler` and apply simple visual effects like blur. The post includes code examples and challenges for readers to practice.
  5. Making Your React Native Gestures Feel Natural - ShopifyThis post details specific improvements to gesture handling in React Native's Sheet component. It addresses issues with drag speed and animation duration by incorporating `event.velocityY` and `withSpring` animations. It also introduces a resistance mechanism by dividing the drag distance to provide intuitive feedback when a gesture reaches its limit. The implementation uses `useAnimatedGestureHandler` from `react-native-reanimated` and demonstrates how to apply these techniques for a more natural and responsive user experience.
  7. React Native Skia: A Year in Review and a Look Ahead - ShopifyThis post details the evolution of React Native Skia over its first year, highlighting the transition from an alpha release to a fully-tailored declarative architecture. Key technical advancements include the development of Skia DOM for UI thread rendering, which executes drawings outside the JavaScript thread and minimizes JSI allocations, leading to significant performance improvements. The post also discusses platform compatibility (iOS, Android, Web, Node.js), integration with Expo, and the extensibility of the library through modules like Skottie and Vision Camera. Quality assurance efforts, including end-to-end testing and documentation with Docusaurus and Shiki Twoslash, are also highlighted. Future work will focus on leveraging Skia DOM for animations.
  8. Our Solution for Measuring React Native Rendering Times - ShopifyIntroduces the open-source `@shopify/react-native-performance` library to measure rendering times in React Native apps, including app startup, navigation, and screen re-renders. Details the library's internal workings, including render passes, state machine, and the definition of 'rendered' as the moment a screen becomes interactive. Provides guidance on integrating the library into Android, iOS, and TypeScript codebases, and outlines usage for measuring different types of render times.
  9. What We Learned from Open-Sourcing FlashList - ShopifyThis post details the open-sourcing of FlashList, a React Native list library developed at Shopify to address performance issues with FlatList and RecyclerListView. It covers the problem definition, solution prototyping, team assembly, and the strategy for open-sourcing, including building a landing page, blog post, and community engagement. The post highlights the technical approach of combining the API of FlatList with the performance of RecyclerListView and discusses the impact of the open-source launch, including community adoption and feedback.
  10. React Native Skia—For Us, For You, and For Fun - ShopifyThis post introduces React Native Skia, a new library that brings the Skia 2D graphics engine to React Native. It leverages the new React Native architecture (JSI) for direct JavaScript-to-native communication, exposing Skia's drawing primitives. The API is designed to be highly compatible with Flutter's Skia API, enabling declarative UI construction and optimizations via the React Reconciler. It offers advanced features like image filters, shaders, SVG support, and integrates with Reanimated 2 for performant animations.
  11. How We Built the Add to Favorite Animation in Shop - ShopifyThis post details the implementation of a specific animation sequence in the Shop app using React Native Reanimated. It breaks down the animation into sequential steps, explaining how to animate multiple properties concurrently using a single shared progress value. Key concepts like interpolation and clamping are explained with code examples for animating opacity, scale, and translation of a product thumbnail, as well as animating the color and position of a tab bar icon. The post also highlights the use of a 'match cut' technique to create a seamless transition between animations and discusses the benefits of using Reanimated's `withDelay` over `setTimeout` for UI thread animations.
  12. A First Look at Reanimated 2 - ShopifyThis post introduces Reanimated 2, a significant paradigm shift in building gestures and animations in React Native. It moves from Reanimated 1's declarative DSL to an animation worklet model, where JavaScript functions run on the UI thread independently from the main JavaScript thread. This eliminates the need to cross the React Native bridge for many operations, improving performance and reducing complexity. The post details the new API hooks: `useSharedValue`, `useDerivedValue`, `useAnimatedGestureHandler`, `useAnimatedStyle`, and `useAnimatedProps`, and provides an example of a draggable object. It highlights the benefits of reduced learning curve, expanded instruction set, and improved initialization performance.
  13. Building Arrive's Confetti in React Native with Reanimated - ShopifyThis post details the implementation of a confetti animation in React Native using the Reanimated library. It explains the transition from native iOS code to a cross-platform JavaScript implementation, focusing on declarative animation principles. The post covers laying out confetti, defining animations declaratively, animating velocities and angles, staggering animations with delays, containing confetti with bouncing behavior, and adding 3D rotation. It highlights the performance benefits of offloading animation computation to the native UI thread.
  14. Creating Native Components That Accept React Native Subviews - ShopifyThis post details how to create a native Android component that can render React Native views inside of it, specifically demonstrating a bottom sheet implementation. It covers setting up Gradle dependencies, creating a ReactPackage, defining a ViewGroupManager, inflating XML layouts, handling views passed from React Native, referencing the native component in React Native, and adding gesture handling with BottomSheetBehavior. The contribution focuses on bridging native Android UI elements with React Native components.