List State Motion Blog Overview

Getting Started (React Native)Keyboard & Animated

Getting Started (Web)

Chat AI Chat Notifications Inbox Directory Sectioned Directory Activity History Product Shelf Cards Feed Gallery Grid Media Rails Video Feed Infinite Calendar Library Benchmark

API Reference Guides Performance Migration to v3

Legend App Home Kit List State Motion Blog

React (Web)

Examples

Curated product-style examples for Legend List on the web.

Messaging

Real-time messaging with auto-scroll anchoring and append stability.

Streaming AI responses with token-by-token rendering.

Notifications Inbox

Prepend-driven inbox with unread state and live additions.

Directory

Searchable contact list with instant filtering.

Sectioned Directory

Grouped contacts with persistent sticky section headers.

Activity History

Bidirectional transaction feed with live status updates.

Commerce

Multi-column grid with full-width sticky section headers.

Rich mixed-content feed with recycled interactive state.

Responsive grid with dynamic column count switching.

Media

Nested horizontal carousels inside a vertical list.

Full-screen paging feed with viewport-sized items.

Infinite Calendar

Bidirectional infinite scrolling with month-based pagination.

Comparison

Library Benchmark

Manual cross-library benchmark for side-by-side scrolling comparison.

Source fixtures

The source repo also includes lower-level fixtures for behavior and regression surfaces that are not embedded as polished docs examples:

Chat floating composer shows contentInsetEndAdjustment with a measured overlay composer.
AI chat floating composer combines contentInsetEndAdjustment, anchoredEndSpace, and initialScrollAtEnd.
Initial scroll at end covers end-starting lists.
Window scroll covers useWindowScroll.
Library benchmark is the current source-side cross-library comparison example.

Getting Started (Web)

Previous Page

Chat

Next Page

On this page

Source fixtures