Legend List

https://www.legendapp.com/open-source/list/v2
Admin
Legend List is a high-performance virtualized ScrollView library for React Native, offering faster,...
Tokens:1,320
Snippets:14
Trust Score:8.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Legend List Package

Source: https://www.legendapp.com/open-source/list/v2/version-2

Install the Legend List package using your preferred package manager.

```bash
@legendapp/list
```

--------------------------------

### Infinite Scroll Example Implementation

Source: https://www.legendapp.com/open-source/list/v2/examples/infinite-scrolling

This React component demonstrates two-way infinite scrolling with Legend List. It includes functions to load more items at the end and previous items at the start, managing loading states and updating the data array. Ensure `fetchMoreItems` and `fetchPreviousItems` are defined elsewhere.

```typescript
import { LegendList } from "@legendapp/list";
import { useState, useCallback } from "react";

export function InfiniteScrollExample() {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(false);

  const loadMoreAtEnd = useCallback(async () => {
    if (loading) return;

    setLoading(true);
    try {
      const newItems = await fetchMoreItems(data.length);
      setData(prev => [...prev, ...newItems]);
    } finally {
      setLoading(false);
    }
  }, [data.length, loading]);

  const loadMoreAtStart = useCallback(async () => {
    if (loading) return;

    setLoading(true);
    try {
      const newItems = await fetchPreviousItems(data[0]?.id);
      setData(prev => [...newItems, ...prev]);
    } finally {
      setLoading(false);
    }
  }, [data, loading]);

  return (
    <LegendList
      data={data}
      renderItem={({ item }) => <MessageItem item={item} />}
      keyExtractor={item => item.id}
      onEndReached={loadMoreAtEnd}
      onStartReached={loadMoreAtStart}
      onEndReachedThreshold={0.5}
      onStartReachedThreshold={0.5}
      recycleItems
    />
  );
}
```

--------------------------------

### Implement Chat Interface with Legend List

Source: https://www.legendapp.com/open-source/list/v2/examples/chat-interfaces

Use `alignItemsAtEnd`, `maintainScrollAtEnd`, and `maintainScrollAtEndThreshold` to configure Legend List for a chat interface. This example shows how to render items and set the scroll behavior.

```jsx
  <LegendList
    data={items}
    renderItem={({ item }) => <Text>{item.title}</Text>}
    estimatedItemSize={320}
    alignItemsAtEnd
    maintainScrollAtEnd
    maintainScrollAtEndThreshold={0.1}
  />
```

--------------------------------

### Infinite Scrolling Callbacks

Source: https://www.legendapp.com/open-source/list/v2/examples/infinite-scrolling

These callbacks are used to trigger data loading when the user scrolls near the start or end of the list. `onEndReached` is typical for loading more data, while `onStartReached` can be used for chat interfaces. Consider `maintainVisibleContentPosition` when using `onStartReached` to prevent viewport shifts.

```typescript
onStartReached?: ((info: { distanceFromStart: number }) => void) | null | undefined;
onStartReachedThreshold?: number;
onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
onEndReachedThreshold?: number;
```

--------------------------------

### Chat Interface Props for Legend List

Source: https://www.legendapp.com/open-source/list/v2/examples/chat-interfaces

These props control the alignment and scroll behavior for chat-like interfaces. `alignItemsAtEnd` adds padding to stick items to the bottom. `maintainScrollAtEnd` keeps the scroll position at the bottom when data updates. `maintainScrollAtEndThreshold` defines the scroll percentage considered 'at the bottom'.

```typescript
alignItemsAtEnd?: boolean;
maintainScrollAtEnd?: boolean;
maintainScrollAtEndThreshold?: number;
```
Tokens:
Raw