El hook useState de React es lo que transforma tu aplicación estática en una experiencia dinámica donde los valores cambian con cada interacción del usuario. Si estás construyendo una app de hábitos en React Native y quieres que tus tarjetas respondan al tacto, aquí aprenderás cómo inicializar estados, tiparlos y conectarlos a botones accionables.

¿Qué es un estado y en qué se diferencia de los props?

Hasta este punto habíamos trabajado con props, esos valores que pasas desde un componente padre hacia un componente hijo. Pero un estado es distinto: es un valor que tú creas dentro de una pantalla y que puedes modificar a medida que el usuario interactúa.

¿Qué es useState en React? Es un hook que te permite crear un valor dinámico dentro de una pantalla y cambiarlo cuando quieras. Siempre entrega dos cosas: la variable con el valor actual y una función para actualizarlo.

Cada vez que usas useState [04:01] obtienes dos elementos: la variable que guarda el valor y la función que lo cambia. Esos valores pueden ser de distintos tipos:

• Numéricos, para contar rachas o cantidades.
• De tipo string, para títulos o nombres.
• Booleanos, para estados de verdadero o falso como "completado".

Algo importante: al usar useState, el editor siempre te pedirá importar la librería de React. Solo tienes que agregar esa importación y listo.

¿Cómo preparar la interfaz dinámica antes del estado?

Antes de meternos de lleno en los estados, hubo ajustes visuales que preparan el terreno. El primero fue reemplazar la etiqueta view por el componente themeView [00:34], creando una constante que guarda el color de background igual que se hizo antes con el texto.

A esos estilos se les sumó un padding horizontal usando el valor de esa constante guardada. Y aquí viene un detalle que muchos pasan por alto: el espaciado en celulares con isla dinámica.

Si no controlas ese espacio, el perfil se ve demasiado arriba, tapado por la isla. Para resolverlo se usa una constante que guarda el espacio seguro de la pantalla, conocida como insets [01:19]. Con unos paddings aplicados a través de ese insets, la isla deja de montarse sobre la aplicación y aprovechas toda la pantalla útil.

¿Para qué sirve insets en React Native? Guarda el área segura de la pantalla, el espacio real que puedes usar sin que la isla dinámica o los bordes del dispositivo tapen tu contenido.

¿Cómo hacer una tarjeta accionable con Pressable y onToggle?

Para que el estado cambie necesitas una acción, y esa acción requiere un botón. Aquí entra la etiqueta Pressable [05:38], que funciona prácticamente como un botón.

Estos fueron los pasos para convertir la tarjeta en algo accionable:

1. Agregar una nueva prop de tipo funcionalidad llamada onToggle [04:49], vacía por ahora.
2. Envolver todo el contenido de la tarjeta dentro de la etiqueta Pressable.
3. Asignar la acción onClick apuntando a esa prop que trajiste desde arriba.
4. Mover los estilos que estaban en view directamente al Pressable y eliminar la etiqueta view.

Una vez montado el Pressable, se usa el valor pressed para crear un condicional de estilos. Por defecto se aplican los estilos de la tarjeta, pero el background color cambia según si presionas o no.

Ese fondo toma la constante surface, y la opacidad varía: 0.96 cuando está presionado y 1 cuando no lo está. También se agregó un border color condicional que muestra un color de éxito si el hábito está completado, o el borde normal si no lo está.

Con esto ya ves el cambio de opacidad al hacer press, aunque todavía falta la lógica completa de selección por estado.

¿Cómo inicializar un estado con un modelo tipado?

El siguiente paso ocurre en la pantalla principal, el archivo index. Ahí se declaran dos useState: uno que contiene los ítems, que en este caso son los hábitos, y otro pensado para agregar nuevos hábitos.

Un detalle práctico sobre nombres: no puedes llamar a una variable new [09:54], porque es una palabra reservada dentro de la estructura de programación. Por eso se renombra antes de seguir.

Para mostrar algo desde el inicio necesitas un estado inicial, y se construye con un objeto igual que en el mapeo anterior. Ese modelo define un type con esta estructura:

• ID de tipo string.
• Título de tipo string.
• Racha de tipo number.
• isComplete de tipo booleano (verdadero o falso).
• Prioridad con valores low, mid o high.

¿Por qué tipar el estado inicial en React Native? Porque define exactamente qué forma tienen tus datos. Así cada hábito debe tener ID, título, racha, estado completado y prioridad, evitando errores al manipularlos.

Con el modelo y el estado inicial listos, se indica que esos serán los primeros hábitos que aparecen siempre en la aplicación. Esto se logra llamando al estado inicial dentro del useState mediante corchetes, usando el nombre initial.

De esta forma tus ítems iniciales siempre se renderizan, y lo único que quedaría pendiente es sumar más hábitos a ese listado. ¿Ya identificaste dónde usarías un estado booleano en tu propia app? Cuéntame en los comentarios cómo lo aplicarías.