Pressable vs TouchableOpacity en React Native

Potencia tu app de hábitos con un flujo claro para añadir elementos y una UI consistente. Aquí verás cómo crear un botón primario reusable con Pressable, elegirlo frente a TouchableOpacity y optimizar la visualización vertical con ScrollView y espaciado controlado. Todo con enfoque práctico y directo.

¿Cómo construir un botón primario reusable con Pressable?

Crear un componente dedicado facilita mantener la consistencia y reutilizar lógica. Se propone un archivo PrimaryButton.tsx que recibe por props el title, el onPress, si está disabled y styles personalizados. Así, puedes usarlo para "Añadir hábito" y más.

¿Qué props recibe el botón?

• title como texto del botón.
• onPress como función a ejecutar al presionar.
• disabled como booleano para desactivar el botón.
• style para extender o sobrescribir estilos.

¿Cómo se implementa con estilos mínimos?

• Usa StyleSheet para definir base: mínimo alto y ancho, padding y centrado del contenido.
• Integra la paleta de colores: fondo en reposo y en presionado, y borde si aplica.
• Declara role como "button" y el label desde el title.

// PrimaryButton.tsx
import React from 'react';
import { Pressable, Text, StyleSheet, ViewStyle } from 'react-native';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: ViewStyle;
};

export function PrimaryButton({ title, onPress, disabled, style }: Props) {
  return (
    <Pressable
      role="button"
      accessibilityLabel={title}
      onPress={onPress}
      disabled={disabled}
      style={[styles.button, style]}
    >
      <Text style={styles.label}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 48,
    minWidth: 48,
    padding: 12,
    alignItems: 'center',
    justifyContent: 'center',
    // colores y borde desde la paleta.
  },
  label: {
    // estilo del texto según la paleta/tipografía.
  },
});

¿Cómo se usa en home para añadir hábitos?

• Importa el componente en la pantalla principal.
• Reemplaza el botón anterior por el reusable.
• Pasa el title "Añadir" y el onPress que invoca agregar hábito.

// En Home (index)
<PrimaryButton title="Añadir" onPress={addHabit} />

¿Por qué elegir Pressable frente a TouchableOpacity?

La elección clave radica en el control de estados de interacción. Con Pressable obtienes retroalimentación clara del usuario durante el gesto.

¿Qué ventaja aporta Pressable en la interacción?

• Expone estados como "press in" y "out" con precisión.
• Permite registrar logs y confirmar acciones al soltar.
• Mejora el feedback táctil más allá de la opacidad.

¿Qué limita a TouchableOpacity?

• Solo cambia la opacidad al presionar.
• No ofrece el mismo control de estados de interacción.
• Menos flexible para animaciones y estilos dependientes del estado.

¿Cómo listar hábitos con ScrollView y espaciado adecuado?

Cuando la lista crece, sustituir View por ScrollView permite desplazar verticalmente y ver todos los hábitos. Importa desde React Native y ajusta el contenedor de contenido para espaciado y padding inferior.

¿Cómo configurar el ScrollView en vertical?

• Reemplaza el contenedor principal por ScrollView.
• Oculta el indicador vertical si no lo necesitas.
• Controla el espaciado con contentContainerStyle.

import { ScrollView } from 'react-native';

<ScrollView
  contentContainerStyle={{
    paddingBottom: 32,
    gap: 16,
  }}
>
  {/* Tarjetas de hábitos aquí. */}
</ScrollView>

¿Qué buenas prácticas aplicar al listar tarjetas?

• Usar un gap consistente entre ítems.
• Añadir padding inferior para el último ítem.
• Mantener el import desde React Native, no desde librerías de gestos.

¿Te gustaría ver variantes del botón o más patrones de listas? Comenta qué te interesa profundizar y qué retos encuentras al implementarlo.