1 of 17

App.js

1 <FlatList

2 data={frutas}

3 ...

4 />

FLATLIST

no React Native

Prof. Bruno Rover Dal Prá

2 of 17

O que vamos aprender

O problema

Por que listar itens com .map() dentro de um ScrollView não é uma boa ideia.

A anatomia

As três props essenciais do FlatList: data, renderItem e keyExtractor.

O código

Um exemplo completo, explicado parte por parte, e recursos extras do FlatList.

Introdução

FlatList no React Native

3 of 17

O que é o FlatList?

É o componente do React Native usado para exibir listas — de dezenas ou milhares de itens — dentro do app
Pense em uma lista de contatos, de produtos de uma loja, ou de mensagens de um chat: todas costumam usar FlatList
Sua grande vantagem é a virtualização: ele só desenha na tela os itens que estão visíveis no momento
Conforme o usuário rola a lista, o FlatList desenha os novos itens e "descarta" os que saíram da tela — economizando memória e deixando o app mais rápido

📱 Contato 1

📱 Contato 2

📱 Contato 3

📱 Contato 4

↕ tela visível

Conceito

FlatList no React Native

4 of 17

Por que não usar ScrollView + map()?

Ruim.js

1 <ScrollView>

2 {frutas.map((item) => (

3 <Text key={item.id}>

4 {item.nome}

5 </Text>

6 ))}

7 </ScrollView>

❌ Renderiza TODOS os itens de uma vez, mesmo os que estão fora da tela

Bom.js

1 <FlatList

2 data={frutas}

3 keyExtractor={(item) => item.id}

4 renderItem={({ item }) => (

5 <Text>{item.nome}</Text>

6 )}

7 />

✅ Renderiza só o que aparece na tela, sob demanda (virtualização)

Conceito

FlatList no React Native

5 of 17

As 3 props essenciais do FlatList

📦

data

O array com as informações que vão virar itens da lista (ex.: frutas, contatos, produtos).

🎨

renderItem

A função que diz como cada item deve aparecer na tela — roda uma vez para cada elemento do array.

🔑

keyExtractor

A função que devolve um identificador único (string) para cada item, ajudando o React a controlar a lista.

Anatomia do FlatList

FlatList no React Native

6 of 17

Exemplo completo

App.js

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

3 const frutas = [

4 { id: '1', nome: 'Banana' },

5 { id: '2', nome: 'Maçã' },

6 { id: '3', nome: 'Uva' },

7 { id: '4', nome: 'Laranja' },

8 ];

10 export default function App() {

11 return (

12 <FlatList

13 data={frutas}

14 keyExtractor={(item) => item.id}

15 renderItem={({ item }) => (

16 <View style={{ padding: 16 }}>

17 <Text style={{ fontSize: 18 }}>{item.nome}</Text>

18 </View>

19 )}

20 />

21 );

22 }

Exemplo completo

FlatList no React Native

7 of 17

Os dados (linhas 3 a 8)

App.js

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

3 const frutas = [

4 { id: '1', nome: 'Banana' },

5 { id: '2', nome: 'Maçã' },

6 { id: '3', nome: 'Uva' },

7 { id: '4', nome: 'Laranja' },

8 ];

10 export default function App() {

11 return (

12 <FlatList

13 data={frutas}

14 keyExtractor={(item) => item.id}

15 renderItem={({ item }) => (

16 <View style={{ padding: 16 }}>

17 <Text style={{ fontSize: 18 }}>{item.nome}</Text>

18 </View>

19 )}

20 />

21 );

22 }

Criamos um array chamado frutas: uma lista de objetos comuns em JavaScript, nada específico do React Native ainda
Cada objeto tem um id (texto único) e um nome (o que será exibido na tela)
Esse array é a matéria-prima da lista: é ele que vamos entregar para a prop data do FlatList

Explicando o código

FlatList no React Native

8 of 17

A prop renderItem (linhas 15 a 19)

App.js

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

3 const frutas = [

4 { id: '1', nome: 'Banana' },

5 { id: '2', nome: 'Maçã' },

6 { id: '3', nome: 'Uva' },

7 { id: '4', nome: 'Laranja' },

8 ];

10 export default function App() {

11 return (

12 <FlatList

13 data={frutas}

14 keyExtractor={(item) => item.id}

15 renderItem={({ item }) => (

16 <View style={{ padding: 16 }}>

17 <Text style={{ fontSize: 18 }}>{item.nome}</Text>

18 </View>

19 )}

20 />

21 );

22 }

renderItem recebe um objeto e, com { item }, pegamos direto o item atual sendo desenhado
Essa função roda uma vez para CADA elemento do array data — é o "molde" visual de um item da lista
Aqui ela devolve um <View> com um <Text> mostrando item.nome — mas poderia ser qualquer JSX (imagem, botão, etc.)

Explicando o código

FlatList no React Native

9 of 17

A prop keyExtractor (linha 14)

App.js

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

3 const frutas = [

4 { id: '1', nome: 'Banana' },

5 { id: '2', nome: 'Maçã' },

6 { id: '3', nome: 'Uva' },

7 { id: '4', nome: 'Laranja' },

8 ];

