FlatList

FlatList é um componente eficiente para renderizar listas longas e complexas em React Native. Ele oferece alto desempenho ao renderizar apenas os itens visíveis na tela, economizando recursos e melhorando a experiência do usuário. Abaixo está um exemplo básico de como usar o componente FlatList:

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const MeuComponente = () => {
  const listaItens = Array.from({ length: 50 }, (_, index) => ({ key: `${index}`, texto: `Item ${index + 1}` }));

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.texto}</Text>
    </View>
  );

  return (
    <FlatList
      data={listaItens}
      renderItem={renderItem}
      keyExtractor={(item) => item.key}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default MeuComponente;

Neste exemplo, FlatList é usado para renderizar uma lista de 50 itens. A propriedade data recebe um array de objetos, onde cada objeto tem uma chave única (key) e um texto associado (texto). A função renderItem é usada para renderizar cada item da lista, e keyExtractor é usado para extrair chaves únicas para cada item.

Props Importantes do FlatList:

• data: Um array de dados para serem renderizados.
• renderItem: Uma função que renderiza um item de dados em um componente.
• keyExtractor: Uma função que extrai uma chave única para cada item.
• numColumns: Número de colunas para layout multi-coluna (padrão é 1 para lista vertical).
• horizontal: Se a lista deve ser renderizada horizontalmente (padrão é false).
• ItemSeparatorComponent: Componente a ser renderizado entre os itens.
• ListHeaderComponent e ListFooterComponent: Componentes que aparecem no início e no final da lista, respectivamente.
• onEndReached: Função chamada quando todos os itens foram renderizados e o usuário está rolando para o fim da lista.
• onRefresh: Função chamada quando o usuário solicita uma atualização puxando a lista para baixo.

O FlatList é altamente personalizável e pode lidar com grandes volumes de dados de maneira eficiente. Ele é amplamente utilizado em aplicativos React Native para criar interfaces de usuário eficientes e responsivas.