O FlatList é um componente do React Native que permite exibir listas de elementos de forma eficiente, independentemente do tamanho da lista. Ele é especialmente útil para listas longas e dinâmicas que podem ser renderizadas sob demanda, melhorando o desempenho e a experiência do usuário. Veja exemplo:

Para usar o componente FlatList, você precisa primeiro importá-lo do pacote react-native. Em seguida, você pode renderizar uma lista de elementos com o FlatList passando as seguintes propriedades:

data: um array de objetos que serão exibidos na lista.

renderItem: uma função que recebe cada item do array e retorna um componente React que será exibido na lista.

A lista deve ser composta por objetos e cada objeto deve ter uma propriedade chamada id com valor único para cada objeto.

Aqui está um exemplo básico de como usar o FlatList:

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

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
  { id: '4', title: 'Item 4' },
  { id: '5', title: 'Item 5' },
  { id: '6', title: 'Item 6' },
  { id: '7', title: 'Item 7' },
  { id: '8', title: 'Item 8' },
  { id: '9', title: 'Item 9' },
  { id: '10', title: 'Item 10' },
  { id: '11', title: 'Item 11' },
  { id: '12', title: 'Item 12' },
  { id: '13', title: 'Item 13' },
  { id: '14', title: 'Item 14' },
  { id: '15', title: 'Item 15' },
  { id: '16', title: 'Item 16' },
  { id: '17', title: 'Item 17' },
  { id: '18', title: 'Item 18' },
  { id: '19', title: 'Item 19' },
  { id: '20', title: 'Item 20' },
];

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

  return (
    <View style={styles.container}>
      <FlatList data={DATA} renderItem={renderizarItem} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 10,
    marginTop: 50,
  },
  item: {
    borderWidth: 1,
    borderColor: 'red',
    padding: 10,
  },
  title: {
    fontSize: 30,
  },
});

export default App;

Neste exemplo, estamos renderizando uma lista simples de vinte itens. Cada item é representado por um objeto que contém uma chave id e um título title. O componente FlatList recebe o array de objetos DATA, que é renderizado com a função renderizarItem, que retorna um componente View com o título do item.

O FlatList possui várias propriedades que permitem personalizar sua aparência e comportamento. Algumas das propriedades mais comuns incluem:

ItemSeparatorComponent: um componente React que é renderizado entre cada item da lista. Isso permite adicionar um separador visual entre os itens.

ListHeaderComponent: um componente React que é renderizado no topo da lista. Isso permite adicionar um cabeçalho à lista.

ListFooterComponent: um componente React que é renderizado no final da lista. Isso permite adicionar um rodapé à lista.

onEndReached: uma função que é chamada quando o usuário chega ao final da lista. Isso é útil para carregar mais itens dinamicamente à medida que o usuário rola a lista.

onRefresh: é uma função que é chamada quando o usuário realiza uma ação de "puxar para atualizar" na lista. Isso é útil para atualizar os dados da lista com informações mais recentes.

Concluindo, o componente FlatList é uma ferramenta poderosa para renderizar listas de elementos em um aplicativo React Native. Com ele, é possível exibir listas dinâmicas e longas de forma eficiente, melhorando a experiência do usuário. É importante entender as propriedades do FlatList e como usá-las para personalizar a aparência e o comportamento da lista. Com o conhecimento adequado, os alunos de ensino técnico podem criar aplicativos móveis sofisticados e funcionais usando o FlatList.

O FlatList é um dos componentes mais versáteis do React Native e pode ser usado de várias maneiras para renderizar listas de dados. Aqui estão alguns exemplos diversificados de como utilizar o FlatList:

Exemplo 1: Listagem de Produtos

Suponha que você tenha uma lista de produtos e queira exibi-los em uma tela. Você pode utilizar o FlatList para renderizar esses produtos da seguinte maneira:

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

const products = [
  {
    id: 1,
    name: 'Product 1',
    price: 9.99,
    image: { uri: 'https://picsum.photos/id/1024/400/400' },
  },
  {
    id: 2,
    name: 'Product 2',
    price: 14.99,
    image: { uri: 'https://picsum.photos/id/1026/400/400' },
  },
  {
    id: 3,
    name: 'Product 3',
    price: 19.99,
    image: { uri: 'https://picsum.photos/id/1043/400/400' },
  },
  {
    id: 4,
    name: 'Product 4',
    price: 24.99,
    image: { uri: 'https://picsum.photos/id/1062/400/400' },
  },
  {
    id: 5,
    name: 'Product 5',
    price: 29.99,
    image: { uri: 'https://picsum.photos/id/1074/400/400' },
  },
];

