¿Quieres dejar de repetir código y construir pantallas con componentes reutilizables en React Native? Aquí aprenderás a crear dos componentes que comparten información mediante parámetros y props, y a renderizar una lista de hábitos sin duplicar tarjetas. Es ideal si ya diste tus primeros pasos con JSX y quieres estructurar una app real.

La idea central es simple pero poderosa: una pantalla completa puede construirse con solo dos componentes que se comunican entre sí y se muestran a través del home. En lugar de tener piezas sueltas, empiezas a pensar en bloques que puedes llamar las veces que necesites.

¿Cómo creo un componente reutilizable en React Native?

Todo empieza en la carpeta components, donde creamos dos archivos. El primero es HabitGreeting y el segundo HabitCard, ambos con la terminación .tsx porque trabajamos con TypeScript (sería .jsx si usaras JavaScript).

Un componente no es más que una función exportable. Declaras una function con su nombre, por ejemplo Greeting, y para que pueda verse en otras pantallas necesitas el export default. Sin ese export default, el componente queda atrapado en su archivo.

¿Qué hace export default en un componente? Permite que una función o componente se importe y se use en otras pantallas de la aplicación. Sin él, el componente no puede verse fuera de su propio archivo.

Dentro de Greeting reutilizamos las funcionalidades de JavaScript de clases anteriores: una constante de fecha, otra para traer las horas y el saludo con su condicional. Como es JSX, dentro del componente conviven JavaScript y HTML, y todo lo visual se coloca en un return dentro de paréntesis.

¿Por qué debo importar las etiquetas y los estilos?

Cada vez que usas una etiqueta como view o text, tienes que importarla desde React Native. Lo mismo pasa con los estilos: para construirlos usamos la constante StyleSheet, que también se importa de la librería.

En este primer componente mostramos dos textos. Uno con el estilo de título que saluda con el nombre de la persona, y otro que muestra la fecha local de hoy. El nombre llega como parámetro de la función, aunque por ahora lo dejamos escrito de forma estática para hacerlo dinámico más adelante [01:30].

¿Cuál es la diferencia entre parámetros y props?

Aquí viene lo interesante. El primer componente recibe información por parámetros, pero no es la única forma de pasar datos. El segundo componente, HabitCard, usa props, que son datos con un tipado definido.

Para ello creamos un tipado con type, al que llamamos props, e indicamos exactamente qué va a recibir el componente:

• title: de tipo string, porque es una cadena de texto.
• strike: de tipo number, que representa la racha de hábitos de la persona.
• isComplete: de tipo boolean, para saber si hoy se completó el hábito.

¿Qué son las props en React Native? Son datos tipados que un componente padre entrega a un componente hijo. A diferencia de los parámetros sueltos, las props definen el tipo de cada valor (texto, número, booleano) que recibirá el componente.

Al definir el tipo de cada prop evitas errores, porque el componente sabe de antemano que title es texto, strike es número e isComplete es verdadero o falso.

¿Cómo cambio estilos según un valor booleano?

La card reacciona al valor de isComplete. Si viene en true, el estilo devuelve una tarjeta verde que indica hábito completado; si no, retorna la card con su color normal. Esta lógica condicional sobre estilos es lo que diferencia visualmente los hábitos cumplidos de los pendientes.

También agregamos un Style Row con propiedades de CSS para que los elementos se muestren en fila, con espacio entre ellos y el texto centrado. Dentro de la tarjeta colocamos el title, un pequeño check cuando isComplete es true, y un texto con la racha en días que proviene del prop strike [05:30].

¿Cómo renderizo una lista de componentes con map?

Para usar estos componentes solo los llamas por su nombre en la pantalla deseada, y el editor genera el import automáticamente indicando que vienen de components. Al componente de saludo le enviamos el nombre como parámetro y aparece el nuevo greeting al guardar.

Para el HabitCard creamos un arreglo con varios hábitos. Cada elemento del arreglo tiene:

• Un ID como identificador único.
• Un title, por ejemplo "Beber agua".
• Un strike con la racha en número, como 3.
• Un isComplete en true o false.

El arreglo se escribe con corchetes y cada objeto con llaves. La magia está en recorrerlo: llamamos al arreglo habits y hacemos un map con una arrow function, convirtiendo cada elemento general en uno singular llamado h.

¿Para qué sirve el map al renderizar listas? Recorre un arreglo y crea un componente por cada elemento. Así muestras tres tarjetas de hábitos usando un solo componente, pasando datos distintos en cada iteración.

Dentro del map usamos nuestro componente y le pasamos individualmente cada dato: el ID primero, para que React sepa que no repite información, y luego title, strike e isComplete con la sintaxis h.title. El resultado al guardar son tres tarjetas con rachas de tres días, un día y siete días, sin haber creado tres tarjetas manualmente [09:00].

Ese es el verdadero valor de los componentes reutilizables: escribes la estructura una vez y la alimentas con información distinta cada vez. ¿Qué hábito pondrías en tu primera tarjeta? Cuéntame en los comentarios cómo adaptarías este arreglo a tu propia aplicación.