# shopify/flash-list

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/shopify-flash-list).**

6,944 stars · 356 forks · TypeScript · mit

## Links

- GitHub: https://github.com/Shopify/flash-list
- Homepage: https://shopify.github.io/flash-list/
- awesome-repositories: https://awesome-repositories.com/repository/shopify-flash-list.md

## Description

This project provides high-performance list components for React Native that utilize a view-recycling rendering engine. It is designed to display large datasets by reusing existing components instead of destroying and recreating them, which reduces memory usage and prevents blank cells during fast scrolling.

The library distinguishes itself through a specialized virtualized list manager and support for masonry grid layouts, which allow for multiple columns with varying item heights. It includes a type-based recycling system that ensures the correct component structure is reused for specific data models and coordinates layout transitions to maintain visual smoothness.

The capability surface covers multi-directional layouts, right-to-left support, and advanced scrolling mechanisms such as sticky headers, programmatic scroll control, and infinite scrolling triggers. It also includes observability tools for tracking item viewability and monitoring rendering performance.

## Tags

### User Interface & Experience

- [View Recycling Systems](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems.md) — Implements a high-performance rendering engine that reuses view components to optimize memory and eliminate blank cells.
- [State Synchronization](https://awesome-repositories.com/f/user-interface-experience/component-input-controls/state-synchronization.md) — Synchronizes local component state changes with the list layout to ensure efficiency during view recycling. ([source](https://shopify.github.io/flash-list/docs/usage))
- [Dynamic Item Layout Syncing](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/dynamic-item-layout-syncing.md) — Updates component dimensions based on local state changes to ensure smooth resizing during list recycling. ([source](https://shopify.github.io/flash-list/docs/v2-changes))
- [Virtualized List Managers](https://awesome-repositories.com/f/user-interface-experience/scroll-areas/virtualized-list-managers.md) — Manages infinite scrolling, sticky headers, and programmatic scroll offsets within complex mobile interfaces.
- [Scrolling Performance Optimizations](https://awesome-repositories.com/f/user-interface-experience/scrolling-performance-optimizations.md) — Optimizes rendering speed and scroll smoothness to eliminate blank spaces during fast scrolling in mobile apps.
- [Layout State Refreshes](https://awesome-repositories.com/f/user-interface-experience/state-driven-view-refreshing/layout-state-refreshes.md) — Synchronizes internal component state changes with the layout engine to trigger immediate dimension re-calculations.
- [Dynamic Height Calculation](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts/dynamic-height-calculation.md) — Automatically determines item heights based on content to support variable-height list elements.
- [Recycled Item State Resets](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems/recycled-item-state-resets.md) — Clears local state in recycled items when dependencies change to prevent data leakage between reused views. ([source](https://shopify.github.io/flash-list/docs/v2-changes))
- [Type-Based Item Recycling](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems/type-based-item-recycling.md) — Assigns specific types to items to ensure the recycling system reuses the correct component for each data type. ([source](https://shopify.github.io/flash-list/docs/usage))
- [Type-Based Recycling](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems/type-based-recycling.md) — Ensures the correct component structure is reused for specific data models via a type-based recycling system.
- [Virtualized List Rendering](https://awesome-repositories.com/f/user-interface-experience/virtualized-list-rendering.md) — Provides high-performance rendering for large datasets by displaying only items currently visible in the viewport.
- [Virtualized Scroll Management](https://awesome-repositories.com/f/user-interface-experience/virtualized-scroll-management.md) — Tracks visible item indices and offsets to maintain a stable scroll position while swapping content.
- [Advanced List Navigation](https://awesome-repositories.com/f/user-interface-experience/advanced-list-navigation.md) — Provides advanced navigation features including sticky headers and programmatic scroll control for mobile interfaces.
- [Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/grid-layouts.md) — Supports versatile item arrangements including vertical, horizontal, and multi-column grid layouts. ([source](https://shopify.github.io/flash-list/docs/usage))
- [Infinite Scroll Components](https://awesome-repositories.com/f/user-interface-experience/infinite-scroll-components.md) — Implements components that automatically load additional content as the user reaches the end of a list.
- [Item Viewability Trackers](https://awesome-repositories.com/f/user-interface-experience/item-viewability-trackers.md) — Detects when items enter or leave the visible area and triggers callbacks based on custom configurations. ([source](https://shopify.github.io/flash-list/docs/usage))
- [Masonry Layouts](https://awesome-repositories.com/f/user-interface-experience/layout-containers/masonry-layouts.md) — Supports grid layouts where elements are placed in the next available vertical space to create balanced columns.
- [Rendering Performance Monitors](https://awesome-repositories.com/f/user-interface-experience/rendering-performance-monitors.md) — Reports draw times and identifies blank spaces during fast scrolling to monitor rendering performance. ([source](https://shopify.github.io/flash-list/docs/usage))
- [Sticky Header Pinning](https://awesome-repositories.com/f/user-interface-experience/sticky-header-pinning.md) — Fixes headers to the top of the viewport during scrolling and triggers callbacks on header changes. ([source](https://shopify.github.io/flash-list/docs/usage))

### Data & Databases

- [Recycling Key Generators](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/caching-performance/caching-strategies/cache-key-generators/recycling-key-generators.md) — Creates efficient mapping keys for items during rendering to maximize recycling performance and reduce lag. ([source](https://shopify.github.io/flash-list/docs/v2-changes))

### Mobile Development

- [React Native Components](https://awesome-repositories.com/f/mobile-development/react-native-ecosystem/react-native-components.md) — Provides specialized high-performance list components designed specifically for React Native mobile development.

### Web Development

- [Infinite Scrolling](https://awesome-repositories.com/f/web-development/search-result-management/infinite-scrolling.md) — Implements automated content loading as the user scrolls to the start or end of the list. ([source](https://shopify.github.io/flash-list/docs/usage))