Módulo 5 PROJETOS

Atividade 21: Lista de Tarefas (Parte 1)

Nosso primeiro app 'Real'. Aprenda a dominar Listas e Arrays Dinâmicas no Estado do React Native!

🎯 O que vamos construir

✓ Usar State com dezenas de itens num Array [ ]
✓ Criar o Input + Botão "Adicionar Tarefa"
✓ O clássico FlatList Render do React Native para performar infinitos dados.

📚 Arrays no State

Ate agora usamos o `useState` pra guardar 1 Coisa (1 Texto, 1 Número, 1 Variável Bolleana). Para criar uma Lista de Supermercado ou Lista de Tarefas Precisaremos guardar Múltiplos Textos simultâneos na memória! A forma correta de inicializar isso é com o berço em Array Vazio: useState( [ ] ).

A Tática do Spread Operator `...`

Diferente do Push de Javascript velho que dava erro no React (Ele mutava o array corrompendo o Render C++), nós devemos criar um ARRAY NOVO `[ ]`, Despejar a lista Velha `...tarefas`, E colar na bunda desse Clone do Array a nossa Palavra nova pra ele gerar um Save Game imaculado na Memória de Telas!

// Jeito Errado (Bug da Tela não atualizar)
tarefas.push("Passear"); 

// Jeito REATIVO LINDO! (Cria nova lista + os velhos + o novo item)
setTarefas( [...tarefas, "Passear"] );

💻 Mão no Código: App ToDo 1.0

Abra seu Expo Snack. Copie o corpo desse App. Estudaremos a lógica da função Adicionar que Limpa o form e Anexa o Item a Tabela de Listas Flatlist. A `FlatList` é a magia Native mobile para não estourar a memória num App com 5 mil elementos no Scroll!

App.js

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

export default function App() {
  
  // O Estado que guarda O TEXTO DA CAIXINHA
  const [texto, setTexto] = useState('');
  
  // O Estado Gigante de Array que guarda A LISTA INTEIRA!
  const [tarefas, setTarefas] = useState([ 'Estudar', 'Limpar Casa' ]);

  function adicionarTarefa() {
     // A Guarda do Castelo: Impede add vazio null!
     if (texto.trim() === '') return; 
     
     // Seta a Matriz clonando + Texto Novo + Joga do ID unico (Hora em miligegundos)
     const novaLista = [...tarefas, texto];
     setTarefas(novaLista);
     
     // Limpa o TextInput pro usuário digitar rápido a proxima
     setTexto('');
  }

  return (
    <View style={styles.container}>
       <Text style={styles.title}>Tarefas do Dia</Text>
       
       <View style={styles.rowForm}>
          <TextInput 
             style={styles.input}
             placeholder="Digite uma nova tarefa..."
             value={texto}
             onChangeText={setTarefasInput > setTexto}
             /* Correção: onChangeText={setTexto} */
          />
          <TouchableOpacity style={styles.btnAdd} onPress={adicionarTarefa}>
             <Text style={styles.btnText}>+</Text>
          </TouchableOpacity>
       </View>

       {/* A FLATLIST! O Segredo Apple/Android da Performance */}
       <FlatList 
          data={tarefas}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
             <View style={styles.tarefaCard}>
                <Text style={styles.tarefaTexto}>{item}</Text>
             </View>
          )}
       />
       
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f8fafc', paddingTop: 60, paddingHorizontal: 20 },
  title: { fontSize: 28, fontWeight: 'bold', color: '#0f172a', mb: 20 },
  rowForm: { flexDirection: 'row', gap: 10, marginBottom: 20 },
  input: { flex: 1, backgroundColor: 'white', padding: 15, borderRadius: 10, borderWidth: 1, borderColor: '#cbd5e1' },
  btnAdd: { backgroundColor: '#3b82f6', width: 55, height: 55, borderRadius: 10, alignItems: 'center', justifyContent: 'center'},
  btnText: { color: 'white', fontSize: 24, fontWeight: 'bold'},
  tarefaCard: { backgroundColor: 'white', padding: 20, borderRadius: 10, marginBottom: 10, shadowColor: '#000', shadowOffset: {width:0,height:1}, shadowOpacity: 0.1, elevation: 2 },
  tarefaTexto: { fontSize: 16, color: '#334155' }
});

⚠️ Atenção a Correção de Sintaxe na Cópia: Observe acima que, se colar diretamente no Expo e der erro, O `onChangeText` do TextInput deve estar examente como `onChangeText={setTexto}`. Houve um errinho digitação do Dev no bloco acima.

📝 Quiz - Arrays Imutáveis

Anterior ← Avaliação Mod 4 Próxima Vítima Atividade 22 →