9.2-13. Eventos en React Native

 Eventos en React Native: Guía Práctica

En React Native, los eventos son esenciales para crear interacciones dinámicas en tus apps. ¡Aquí te explico cómo dominarlos!

---

📌 Eventos clave (vs. HTML):

• onPress → Reemplaza al onClick de HTML. Usado en botones, textos y más.

• onChangeText → Similar al onChange de HTML, pero específico para TextInput.

  • Diferencia clave: En React Native, recibes directamente el texto (no el evento del DOM).

---

🛠 Ejemplo práctico (con código):

jsx

import { Button, TextInput, Alert } from 'react-native';

function App() {
  const [text, setText] = useState('');

  const handlePress = () => Alert.alert('¡Botón presionado!');
  const handleChangeText = (newText) => setText(newText);

  return (
    <>
      <TextInput
        placeholder="Escribe algo..."
        onChangeText={handleChangeText}  // 🎯 Evento clave
        value={text}
        style={{ height: 40, width: 200, backgroundColor: 'white' }}
      />
      <Button 
        title="Presióname" 
        onPress={handlePress}  // ⚡ No es 'onClick' 
      />
    </>
  );
}

---

🔥 Tips importantes:

1️⃣ Botones:

• En Android, el efecto Ripple es nativo (en iOS, el diseño es plano).

• Usa onPress (nunca onClick).

2️⃣ TextInput:

• Si usas value, ¡necesitas onChangeText! (Componente controlado).

• Otros eventos útiles: onBlur, onSubmitEditing.

3️⃣ Código limpio:

• Evita lógica dentro del return. Extrae eventos en funciones separadas.

• No uses estilos en línea (mejora la legibilidad).

---

📚 Documentación oficial:

• Componente Button (Eventos)

• TextInput (onChangeText)

---

🚨 ¿Sabías que?

• Los eventos como onPress pueden usarse en cualquier componente (no solo botones).

• En proyectos reales, usarás onPress en formularios, cards, imágenes... ¡Todo!

---

🔜 Próximo paso: Aplicaremos estos eventos en un formulario completo para nuestro proyecto.

¿Dudas? ¡Comenta! 👇 #ReactNative #MobileDev #Programación

---

Bonus:

• Ejemplo avanzado: Si necesitas manejar el evento de submit en un TextInput, usa onSubmitEditing.

jsx

<TextInput
  onSubmitEditing={() => console.log('Enter presionado!')}
/>