Liste Veloce in React Native Senza Workaround per le Dimensioni o Moduli Nativi

Se hai mai costruito un'interfaccia complessa in React Native, probabilmente hai maledetto le liste. La FlatList standard inizia a perdere FPS su liste lunghe e intasa la memoria. FlashList di Shopify è notevolmente più veloce grazie al riutilizzo dei componenti, ma prova a fornirgli elementi di altezza imprevedibile come post con quantità variabili di testo e immagini. Micro-blocchi durante lo scorrimento veloce o tremori del layout iniziano quando la lista cerca di indovinare le dimensioni delle celle attraverso estimatedItemSize.

Recentemente, il team di LegendApp ha rilasciato la libreria Legend List. È un componente lista scritto interamente in TypeScript, senza una singola riga di codice nativo, che risolve esattamente questo mal di testa delle dimensioni dinamiche.

Il Concetto

L'obiettivo principale del progetto è fornire un sostituto per FlatList e FlashList con un'API familiare, ma senza cali di prestazioni sugli elementi di altezza variabile. Gli sviluppatori hanno deliberatamente usato solo JavaScript e TypeScript puro. Nessun modulo nativo deve essere collegato. Questo semplifica la costruzione per Expo Go e versioni web, e riduce anche il rischio di rompere qualcosa quando si aggiorna la versione di React Native.

Il progetto è leggero e funziona come sostituto diretto. Se hai già una schermata scritta con FlatList, una migrazione di base richiede solo di cambiare l'importazione e il nome del componente.

Cosa Può Fare la Libreria

Gli sviluppatori si sono concentrati sui problemi tipici con le liste nelle app mobili. Ecco quattro cose che sono notevolmente più convenienti qui:

1. Altezza dinamica out of the box. Non devi pre-calcolare le dimensioni esatte delle schede o passare stime approssimative. La lista si adatta alle dimensioni del contenuto da sola senza ritardo di rendering.

2. Interfaccia chat corretta. Il trucco classico per creare una schermata di messaggistica è capovolgere la lista attraverso inverted. Questo causa bug strani con le animazioni della tastiera, lo scorrimento invertito e il posizionamento. Legend List ha una prop alignItemsAtEnd che allinea il contenuto al bordo inferiore senza inversione, e maintainScrollAtEnd che mantiene lo scroll sull'ultimo messaggio quando arrivano nuovi dati.

3. Scorrimento infinito bidirezionale. Il caricamento dei dati su e giù funziona senza lampeggiamenti di schermata bianca e salti bruschi nella posizione del viewport.

4. Riciclo delle celle controllato. Attraverso la prop recycleItems, puoi abilitare o disabilitare il riutilizzo dei componenti. Se uno stato locale complesso useState è memorizzato all'interno di un elemento della lista, il riutilizzo a volte porta a effetti collaterali spiacevoli con la visualizzazione dello stato di qualcun altro. In Legend List, il riciclo è disabilitato per impostazione predefinita per sicurezza, ma puoi abilitarlo con una singola riga per la massima velocità.

Come Appare nel Codice

L'installazione è standard:

npm install @legendapp/list
# или через bun / yarn
bun add @legendapp/list

Importiamo il componente dalla sottocartella runtime e passiamo le props familiari:

import React, { useRef } from "react"
import { View, Image, Text, StyleSheet } from "react-native"
import { LegendList, LegendListRef, LegendListRenderItemProps } from "@legendapp/list/react-native"

interface PostItem {
  id: string
  author: string
  content: string
  photoUrl?: string
}

export const FeedScreen = ({ posts }: { posts: PostItem[] }) => {
  const listRef = useRef<LegendListRef | null>(null)

  const renderItem = ({ item }: LegendListRenderItemProps<PostItem>) => {
    return (
      <View style={styles.card}>
        <Text style={styles.author}>{item.author}</Text>
        <Text style={styles.text}>{item.content}</Text>
        {item.photoUrl && (
          <Image source={{ uri: item.photoUrl }} style={styles.image} />
        )}
      </View>
    )
  }

  return (
    <LegendList
      data={posts}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      recycleItems={true}
      maintainVisibleContentPosition
      ref={listRef}
    />
  )
}

const styles = StyleSheet.create({
  card: { padding: 16, borderBottomWidth: 1, borderColor: "#eee" },
  author: { fontWeight: "bold", marginBottom: 4 },
  text: { fontSize: 14, lineHeight: 20 },
  image: { width: "100%", height: 200, marginTop: 8, borderRadius: 8 },
})

La prop maintainVisibleContentPosition mantiene il contenuto sullo schermo se le dimensioni degli elementi sopra l'area visibile cambiano o arrivano nuovi dati.

Limitazioni e Piani

Il repository è giovane, è apparso alla fine del 2024. Nella roadmap, gli autori dichiarano apertamente cosa non c'è ancora:

• Griglie masonry (piastrelle di altezze variabili)
• Header appiccicosi
• Span di colonne
• Tipi di elementi separati (getItemType)

Se la tua schermata si basa su una griglia complessa con sezioni appiccicose, è troppo presto per migrare.

Chi Dovrebbe Provarlo

La libreria è utile per chi è stanco di combattere i salti dell'interfaccia nelle chat, nei feed di notizie o negli elenchi di commenti. Se FlashList trema sulle tue schede dinamiche e FlatList non fornisce la fluidità di cui hai bisogno, installa @legendapp/list in un branch di test. Ci vogliono un paio di minuti per verificare poiché non dovrai modificare la struttura del componente o scrivere wrapper nativi.