7.4-36. Retroalimentación al tocar el botón

 

Retroalimentación Visual al Tocar Botones en React Native

Una buena UX requiere que los usuarios siempre sepan cuando interactúan con elementos táctiles. Veamos cómo implementar feedback visual efectivo en nuestros botones.

🔍 El Problema: Falta de Feedback

Por defecto, muchos componentes no muestran cambios visuales al ser presionados:

jsx
<Pressable onPress={() => console.log('Pressed!')}>
  <Text>Mi Botón</Text>
</Pressable>

🎯 Soluciones Comparadas

1. Usando TouchableOpacity (Alternativa)

jsx
<TouchableOpacity 
  activeOpacity={0.7} // Valor entre 0 (transparente) y 1 (opaco)
  onPress={handlePress}
>
  <Text>Botón con Opacidad</Text>
</TouchableOpacity>

Pros:

  • Sencillo de implementar

  • Efecto visual inmediato

Contras:

  • Menos personalizable

  • No es el componente recomendado actualmente

2. Usando Pressable (Recomendado)

jsx
<Pressable
  style={({ pressed }) => [
    styles.button,
    { opacity: pressed ? 0.7 : 1 }
  ]}
  onPress={handlePress}
>
  <Text>Botón Moderno</Text>
</Pressable>

Ventajas:

  • Mayor control sobre los estados

  • Permite animaciones complejas

  • Componente oficial recomendado

🎨 Efectos Avanzados con Pressable

Cambio de Color al Presionar

jsx
<Pressable
  style={({ pressed }) => [
    styles.button,
    { 
      backgroundColor: pressed ? '#4A306D' : '#65558F',
      transform: pressed ? [{ scale: 0.95 }] : [{ scale: 1 }]
    }
  ]}
>

Efecto de "Aplastamiento"

jsx
{
  transform: [
    { scale: pressed ? 0.95 : 1 },
    { translateY: pressed ? 2 : 0 }
  ]
}

Combinación Múltiple

jsx
<Pressable
  style={({ pressed }) => [
    styles.button,
    {
      opacity: pressed ? 0.8 : 1,
      backgroundColor: pressed ? '#4A306D' : '#65558F',
      transform: [
        { scale: pressed ? 0.98 : 1 },
        { translateY: pressed ? 1 : 0 }
      ]
    }
  ]}
>

💡 Implementación en Nuestro FAB

typescript
// components/FAB.tsx
export const FAB = ({ label, onPress, position = 'right' }: FABProps) => {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.button,
        position === 'right' ? styles.positionRight : styles.positionLeft,
        {
          opacity: pressed ? 0.7 : 1,
          transform: [{ scale: pressed ? 0.95 : 1 }]
        }
      ]}
      onPress={onPress}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
};

📱 Efectos Específicos por Plataforma

Android e iOS manejan las interacciones táctiles diferente:

typescript
// Para Android (efecto ripple nativo)
<Pressable
  android_ripple={{ color: 'rgba(255,255,255,0.2)', borderless: false }}
  style={/* ... */}
>
typescript
// Para iOS (zoom suave)
<Pressable
  style={({ pressed }) => ({
    transform: [{ scale: pressed ? 0.95 : 1 }],
    opacity: pressed ? 0.7 : 1
  })}
>

📌 Buenas Prácticas

  1. Mantén la consistencia: Usa los mismos efectos en toda la app

  2. No exageres: Animaciones sutiles > efectos exagerados

  3. Prueba en dispositivos reales: Los emuladores no siempre reflejan bien las interacciones táctiles

  4. Considera accesibilidad: Usa contrastes claros entre estados

🚀 Ejemplo Completo

typescript
interface FABProps {
  label: string;
  onPress?: () => void;
  position?: 'left' | 'right';
}

