Au 12 - Mobile - React Native - Estilizando a lista de produtos - Mestres BEGIN

Nesta aula prática, vamos transformar a renderização de uma lista de produtos em React Native, substituindo a abordagem tradicional por FlatList, um componente otimizado para performance e funcionalidades avançadas.

Por que usar FlatList?

O FlatList é o componente ideal para listas em React Native porque:

Renderização eficiente: Carrega apenas os itens visíveis na tela
Performance: Otimizado para listas grandes
Funcionalidades nativas: Rolagem suave, pull-to-refresh, lazy loading
Flexibilidade: Cabeçalhos, rodapés e separadores personalizáveis

Implementação Básica

Substituindo o .map() por FlatList:

1import { FlatList } from "react-native";
2<FlatList
3  data={products}
4  renderItem={({ item }) => <ProductItem product={item} />}
5  keyExtractor={item => item.id.toString()}
6  ListHeaderComponent={<ListHeader />}
7/>

Principais props:

data: Array de produtos
renderItem: Função que renderiza cada item
keyExtractor: Identificador único para cada item
ListHeaderComponent: Componente de cabeçalho

Estrutura do Componente ProductItem

Cada item da lista deve ser um componente independente:

1const ProductItem = ({ product }) => (
2  <View style={styles.itemContainer}>
3    <Text style={styles.name}>{product.name}</Text>
4    <Text style={styles.stock}>{product.stock}</Text>
5    <Text style={styles.price}>{product.price}</Text>
6    <TouchableOpacity onPress={() => handleDelete(product.id)}>
7      <Icon name="delete" size={20} color="red" />
8    </TouchableOpacity>
9  </View>
10);

Estilização com StyleSheet

Crie um arquivo de estilos separado para melhor organização:

1// ProductList.styles.js
2import { StyleSheet } from "react-native";
3export default StyleSheet.create({
4  container: {
5    flex: 1,
6    padding: 16,
7  },
8  itemContainer: {
9    flexDirection: "row",
10    justifyContent: "space-between",
11    paddingVertical: 12,
12    borderBottomWidth: 1,
13    borderColor: "#eee",
14  },
15  header: {
16    flexDirection: "row",
17    paddingBottom: 8,
18    borderBottomWidth: 2,
19    borderColor: "#333",
20  },
21  name: { width: "40%", fontWeight: "bold" },
22  stock: { width: "30%", textAlign: "center" },
23  price: { width: "20%", textAlign: "right" },
24});

Componente de Cabeçalho

Use ListHeaderComponent para títulos das colunas:

1const ListHeader = () => (
2  <View style={styles.header}>
3    <Text style={styles.name}>Nome</Text>
4    <Text style={styles.stock}>Estoque</Text>
5    <Text style={styles.price}>Preço</Text>
6    <View style={{ width: "10%" }} />
7  </View>
8);

Tratamento de Lista Vazia

Melhore a UX com um componente para lista vazia:

1const EmptyList = () => (
2  <View style={styles.emptyContainer}>
3    <Text>Nenhum produto encontrado</Text>
4  </View>
5);
6// Na FlatList
7<FlatList
8  ...
9  ListEmptyComponent={<EmptyList />}
10/>