Módulo 4 INTERATIVIDADE

Atividade 18: Capturando Texto (TextInput)

Todo aplicativo de verdade precisa perguntar coisas ao usuário. Veja como evocar o Teclado do celular.

🎯 Objetivos desta aula

✓ Importar e exibir o componente <TextInput> nativo
✓ Coletar tecla por tecla com a propriedade onChangeText usando State
✓ Aprender placeholders e tipos de teclados nativos (Numérico vs Numérico)

⌨️ A Magia do Teclado Nativo

A Web possui a famosa tag HTML `<input type="text">`. O mundo mobile tem algo ainda melhor e mais dinâmico: O Componente <TextInput /> importado diretamente do 'react-native'. No momento em que o usuário toca nele num aparelho real, o OS ergue magicamente o teclado virtual sobre a tela!

Dupla Dinâmica: Value e onChangeText

Ao contrário da web antiga, nós ligamos o input diretamente numa Variável de Estado.

value={varNome}: A "Boca" do Input. O que vai ficar visivelmente escrito dentro do campo branco sempre é o que a variável mandar. Estritamente controlada pela Matrix!
onChangeText={setVarNome}: O "Ouvido" do Input. Cada letrinha a mais ou a menos que o usuário digitar vai ser despejada milissegundo a milissegundo dentro da função SET alterando a variável mágica em tempo real.

💡 Dica Visual: Lembre-se, o TextInput é burro visualmente. Sem uma classe de style impondo bordas, fundo ou altura nele, ele frequentemente é Renderizado como uma "Caixa invisível" transparente e você acha que quebrou! Sempre dê ` ` para conseguir enxergar onde clicar!

💻 Espelho de Texto

Com o State "Ouvindo" o input, nós podemos colocar a mesma variável {nome} renderizando fora do input num texto gigante em tempo real:

Ouvinte.js

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

export default function App() {
  
  // Criando berço inicial VAZIO para o State texto
  const [textoDigitado, setTextoDigitado] = useState('');

  return (
    <View style={styles.container}>
       <Text style={styles.titulo}>Qual seu cargo?</Text>
       
       <TextInput 
          style={styles.inputBox}
          placeholder="Digite aqui (ex: Astronauta)"      // Texto Fantasma de dica!
          placeholderTextColor="#64748b"            // Cor do texto fantasma
          value={textoDigitado}                     // A amarração da boca
          onChangeText={setTextoDigitado}           // O espião da orelha (Passa a Função PAI inteira apenas o nome)
       />

       {/* Espelho que refletirá a digitação letra por letra em tempo real */}
       <Text style={styles.resultado}> Você é um(a) {textoDigitado}! </Text>
       
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a', alignItems: 'center', justifyContent: 'center', padding: 20 },
  titulo: { color: 'white', fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  
  inputBox: { 
     width: '100%', 
     height: 60, 
     borderColor: '#38bdf8', 
     borderWidth: 2,           // OBRIGATÓRIO DAR BORDA OU FUNDO PRO INPUT APARECER
     borderRadius: 10,
     paddingHorizontal: 20,
     color: 'white',
     fontSize: 18,
     backgroundColor: '#1e293b'
  },
  
  resultado: { color: '#10b981', fontSize: 30, fontWeight: '900', marginTop: 40 }
});

🎮 Desafios Práticos

Aperfeiçele o Input:

DESAFIO 1

Troca de Teclados 🛠️

Imagine que você queira o "Valor que você tem no banco" ao invés do cargo.
No código do `TextInput`, adicione a propriedade keyboardType="numeric" e teste. Note que agora o celular força a abrir as teclas numéricas de telefone ao invés de letras.

DESAFIO 2

Modo Senha Invisível 🚀

E se o cara for digitar uma Senha? Ela não pode aparecer no Espelho ou na Caixa de preenchimento.
Adicionena tag TextInput a propriedade milagrosa booleana secureTextEntry={true} e veja o que as letras do input se tornam (Bolinhas Negras Ocultas).

📝 Quiz - Caixas de Texto

Anterior ← Atividade 17 Próxima Atividade 19: Formulários →