10 export default function App() {

11 return (

12 <FlatList

13 data={frutas}

14 keyExtractor={(item) => item.id}

15 renderItem={({ item }) => (

16 <View style={{ padding: 16 }}>

17 <Text style={{ fontSize: 18 }}>{item.nome}</Text>

18 </View>

19 )}

20 />

21 );

22 }

Toda lista dinâmica precisa de uma forma de identificar cada item de forma única para o React
keyExtractor recebe o item e devolve essa "identidade" — aqui, usamos o próprio item.id
Sem ela, o FlatList mostra um aviso no console e pode ter bugs de performance ao atualizar a lista

Explicando o código

FlatList no React Native

10 of 17

O componente FlatList (linhas 12 a 20)

App.js

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

3 const frutas = [

4 { id: '1', nome: 'Banana' },

5 { id: '2', nome: 'Maçã' },

6 { id: '3', nome: 'Uva' },

7 { id: '4', nome: 'Laranja' },

8 ];

10 export default function App() {

11 return (

12 <FlatList

13 data={frutas}

14 keyExtractor={(item) => item.id}

15 renderItem={({ item }) => (

16 <View style={{ padding: 16 }}>

17 <Text style={{ fontSize: 18 }}>{item.nome}</Text>

18 </View>

19 )}

20 />

21 );

22 }

O <FlatList> é quem junta tudo: ele lê data, chama renderItem para cada item e usa keyExtractor para controlá-los
Sozinho, ele também cuida da rolagem (scroll) e da virtualização — não precisamos programar nada disso
Repare que ele substitui totalmente o ScrollView + map() do começo da aula, com muito menos código e mais performance

Explicando o código

FlatList no React Native

11 of 17

E quando não existe um id no array?

App.js

1 const frutas = ['Banana', 'Maçã', 'Uva', 'Laranja'];

3 <FlatList

4 data={frutas}

5 keyExtractor={(item, index) => index.toString()}

6 renderItem={({ item }) => (

7 <Text>{item}</Text>

8 )}

9 />

Aqui data é só um array de strings — não existe nenhum campo "id" para usar
keyExtractor sempre recebe dois parâmetros: o item e o index (a posição dele no array)
Sem um identificador melhor, podemos usar o próprio index, convertido em texto: index.toString()
Cuidado: se essa lista puder reordenar ou ganhar/perder itens no meio, usar o index como key pode causar os bugs visuais que vimos nos erros comuns — o ideal, sempre que possível, é adicionar um id de verdade aos dados

keyExtractor sem id

FlatList no React Native

12 of 17

PARA IR ALÉM

Recursos extras do FlatList

Props que resolvem problemas comuns do dia a dia

13 of 17

Cabeçalho, rodapé e lista vazia

App.js

1 <FlatList

2 data={frutas}

3 ListHeaderComponent={

4 <Text>Frutas</Text>

5 }

6 ListEmptyComponent={

7 <Text>Nada encontrado</Text>

8 }

9 ...

10 />

ListHeaderComponent aparece uma vez, no topo, antes do primeiro item
ListFooterComponent (não mostrado) aparece uma vez, no final da lista
ListEmptyComponent só é exibido quando o array data está vazio ([])

Recursos extras

FlatList no React Native

14 of 17

Separador, lista horizontal e grade

App.js

1 <FlatList

2 data={frutas}

3 numColumns={2}

4 ItemSeparatorComponent={() => (

5 <View style={{ height: 8 }} />

6 )}

7 ...

8 />

ItemSeparatorComponent desenha um espaço/linha entre os itens (nunca antes do primeiro ou depois do último)
horizontal (booleano) faz a lista rolar da esquerda para a direita, como um carrossel
numColumns organiza os itens em grade — não pode ser usado junto com horizontal

Recursos extras

FlatList no React Native

15 of 17

Carregando mais itens ao rolar

App.js

1 <FlatList

2 data={frutas}

3 onEndReached={buscarMaisFrutas}

4 onEndReachedThreshold={0.5}

5 ...

6 />

onEndReached executa uma função quando o usuário rola perto do fim da lista
onEndReachedThreshold (de 0 a 1) define "o quão perto" do fim isso deve acontecer — 0.5 dispara na metade da última tela
É a base da rolagem infinita: usada para buscar mais dados de uma API conforme o usuário rola

Recursos extras

FlatList no React Native

16 of 17

Erros comuns ao usar o FlatList

Esquecer o keyExtractor

O React mostra um aviso no console e pode ter problemas de performance ou de identificação dos itens.

Usar o índice (index) como chave

Se a lista muda de ordem ou ganha/perde itens, o React pode confundir qual item é qual.

Modificar o array direto (frutas.push())

Mutar o array não avisa o React de nada — crie sempre um array novo com o item adicionado.

Colocar FlatList dentro de ScrollView

Isso quebra a virtualização (o motivo de usar FlatList) e gera avisos no console.

Boas práticas

FlatList no React Native

17 of 17

Resumo do que aprendemos

Por que FlatList

Renderiza só os itens visíveis na tela (virtualização) — muito mais leve que ScrollView + map()

As 3 props essenciais

data (o array), renderItem (como desenhar) e keyExtractor (identidade única de cada item)

Recursos extras

ListHeaderComponent, ListEmptyComponent, ItemSeparatorComponent, numColumns, onEndReached e mais

Revisão

FlatList no React Native