Si estás construyendo una app de hábitos en React Native y quieres entender por qué usar Pressable en vez de TouchableOpacity, además de cómo mostrar listas largas con ScrollView, aquí lo desgloso paso a paso. Es contenido ideal para quienes ya saben añadir elementos a su app pero necesitan comprender la lógica detrás del botón y la navegación vertical.

¿Por qué usar Pressable en lugar de TouchableOpacity?

Ambas etiquetas sirven para capturar el toque del usuario, pero no hacen lo mismo. La diferencia está en el control de estados.

El Pressable reporta estados completos cuando lo tocas: entra en press in al presionar y ejecuta la acción out al soltar, confirmando su salida [01:50]. Eso te da visibilidad total sobre lo que ocurre en cada interacción.

En cambio, el TouchableOpacity solo calcula la opacidad y genera un efecto visual al seleccionar el botón, pero no reporta ese movimiento de estados [02:06]. Por eso el botón recomendado como elección principal es Pressable, porque te permite reaccionar a cada fase del toque.

¿Cuál es la diferencia entre Pressable y TouchableOpacity? Pressable reporta los estados press in y out cuando tocas y sueltas el botón. TouchableOpacity solo cambia la opacidad visual, sin informar esos estados intermedios.

¿Cómo crear un PrimaryButton reutilizable con props?

La idea central es no repetir código. Creamos un componente reusable llamado PrimaryButton.tsx que recibe todo lo que necesita por medio de props [00:46].

Estas son las props que recibe el componente:

• title como string, el texto que se muestra en el botón.
• onPress como una función, la acción que ejecuta al presionarse.
• disabled como boolean, para verificar si el botón está desactivado.
• Los estilos de la vista, que se pasan para personalizar su apariencia.

Después de definir las props, se retorna el botón y se le aplican estilos traídos de la paleta de colores: el background, el color al hacer clic y el border [01:14]. Puedes usar los colores que prefieras.

¿Qué estilos lleva el PrimaryButton?

Para darle forma al botón se usa el stylesheet de React Native, importado desde la parte superior del archivo como en todos los componentes y pantallas [03:12].

Los estilos clave aplicados fueron:

• Un mínimo de alto y un mínimo de ancho para que el botón tenga tamaño consistente.
• Espacio interno para que el contenido respire.
• Centrado del título o su contenido.

El componente también define su role como button y toma el label desde el title de las props, además de verificar el disabled [02:40]. Con esto, el botón queda listo para usarse en cualquier parte de la app.

¿Cómo integrar el botón en el home de la app?

Una vez creado el componente, lo llevamos al home principal y lo importamos para verificar que esté retornando correctamente [01:30]. Aquí viene lo práctico: en el index, donde antes teníamos un pressable suelto, lo reemplazamos por nuestro nuevo PrimaryButton.

Le pasamos sus props directamente:

• El title con el valor Añadir.
• El onPress conectado a la funcionalidad Add Habit, que es la que agrega el hábito [04:00].

Al guardar, el botón muestra el título Añadir y ejecuta la acción de agregar hábito. Así reutilizas el mismo botón en todas las demás funcionalidades sin reescribir lógica.

¿Cómo mostrar todos los hábitos con ScrollView?

Cuando agregas muchos hábitos, algunos quedan ocultos porque no hay forma de desplazarse. La solución es reemplazar la etiqueta view por un ScrollView [04:33].

Un detalle importante: el import debe venir directamente de React Native, no de la librería de gestos [04:45]. Si lo importas del lugar equivocado, el comportamiento no será el esperado.

¿Para qué sirve el ScrollView en React Native? Permite desplazar verticalmente el contenido cuando no cabe en pantalla. Reemplaza al view y habilita el scroll para visualizar todos los elementos de una lista larga.

¿Qué propiedades del ScrollView controlan el diseño?

El ScrollView trae propiedades que ajustan tanto la experiencia como el espaciado. Una de ellas controla el indicador vertical, esa rayita que aparece al subir o bajar.

Estas fueron las configuraciones aplicadas:

• El indicador vertical se oculta seteándolo en estado false para una interfaz más limpia [05:10].
• Se usa containerStyle en lugar de estilos sueltos para controlar el espaciado interno.
• Dentro de containerStyle se agrega un paddingBottom de 32 para dar aire en la parte inferior.
• Se define un gap de 16, que es el espaciado entre cada tarjeta [05:40].

Con estos valores cambió el espacio inferior y el espacio entre tarjetas. Ahora puedes agregar cuantas tarjetas quieras, hacer scroll y visualizarlas todas sin que ninguna quede escondida.

¿Ya probaste reemplazar tu view por un ScrollView? Cuéntame en los comentarios cómo te fue al configurar el gap y el paddingBottom en tu propia app de hábitos.