React Native: Dominando Listas com FlatList e ScrollView

Renderização de Listas usando .map e ScrollView - Apresentação

Apresentando o curso e o instrutor

Olá, bem-vindos ao curso de React Native: dominando listas com ScrollView e FlatList. Meu nome é Antônio Carvalho e serei o instrutor nas próximas aulas.

Audiodescrição: Antônio é um homem de pele branca, com cabelo longo e barba. Ele está usando uma camiseta preta da Alura.

Introduzindo os pré-requisitos e objetivos do curso

Este curso abordará a criação de listas dinâmicas em React Native, utilizando um componente chamado FlatList. Para que este curso seja mais eficaz, é necessário que os participantes tenham alguns conhecimentos prévios. É importante que possuam conhecimentos básicos de React Native, compreendam como funcionam as propriedades e atributos das tags, o funcionamento da passagem de parâmetros usando props, além de hooks como useState e useRef para armazenar estado e consumir APIs. Vamos consumir uma API utilizando uma biblioteca chamada Axios para esse propósito.

Neste curso, não é obrigatório conhecer Axios, mas é importante ter conhecimento sobre HTTP, requisição e resposta para que o curso flua melhor.

Explorando os temas e atividades do curso

Os temas abordados serão a criação de uma lista dinâmica, a refatoração para separar a camada visual da camada de código, a virtualização e renderização usando FlatList para que possamos utilizar o componente. Em seguida, aplicaremos estilos para tornar nossa aplicação mais atraente.

Receberemos os elementos através de uma API REST, utilizando a biblioteca Axios para acessar e trazer os elementos para nossa lista. Desenvolveremos uma aplicação simples, na qual poderemos deslocar, modificar, eliminar, editar e registrar novos elementos. Inicialmente, utilizaremos ScrollView e, posteriormente, FlatList.

Até a próxima!

Renderização de Listas usando .map e ScrollView - Criar componente com lista de contatos

Criando a aplicação inicial

Bem-vindos a este vídeo. Vamos criar agora uma lista de contatos manual e fixar os elementos na tela. Para isso, vamos criar uma nova aplicação.

Primeiro, vamos criar a aplicação usando o comando npx create-expo-app agenda-contato --template blank-typescript. Este comando cria uma aplicação básica com TypeScript, ideal para nosso projeto.

npx create-expo-app agenda-contato --template blank-typescript

Vou pausar o vídeo e voltaremos quando estiver concluído.

Configurando o ambiente de desenvolvimento

Pronto, voltamos. A pasta está aqui. Vamos acessar o diretório da agenda de contato com o comando cd agenda-contato\.

cd agenda-contato\

Dentro desse diretório, vamos abrir o Visual Studio Code com o comando code ..

code .

Ao abrir o Visual Studio Code na pasta em que estamos trabalhando, podemos visualizar o projeto e seus arquivos. Vamos abrir o arquivo app.tsx, fechar a aba de projetos e inserir os códigos para montar uma lista inicialmente com os elementos fixados na tela.

Estruturando a lista de contatos

Vamos começar criando a estrutura básica da nossa aplicação com um container principal:

<View style={styles.container}>
</View>

Agora, vamos adicionar uma View dentro do container para cada contato que queremos exibir. Inicialmente, vamos adicionar apenas uma View vazia:

<View style={styles.container}>
    <View></View>
</View>

Em seguida, adicionamos um Text dentro da View para exibir o nome do contato:

<View style={styles.container}>
    <View>
        <Text></Text>
    </View>
</View>

Adicionando detalhes dos contatos

Vamos preencher o Text com o nome "João Silva":

<View style={styles.container}>
    <View>
        <Text>João Silva</Text>
    </View>
</View>

Para cada contato, também precisamos exibir o telefone. Vamos adicionar outro Text para isso:

<View style={styles.container}>
    <View>
        <Text>João Silva</Text>
        <Text>1111-1111</Text>
    </View>
</View>

Agora, vamos adicionar mais contatos, como Maria Silva e José Santos, com seus respectivos telefones:

<View style={styles.container}>
    <View>
        <Text>João Silva</Text>
        <Text>1111-1111</Text>
    </View>
    <View>
        <Text>Maria Silva</Text>
        <Text>2222-2222</Text>
    </View>
    <View>
        <Text>Jose Santos</Text>
        <Text>3333-3333</Text>
    </View>
</View>

Executando a aplicação

Se fizermos isso, nossa aplicação vai rodar. Vamos vê-la em execução. Vou abrir a linha de comando e executar npx expo start. Isso vai rodar no celular.

npx expo start

Deixe-me abrir primeiro e mostrar o celular. Aqui está o celular, vamos abrir a aplicação. Ao pressionar A, vai abrir usando o Expo Go. Ele pergunta se queremos instalar o Expo Go. Instalamos a última versão, 5406, e enviamos o comando ao celular usando adb. O celular baixa o Expo Go, envia o APK do Expo Go ao celular, e então o celular instala esse APK. Vou fazer uma pausa enquanto carrega. Quando terminar, volto.

