ListView

Antes do React Native 0.43, o componente ListView era usado para renderizar listas de itens. No entanto, a partir dessa versão, o ListView foi marcado como obsoleto em favor dos componentes FlatList e SectionList, que oferecem melhor desempenho e flexibilidade. Portanto, é altamente recomendado usar FlatList ou SectionList para criar listas em suas aplicações React Native.

Aqui está um exemplo básico de como usar o componente FlatList para renderizar uma lista de itens:

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.

Se você precisar de agrupamento de itens, você pode usar o componente SectionList, que é semelhante ao FlatList mas suporta seções em sua lista.

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

const MeuComponente = () => {
  const dados = [
    {
      title: 'A',
      data: ['Item 1', 'Item 2', 'Item 3'],
    },
    {
      title: 'B',
      data: ['Item 4', 'Item 5', 'Item 6'],
    },
  ];

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

  const renderSectionHeader = ({ section }) => (
    <View style={styles.sectionHeader}>
      <Text>{section.title}</Text>
    </View>
  );

  return (
    <SectionList
      sections={dados}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

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

export default MeuComponente;

Neste exemplo, SectionList é usado para renderizar uma lista de itens agrupados em seções (“A” e “B” neste caso). sections recebe um array de objetos, onde cada objeto tem uma propriedade title para o título da seção e uma propriedade data para os itens da seção.

Esses componentes (FlatList e SectionList) são recomendados para a maioria dos casos de uso em que você precisa exibir listas em um aplicativo React Native. Eles oferecem desempenho otimizado para grandes conjuntos de dados e são altamente configuráveis para atender às suas necessidades específicas.