export const FAB = ({ label, onPress, position = 'right' }: FABProps) => {
  return (
    <Pressable
      style={({ pressed }) => [
        styles.baseButton,
        positionStyles[position],
        {
          opacity: pressed ? 0.7 : 1,
          transform: [{ scale: pressed ? 0.95 : 1 }],
          shadowOpacity: pressed ? 0.2 : 0.3,
          elevation: pressed ? 3 : 5
        }
      ]}
      onPress={onPress}
      android_ripple={{ color: 'rgba(255,255,255,0.2)', borderless: true }}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  baseButton: {
    position: 'absolute',
    bottom: 20,
    backgroundColor: '#65558F',
    padding: 20,
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 4,
  },
  positionRight: { right: 20 },
  positionLeft: { left: 20 },
  label: { color: 'white', fontSize: 20 }
});

¿Qué tipo de feedback visual prefieres implementar en tus apps? ¡Compártelo en los comentarios!

Comentarios

Publicar un comentario

Entradas más populares de este blog

4.2-12. Componentes esenciales

    Componentes esenciales de React Native (Vignatti) 📱 En este video, exploramos y utilizamos los  componentes esenciales de React Native (Vignatti) , junto con los  NAC Decks . Estamos en la fase final de los fundamentos que todo desarrollador debe dominar antes de empezar un proyecto. 🔹  ¿Qué veremos? Equivalencia con HTML : Comparativa de los componentes de Vignatti vs. HTML. Funcionamiento clave : Cómo usar cada componente en proyectos reales. 📌 Componentes principales: 1️⃣  View  → Como un  div  en HTML. Es un contenedor que puede anidar otros componentes. Dato clave : Si el contenido excede la pantalla, ¡usa  ScrollView  para evitar cortes! 2️⃣  Image  → Similar a  <img>  en HTML. Propiedad  source  para cargar imágenes (local o URL). ¡Obligatorio!  Asignarle un estilo con  width  y  height . 3️⃣  Text  → Equivalente a  <p> ,  <span> ...
Leer más

7.5-10. ¿Como funcionan los estilos en React Native?

  ¿Cómo funcionan los estilos en React Native? En React Native, los estilos no usan CSS tradicional, sino un sistema basado en  objetos JavaScript  similar. ¡Te explico cómo dominarlo! 📌 Componente clave:  StyleSheet Es el equivalente a una hoja de estilos CSS, pero en formato de objeto: javascript import { StyleSheet } from 'react-native' ; const styles = StyleSheet . create ( { contenedor : { borderRadius : 10 , borderWidth : 2 , borderColor : '#000' , } , titulo : { fontSize : 19 , fontWeight : 'bold' , } , } ) ; 🔥 Características importantes: Soporte por componente : Cada elemento (View, Text, etc.) acepta estilos con atributos específicos. Múltiples estilos : Pásalos como un  arreglo : javascript < Text style = { [ styles . titulo , styles . centrado ] } > Hola < / Text > Estilos dinámicos : Usa condicionales para cambiar estilos: javascript < Text style = { [ styles . titulo , isActive...
Leer más

7.1-19. Creación de estilos

  Creación de Estilos en React Native: Buenas Prácticas En el post anterior, creamos nuestro primer componente en React Native. Hoy vamos a profundizar en cómo  estructurar correctamente los estilos  para mantener un código limpio y escalable. 🚫 Evita los Estilos "Inline" En el ejemplo anterior, definimos los estilos directamente en el componente: jsx < View style = { { width : 50 , height : 50 , backgroundColor : 'red' } } /> Aunque funciona,  no es una buena práctica  porque: Dificulta el mantenimiento en proyectos grandes. Hace el código menos legible. No permite reutilizar estilos. ✅ La Forma Correcta: Objetos de Estilo React Native recomienda definir los estilos en un  objeto separado  usando  StyleSheet.create() : jsx import { View , StyleSheet } from 'react-native' ; function MiComponente ( ) { return < View style = { styles . mainContainer } /> ; } const styles = StyleSheet . create ( { mainCont...
Leer más