Melhorando a estrutura dos dados

Pronto, voltou. Agora está carregando o arquivo ts. O Expo Go, que roda no celular, manda um sinal ao Metro Bundler, que está aqui, que carrega o arquivo ts para dentro, o bundle, o javascript para dentro do celular. Aqui estão nossos personagens. Fizemos uma lista, mas há uma maneira melhor de fazer isso? Sim, há uma forma melhor. Podemos, em vez de fazer uma lista com os dados fixados dessa maneira, colocar esses dados em uma lista de objetos.

Vamos criar uma lista de objetos chamada contatos. Cada um dos contatos existentes será um objeto dentro dessa lista de contatos. Vamos começar com um array vazio:

const contatos = [];

Agora, vamos adicionar os contatos como objetos dentro desse array:

const contatos = [
    {nome: "João Silva", telefone: "1111-1111", email: "joao@teste.com"},
    {nome: "Maria Silva", telefone: "2222-2222", email: "maria@teste.com"},
    {nome: "Jose Santos", telefone: "3333-3333", email: "jose@teste.com"},
];

Iterando e exibindo contatos

Para exibir esses contatos na tela, precisamos transformar cada um desses objetos em um bloco de View, onde haverá um Text para mostrar o nome, outro para o telefone e outro para o e-mail. Vamos criar um pequeno código que vai iterar essa lista de contatos. Podemos fazer isso de forma simples, iterando elemento por elemento, ou usar o forEach.

Primeiro, vamos criar uma lista visual para armazenar os elementos visuais:

const listaVisual = [];

Agora, vamos iterar sobre os contatos e criar os elementos visuais:

for (const contato of contatos) {
  listaVisual.push(
    <View key={"id-" + contato.id}>
      <Text>{contato.nome}</Text>
      <Text>{contato.telefone}</Text>
      <Text>{contato.email}</Text>
    </View>
  );
}

Utilizando programação funcional

Podemos mostrar os componentes assim, mas também podemos mostrá-los em uma lista. Vamos colocar a listaVisual, e esses componentes serão mostrados na tela automaticamente.

return (
  <View style={styles.container}>
    {listaVisual}
  </View>
);

Agora, se perceberem, cada bloco de View precisa ter uma key. Vamos gerar essa key com base em um número ID. Vamos criar um ID para cada um dos objetos que temos aqui:

const contatos = [
  {id: 1, nome: "João Silva", telefone: "1111-1111", email: "joao@teste.com"},
  {id: 2, nome: "Maria Silva", telefone: "2222-2222", email: "maria@teste.com"},
  {id: 3, nome: "Jose Santos", telefone: "3333-3333", email: "jose@teste.com"},
];

Implementando filtro de contatos

Nossa lista está aparecendo, mas podemos melhorar ainda mais esse conteúdo. Podemos fazer um filtro para não mostrar todos esses dados. Vamos usar algumas funções de programação funcional para filtrar os elementos.

Primeiro, vamos adicionar uma caixa de texto para que a pessoa usuária possa escrever o filtro desejado e, em seguida, filtraremos com base na informação escrita. Vamos importar useState do React e criar uma variável para guardar esse useState.

import { useState } from 'react';
const [filtro, setFiltro] = useState<string>("");

Vamos adicionar também um TextInput na tela. Vamos importar o TextInput e desenhar a tela para conter o TextInput.

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

return (
  <View style={styles.container}>
    <Text>Digite o nome do contato para filtrar a lista:</Text>
    <TextInput value={filtro} onChangeText={setFiltro} />
    {listaVisual}
  </View>
);

Aplicando programação funcional para filtragem

Em vez de fazer um for dessa maneira, vamos usar um recurso de programação funcional. Todas as listas em JavaScript e TypeScript têm funções que servem para transformar a lista. Vamos usar a função filter, que vai receber uma arrow function e um objeto do tipo da lista, que neste caso é um objeto contato.

const listaVisual = contatos
  .filter((contato) => contato.nome.includes(filtro))
  .map((contato) => (
    <View key={"id-" + contato.id}>
      <Text>{contato.nome}</Text>
      <Text>{contato.telefone}</Text>
      <Text>{contato.email}</Text>
    </View>
  ));

Esse é um processo que chamamos de programação funcional, onde os elementos de contato primeiro são filtrados, e na mesma iteração já são transformados em elementos visuais. O resultado é uma lista de elementos visuais contendo esses blocos. Vamos ver como ficou. Estão aí todos os elementos visuais. Se escrevermos, por exemplo, "Maria", mostra apenas Maria. Se escrevermos "Jô", mostra João e José. O filtro está funcionando.

Concluindo e preparando para a próxima aula

Na próxima aula, faremos um pequeno formulário para que possamos escrever os dados e esses dados sejam introduzidos na lista, para que posteriormente possamos extrair os elementos visuais para funções e preparar tudo para usar o componente Flat List. Muito obrigado e nos vemos na próxima aula.

