FlatList Alternative for Dynamic Content – Legend List

Description:

Legend List is a React Native list component built entirely in TypeScript.

It serves as a high-performance alternative to the standard FlatList and FlashList components.

Features

• ⚡ High Performance: The component is heavily optimized to deliver rendering speeds that surpass FlatList and other list libraries in most situations.
• 📏 Dynamic Item Sizes: It natively supports items with variable heights without impacting performance, a common challenge with standard list components.
• 🔄 Component Recycling: An optional recycleItems prop allows for the reuse of item components, which boosts performance for long lists.
• 💬 Chat UI Enhancements: Features like alignItemsAtEnd and maintainScrollAtEnd provide specialized support for building chat applications, correctly aligning content without requiring list inversion.
• 📜 Bidirectional Infinite Scrolling: The component supports infinite scrolling in both upward and downward directions without scroll jumps or content flashes.
• 🧩 100% JavaScript: Legend List requires no native module linking, which ensures a straightforward integration process across different platforms.

Preview

Use Cases

• Chat Applications: You can build smooth, responsive chat interfaces that automatically scroll to the latest message and correctly align content as new messages arrive.
• Social Media Feeds: It efficiently renders infinite scrolling feeds with diverse content types, such as posts with varying text lengths, images, and videos.
• Product Catalogs: You can display extensive lists of products in e-commerce applications where each item might have a different height due to descriptions or images.
• News Aggregators: It is suitable for creating news feeds that load articles continuously, providing a seamless reading experience for users.

How to Use It

1. Add the Legend List package to your project using your preferred package manager.

Using Bun:

bun add @legendapp/list

Using npm:

npm install @legendapp/list

Using Yarn:

yarn add @legendapp/list

2. Set up a basic list of user profiles.

Define the data structure for your list items.

interface Profile {
  id: string;
  username: string;
  avatarUrl: string;
  bio: string;
}

Create the list component. The data prop accepts an array of your items, and the renderItem function defines how each item is displayed. For performance, always provide a keyExtractor to assign a unique key to each item.

The recycleItems prop is a key optimization feature. Setting it to true reuses component instances as they scroll out of view, which significantly improves performance. Be mindful that local state within item components may also be reused, so manage state accordingly.

import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { LegendList, LegendListRenderItemProps } from '@legendapp/list';
// Sample data for the list
const userProfiles: Profile[] = [
  { id: '1', username: 'Alex', avatarUrl: 'https://example.com/avatar1.png', bio: 'React Native Developer.' },
  { id: '2', username: 'Maria', avatarUrl: 'https://example.com/avatar2.png', bio: 'Loves building fast mobile apps.' },
  // ... more profiles
];
// Component to render each profile
const ProfileCard = ({ item }: LegendListRenderItemProps<Profile>) => (
  <View style={styles.card}>
    <Image source={{ uri: item.avatarUrl }} style={styles.avatar} />
    <View style={styles.textContainer}>
      <Text style={styles.username}>{item.username}</Text>
      <Text>{item.bio}</Text>
    </View>
  </View>
);
const ProfileListScreen = () => {
  return (
    <LegendList
      data={userProfiles}
      renderItem={ProfileCard}
      keyExtractor={(item) => item.id}
      recycleItems={true}
    />
  );
};
const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    alignItems: 'center',
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 12,
  },
  textContainer: {
    flex: 1,
  },
  username: {
    fontWeight: 'bold',
  },
});
export default ProfileListScreen;

5. Related Resources

• FlashList by Shopify: A performant list component for React Native that also serves as a replacement for FlatList. It is a popular choice for large-scale applications.
• RecyclerListView by Flipkart: A high-performance list view for React Native and web that focuses on memory efficiency and smooth scrolling through cell recycling.
• React Native FlatList Documentation: The official documentation for the built-in FlatList component, providing context for the problems Legend List aims to solve.

FAQs

Q: When should I use Legend List over the built-in FlatList?
A: You should consider Legend List when you are building applications with long or infinite-scrolling lists, especially if the list items have dynamic heights. It offers better performance and a smoother user experience in these scenarios compared to FlatList.

Q: Are there any native dependencies?
A: No, Legend List is implemented entirely in TypeScript and has no native dependencies, which simplifies installation and ensures cross-platform compatibility.

Q: How does the recycleItems prop affect my item components?
A: When recycleItems is enabled, Legend List reuses the same component instances for different items as you scroll. This is great for performance but means you must be careful with local state within your item components, as the state might persist unexpectedly when the component is reused for a new item.

Q: Is it difficult to migrate from FlashList?
A: Migration is generally straightforward. In many cases, you can simply rename the component from FlashList to LegendList. Since Legend List does not recycle items by default, you will need to add the recycleItems prop to match FlashList‘s default behavior.