Módulo 4 PROJETO

Atividade 19: Múltiplos Estados e Formulários

Todo aplicativo contém uma tela de Cadastro ou Login. Aprenda a juntar várias peças num fluxo real.

🎯 Objetivos desta aula

✓ Usar múltiplos useState na mesma tela
✓ Trancar Envios fazendo Validações Condicionais de "Campo Vazio"
✓ Dar o grande Alert() de Sucesso ao usuário com os dados coletados

📋 Empilhando Variáveis Comuns

A primeira vez que um aluno precisa fazer um form com Nome, Idade e Senha ele acha que precisa usar um super Objeto Master de State. Mas o ideal é simples: Crie quantos `useState` você precisar! Não há limites. Um form de 3 campos necessitará de 3 States limpinhos:

const [nome, setNome] = useState('');
const [idade, setIdade] = useState('');
const [senha, setSenha] = useState('');

// Cada <TextInput> casará suas props independentemente com cada um deles!

💻 Sistema de Cadastro Real

Estude o Fluxo de "Acatar Dados -> Pressionar Enviar -> Validar -> Concluir":

FormCadastro.js

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

export default function Formulario() {
  // 1. Estados Independentes
  const [nome, setNome] = useState('');
  const [idade, setIdade] = useState('');

  // 2. A Função Ativada pelo Clique do Botão 
  function enviarCadastro() {
    
    // VALIDAÇÃO: Bloquear os engraçadinhos que mandam form vazio
    if (nome === '' || idade === '') {
       Alert.alert('Erro Categórico ❌', 'Por favor, preencha NOME e IDADE para continuar!');
       return; // RETURN VAZIO ENCERRA A FUNÇÃO AQUI MESMO!! IMPEDINDO O SUCESSO.
    }

    if(idade < 18) {
       Alert.alert('Acesso Negado 👶', 'Somente Adultos acima de 18 anos são aceitos.');
       return; 
    }

    // Se chegou até aqui vivo, PASSOU POR TODAS AS VALIDAÇÕES com Sucesso!!
    Alert.alert('Bem-Vindo Oficial! ✅', `Seu nome é ${nome} e você está com ${idade} anos na terra.`);
    
    // LImpar tela depois do sucesso
    setNome('');
    setIdade('');
  }


  // 3. Render HTML
  return (
    <View style={styles.container}>
       <Text style={styles.titulo}>Criar Conta Ninja</Text>
       
       <View style={styles.caixaForm}>
          
          <Text style={styles.label}>Nome Completo</Text>
          <TextInput 
             style={styles.input} placeholder="Seu nome" placeholderTextColor="#64748b"
             value={nome} onChangeText={setNome} 
          />

          <Text style={styles.label}>Idade</Text>
          <TextInput 
             style={styles.input} placeholder="Ex: 30" placeholderTextColor="#64748b"
             keyboardType="numeric" // TECLADO DE NUMEROS 
             value={idade} onChangeText={setIdade} 
          />

          <TouchableOpacity style={styles.btn} onPress={enviarCadastro}>
             <Text style={styles.btnText}>Finalizar Cadastro</Text>
          </TouchableOpacity>

       </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a', padding: 20, justifyContent: 'center' },
  titulo: { color: 'white', fontSize: 28, fontWeight: 'bold', textAlign: 'center', marginBottom: 30 },
  
  caixaForm: { backgroundColor: '#1e293b', padding: 20, borderRadius: 20 },
  
  label: { color: '#94a3b8', marginBottom: 5, marginLeft: 5 },
  input: { height: 50, borderColor: '#334155', borderWidth: 1, borderRadius: 10, marginBottom: 20, paddingHorizontal: 15, color: 'white', backgroundColor: '#0f172a' },
  
  btn: { backgroundColor: '#8b5cf6', height: 55, borderRadius: 10, alignItems: 'center', justifyContent: 'center', marginTop: 10 },
  btnText: { color: 'white', fontWeight: 'bold', fontSize: 18 }
});

🎮 Desafios Práticos

DESAFIO 1

Adicionando uma Senha 🔒

Copie o código inteiro de Formulario.js e cole no seu Snack vazio.
Crie no JS um terceiro `useState` para Senha.
Duplique um Bloco HTML de Input inteiro do Idade para virar o de Senha.
Lembre-se de por a prop `secureTextEntry` (senha bolinha) no novo campo, e conectá-lo ao `onChangeText` do useState da sua Senha!

DESAFIO 2

Lógica de Rejeição de Senha Curta 🛡️

Aumentando nosso IF vigia do Formulário!

Lá dentro da function `enviarCadastro`, onde fazemos os testes de falha, adicione um novo IF abaixo dos originais.
A instrução mágica de tamanho de string que você precisa puxar é if(senha.length < 5). Dê um Alert de "Sua senha precisa ter mais de 5 caracateres e dê seu belo `return;` pra impedir ele de avançar. Teste a falha simulada com senha de 3 letras!

📝 Quiz - Forms e Validações

Anterior ← Atividade 18 Próxima Atividade 20: Condicionais (UI) →