Renderização de Listas usando .map e ScrollView - Criar componente usando programação funcional

Introduzindo a videoaula e revisando conceitos anteriores

Olá a todos, bem-vindos à nossa terceira videoaula.

Na segunda videoaula, desenvolvemos a aplicação e inserimos alguns contatos simulados como objetos. Transformamos esses contatos utilizando uma função que emprega filter e map. Agora, vamos discutir um pouco sobre filter e map. Ambos fazem parte da programação funcional. Para que serve a programação funcional? Ela é utilizada para manipular dados, especialmente quando lidamos com grandes volumes de dados. Quando as listas são muito extensas, se precisarmos iterar sobre elas a cada transformação ou aplicação de filtro, geramos um grande número de iterações, o que consome muita memória e processamento de forma desnecessária.

Configurando a aplicação com contatos simulados

Para começar, vamos ver como configuramos nossa aplicação com alguns contatos simulados. Aqui está o código inicial que usamos:

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';

const contatos = [
  {id: 1, nome: "João Silva", telefone: "1111-1111", email: "joao@teste.com"},
  {id: 2, nome: "Maria Silva", telefone: "2222-2222", email: "maria@teste.com"},
  {id: 3, nome: "Jose Santos", telefone: "3333-3333", email: "jose@teste.com"},
];

export default function App() {

  const [filtro, setFiltro] = useState<string>("");
  // const listaVisual = [];

  // for (const contato of contatos) {
  //   listaVisual.push(
  //     <View key={"id-" + contato.id}>
  //       <Text>{contato.nome}</Text>
  //       <Text>{contato.telefone}</Text>
  //       <Text>{contato.email}</Text>
  //     </View>
  //   )
  // }

Explorando a programação funcional e suas origens

Por volta de 1930, um matemático chamado Alonzo Church introduziu a ideia de criar funções encadeadas para transformar dados. Hoje, utilizamos essas funções na programação funcional. São funções que encadeamos, permitindo iterar sobre elas de uma só vez. Assim, a informação entra na primeira função, como fazemos aqui: ela passa pelo filtro e, na mesma iteração, o resultado do filtro já é mapeado, emitindo um elemento visual no resultado da função. Em teoria, seria apenas uma passagem pelos dados. No entanto, o JavaScript não utiliza esse tipo de passagem única, chamada de passagem lazy (preguiçosa).

Aplicando filter e map na transformação de contatos

Agora, vamos ver como aplicamos filter e map para transformar nossos contatos em elementos visuais:

const listaVisual = contatos
  .filter( ( contato ) => { return contato.nome.includes(filtro) } )
  .map( (contato ) => {return (
    <View key={"id-" + contato.id}>
      <Text>{contato.nome}</Text>
      <Text>{contato.telefone}</Text>
      <Text>{contato.email}</Text>
    </View>
  ) } )

Comparando ações lazy e eager na programação funcional

Existem dois tipos de ação com funções de programação funcional: lazy e eager (ansiosa). Eager é quando as ações são executadas em cada função de forma antecipada, enquanto lazy guarda todas as execuções para serem realizadas de uma vez ao final. O JavaScript não possui isso por natureza, mas existe uma biblioteca, a slickgithub.io, que permite interações de programação funcional com JavaScript. Essa biblioteca possibilita o uso do acesso lazy em JavaScript. Apenas para conhecimento, a programação funcional está presente em várias outras linguagens, como Python, JavaScript, TypeScript, Kotlin e Java, e é amplamente utilizada, especialmente para lidar com grandes conjuntos de dados.

Detalhando o processo de filtragem e mapeamento

Vamos entender o que realmente fizemos aqui. A informação estava em uma lista com: João, telefone, e-mail, Maria, Alberto. Primeiro, aplicamos o filter. O filter verifica o que está escrito no campo de texto por meio desta variável, filtro. Ele analisa o que está escrito no campo de texto e executa a ação de filtragem para selecionar quais elementos participarão da próxima etapa. Após essa ação de filtro, os elementos são passados para o mapeamento. O ideal seria que isso ocorresse em uma única iteração, mas acontece em várias iterações. Dessa forma, a informação é transformada em elementos visuais, como estão aqui. O objeto é transformado em uma view pelo mapeamento, e antes de criar o mapeamento, filtramos. Claro que a ordem influencia: se primeiro transformarmos tudo e depois filtrarmos, estaremos gastando uma ação de transformação desnecessária em alguns objetos que não serão exibidos na tela ao final.

Concluindo a videoaula

Isso é tudo. Muito obrigado e nos vemos no próximo vídeo, onde faremos o deslocamento da tela. Até breve!

Sobre o curso React Native: Dominando Listas com FlatList e ScrollView

O curso React Native: Dominando Listas com FlatList e ScrollView possui 144 minutos de vídeos, em um total de 31 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Renderização de Listas usando .map e ScrollView
• Extração da função de renderização, uso das keys e desvantagens do ScrollView
• FlatList e atributos essenciais
• Estilização no React Native
• Eventos e controle da posição no FlatList