React Native Animation Performance

7/31/2025

FlashList 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.

6/20/2025

This post details the integration of WebGPU as a backend for React Native Skia, enabling unified graphics rendering across platforms and leveraging libraries like Three.js and TensorFlow.js. It highlights architectural improvements to React Native Skia's reconciler and scene graph, leading to significant performance gains and expanded platform support to macOS, tvOS, and Node.js. The post also introduces Skia Graphite, an experimental Skia backend for modern GPU APIs, which enables automatic threading and seamless 2D/3D composition.

3/5/2024

This 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.

12/4/2023

This post introduces React Native Skia, detailing its use cases for custom drawings and animations. It explains how to draw basic shapes (Circle, Rect, RoundedRect) and more complex paths using SVG notation or imperative commands. The post demonstrates integrating with react-native-reanimated for animations, using shared values and animation functions like `withRepeat` and `withSpring`. It also covers handling gestures with `react-native-gesture-handler` for interactive elements and applying simple visual effects like blur and DashPathEffect.

1/20/2023

This post details improvements to React Native gesture handling for the Shop app's Sheet component. It addresses issues with drag speed and animation duration by incorporating `event.velocityY` for determining open/close states and using `withSpring` for physically realistic animations that account for distance and velocity. It also introduces resistance to dragging beyond the natural bounds of the component to intuitively communicate UI limitations.

12/29/2022

This 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 a custom React Renderer and the Skia DOM API, enabling UI thread rendering for Skia drawings and significantly improving performance by avoiding JavaScript thread bottlenecks and excessive JSI allocations. The post also covers platform integrations (iOS, Android, Web, Node.js), Expo integration, and community contributions like Skottie and React Native Vision Camera. Future work will focus on leveraging Skia DOM for animations.

11/24/2022

Introduces 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.

11/17/2022

This 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.

4/29/2022

Introduces React Native Skia, a library that brings Skia's 2D drawing primitives to React Native. It leverages the new React Native architecture (JSI) for direct communication between JavaScript and native modules, enabling consistent graphical capabilities across iOS, Android, and Web. The API is designed to be compatible with Flutter's Skia API, allowing for potential future support of Skia on the web via CanvasKit. A declarative API is provided on top of the imperative Skia API, utilizing the React Reconciler for diffing and optimization. The post highlights features like image filters, shaders, SVG, path operations, and text layouts, showcasing examples of advanced graphics and animations, including integration with Reanimated 2.

3/25/2022

This post details the implementation of the 'Add to Favorite' animation in the Shop app using React Native and Reanimated. It explains how to sequence multiple animations (product thumbnail fade-in, scale, and slide; favorites tab bar icon color change and bounce) by mapping a single shared progress value to different animation steps. It covers interpolating properties like opacity and scale, and achieving a match cut by ensuring the tab bar icon animation starts immediately when the product thumbnail disappears. The post also contrasts using a shared value with setTimeout for animation sequencing, highlighting the former's advantage in maintaining UI thread responsiveness.

7/2/2020

This post introduces Reanimated 2, a significant upgrade to React Native animation and gesture handling. It details the core concept of 'animation worklets' which are JavaScript functions that run on the UI thread independently of the JavaScript thread. The post contrasts Reanimated 2 with Reanimated 1, highlighting the drawbacks of the previous declarative DSL approach (steep learning curve, limitations, initialization performance issues, and bridge crossing for certain operations). It introduces the new API hooks: `useSharedValue`, `useDerivedValue`, `useAnimatedGestureHandler`, `useAnimatedStyle`, and `useAnimatedProps`. The post provides a practical example of building a draggable object using these new hooks and demonstrates advanced animation techniques with a liquid-swipe example.

4/7/2020

This post details the implementation of a cross-platform confetti effect for the Arrive app using React Native and Reanimated. It explains how to achieve native-level animation performance by driving animations declaratively from JavaScript, leveraging Reanimated's worklets. The implementation includes randomizing velocities, using `Animated.Value` and `Animated.Clock` for animation control, staggering animations with delays, implementing boundary containment with elasticity, and adding 3D rotation to the confetti particles. The post also highlights the benefits of Reanimated for creating complex, performant animations without resorting to native code for each platform.

2/25/2020

This 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.