const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Image source={item.image} style={styles.image} />
    <Text style={styles.title}>{item.name}</Text>
    <Text style={styles.price}>${item.price}</Text>
  </View>
);

const App = () => (
  <FlatList
    data={products}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
    style={styles.container}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:40
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  price: {
    fontSize: 24,
  },
  image: {
    width: '100%',
    height: 200,
  },
});

export default App;

Exemplo 2: Listagem de Imagens com Paginação

Suponha que você queira exibir uma lista de imagens que estão armazenadas em um servidor e quer exibir apenas algumas imagens por vez, permitindo ao usuário navegar entre as páginas para ver mais imagens. Você pode utilizar o FlatList com a propriedade pagingEnabled para exibir a lista de imagens com paginação. Para paginar faça o gesto de arrastar para cima:

import { useState, useEffect } from 'react';
import { FlatList, Image, View, StyleSheet } from 'react-native';

const App = () => {
  const [images, setImages] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    fetch(`https://picsum.photos/v2/list?page=${page}&limit=10`)
      .then((response) => response.json())
      .then((data) => setImages(data))
      .catch((error) => console.error(error));
  }, [page]);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Image source={{ uri: item.download_url }} style={styles.image} />
    </View>
  );

  const handleEndReached = () => {
    setPage(page + 1);
  };

  return (
    <FlatList
      data={images}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      style={styles.container}
      contentContainerStyle={styles.contentContainer}
      numColumns={2}
      // habilita a paginação
      pagingEnabled={true}
      // define a função 'onEndReached' para carregar mais imagens quando o usuário chegar ao final da lista
      onEndReached={handleEndReached}
      // define a quantidade de pixels que o usuário precisa rolar a lista para que a função 'onEndReached' seja disparada
      onEndReachedThreshold={0.1}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f1f1f1',
  },
  contentContainer: {
    paddingVertical: 20,
    paddingHorizontal: 10,
  },
  item: {
    flex: 1,
    marginHorizontal: 5,
    marginVertical: 10,
    aspectRatio: 1,
  },
  image: {
    flex: 1,
    borderRadius: 5,
  },
});

export default App;

Exemplo 3: Listagem de Notícias

Suponha que você tenha uma lista de notícias e queira exibi-las em uma tela. Você pode utilizar o FlatList para renderizar essas notícias da seguinte maneira:

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

const news = [
  {
    id: 1,
    title:
      'Casos de covid no mundo ultrapassam 400 milhões com domínio global da ômicron',
    summary:
      'A Organização Mundial da Saúde (OMS) alertou nesta segunda-feira que o número de casos de covid-19 no mundo ultrapassou a marca de 400 milhões, com o domínio global da variante ômicron do vírus.',
  },

  {
    id: 2,
    title:
      'França decreta novo confinamento para conter segunda onda da Covid-19',
    summary:
      'A França decretou novo confinamento a partir desta quinta-feira (10) para conter a segunda onda da Covid-19 que, segundo o primeiro-ministro francês, Jean Castex, é mais forte que as anteriores.',
  },

  {
    id: 3,
    title: 'Nasa acha componente do plástico em lua de Saturno',
    summary:
      'A sonda espacial Cassini encontrou fragmentos de plástico em Titã, uma das luas de Saturno, mostrando que a poluição causada pelo homem pode chegar a lugares muito distantes.',
  },

  {
    id: 4,
    title: 'Nasa pousa sonda em asteroide e coleta amostras da rocha',
    summary:
      'A sonda OSIRIS-REx da Nasa pousou no asteroide Bennu na noite desta terça-feira (20) e coletou amostras da rocha espacial. Esta é a primeira vez que uma missão da Nasa tenta coletar amostras de um asteroide.',
  },
];

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

const App = () => (
  <FlatList
    data={news}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
    style={styles.container}
  />
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:30
  },
  item: {
    backgroundColor: '#fff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  summary: {
    fontSize: 18,
  },
  image: {
    width: '100%',
    height: 200,
    borderRadius: 10,
    marginBottom: 10,
  },
});

export default App;