Dando Vida ao App: Eventos e Interatividade React Native

No artigo anterior, criamos um layout estático e bonito. Mas um aplicativo de verdade não é apenas um quadro; ele precisa reagir às ações do usuário por eventos e interatividade react native. Se você toca em um botão ou digita um texto, algo deve acontecer.

Nesta etapa, vamos aprender como capturar essas ações e transformar seu app em uma ferramenta interativa.

⚡ O que são Eventos?

Eventos são sinais que o sistema envia quando algo acontece. No mundo mobile, os mais comuns são:

• onPress: O usuário tocou em um elemento (equivalente ao “click” do mouse).
• onChangeText: O usuário digitou algo em um campo de texto.
• onLongPress: O usuário segurou o toque por mais tempo.

🛠️ Prática de Laboratório: Capturando o Toque

Vamos usar o componente TouchableOpacity. Ele é preferido em vez de um botão comum porque permite que qualquer elemento (uma imagem ou uma View) se torne clicável e dê um feedback visual (uma leve transparência) ao usuário.

Exemplo de Código Interativo

JavaScript

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

export default function BotaoInterativo() {
  
  // Função que será executada ao tocar
  const avisarUsuario = () => {
    Alert.alert('Interação!', 'Você tocou no botão do laboratório.');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.botao} 
        onPress={avisarUsuario}
      >
        <Text style={styles.textoBotao}>Clique Aqui</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  botao: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
  },
  textoBotao: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

🧠 Desafio de Autonomia: Onde está o erro?

Ao programar interações, é comum esquecermos de “conectar” a função ao evento. Se você definir a função avisarUsuario, mas não a chamar dentro do onPress, nada acontecerá.

Tarefa: Tente criar um segundo botão que, ao ser pressionado, mude a cor de fundo da tela. (Dica: No próximo artigo, falaremos sobre Hooks, que facilitam essa mudança de estado!)

⬅️ Artigo Anterior: Desenhando com Flexbox: Como estruturar telas profissionais

➡️ Próximo Passo: Hooks: Como fazer seu App “lembrar” das informações