Entrar Ainda não tem acesso?
1
resposta

FlatList

Referente ao curso React Native: navegando entre telas com expo router, no capítulo Lidando com Scroll e atividade Scroll das tarefas

por Neto Russo
| 100k xp | 35 posts
AOT

O meu FlatList está com gap automático e não sei pq....

import { router } from "expo-router";
import { FlatList, StyleSheet, Text, View } from "react-native";
import FokusButton from "../../components/FokusButton";
import Footer from "../../components/Footer";
import { IconPlus } from "../../components/Icons";
import TaskItem from "../../components/TaskItem";
import { useTaskContext } from "../../components/context/useTaskContext";



export default function Tasks() {

  const { tasks } = useTaskContext();

  return (
    <View
      style={styles.container}
    >
      <View style={{ width: "90%", alignItems: "center", gap: 24 }}>
        <Text
          style={styles.title}
        >
          Lista de Tarefas:
        </Text>
        <View style={styles.tasksList}>
          <FlatList
            data={tasks}
            renderItem={({ item }) =>
              <TaskItem
                key={item.id}
                tarefa={item.description}
                completed={item.completed}
              />
            }
            keyExtractor={item => item.id}
          />
        </View>

        <FokusButton
          title="Adicionar nova tarefa"
          Icon={<IconPlus />}
          onPress={() => router.navigate('/add-task')}
          outLine
        />
      </View>
      <Footer />
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#021123",
    padding: 16,
    alignItems: "center",
    justifyContent: "space-between",
    paddingBottom: 80,
    paddingTop: 24
  },
  title: {
    color: "#fff",
    fontSize: 32,
    textAlign: "center"
  },
  tasksList: {
    height: "60%",
  }
});
1 resposta
por Vinicios Neves
| 1059.8k xp | 1203 posts
Instrutor Tech Lead

Fala, Neto! Bão?

Cara. esse "gap automático" que você tá vendo provavelmente não é do FlatList em si — ele não adiciona espaçamento entre os itens por conta própria. O que costuma causar isso é algum estilo que tá vindo de fora, geralmente do próprio componente TaskItem ou de algum container pai.

Dá uma olhada no seu componente TaskItem — ele provavelmente tem um marginBottom, marginTop, ou padding que tá criando esse espaço. Algo tipo:

// Dentro do TaskItem, pode ter algo assim:
const styles = StyleSheet.create({
  container: {
    marginBottom: 12, // isso criaria o "gap" entre os itens
    // ...
  }
});

se você quiser usar gap, pode adicionar direto no contentContainerStyle:

<FlatList
  data={tasks}
  renderItem={({ item }) =>
    <TaskItem
      key={item.id}
      tarefa={item.description}
      completed={item.completed}
    />
  }
  keyExtractor={item => item.id}
  contentContainerStyle={{ gap: 12 }}
/>

Ah, e uma coisinha: você não precisa passar o key={item.id} no TaskItem quando já tá usando o keyExtractor. O keyExtractor já cuida disso pro FlatList. Não vai dar erro, mas é código duplicado.

Me manda o código do TaskItem se quiser que eu dê uma olhada mais específica no que tá causando esse espaçamento!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA