StyleSheet y Flexbox en React Native

Diseña pantallas consistentes en React Native con estilos reutilizables, layout con Flexbox y estilos condicionados por prioridad. Aquí verás cómo un style sheet se relaciona con CSS, cómo organizar componentes con flex direction y justify content, y cómo crear un componente screen para estandarizar el fondo y el espaciado en toda la app.

¿Qué es un style sheet y cómo se relaciona con CSS?

Un style sheet funciona como una hoja de estilos en cascada: define identificadores de estilos y propiedades equivalentes a CSS en formato camel case. Permite pasar estilos como arreglo y objeto, lo que da flexibilidad para combinar clases base con ajustes puntuales.

• Identificadores de estilo con claves en camel case.
• Propiedades análogas a CSS aplicables en React Native.
• Mezcla de estilos: arreglo + objeto para personalizar.
• Estandarización: un solo origen de verdad para el look & feel.

¿Cómo alinear con Flexbox en React Native?

Por defecto, React Native organiza en columna. Con flex direction puedes cambiar a fila y usar justify content y align items tal como en CSS. Así reordenas la card de hábitos y distribuyes contenido al inicio, centro o final, además de los espacios.

• Dirección: flexDirection: 'row' para fila, 'column' para columna.
• Alineación horizontal: justifyContent con flex-start, center, flex-end.
• Distribución: space-between y space-around para separar elementos.
• Alineación vertical: alignItems con los mismos valores.

La clave está en reusar estilos base y condicionar según props. Con un componente screen estandarizas fondo y espaciado; luego, en la card de hábitos, aplicas estilos en función de la priority.

¿Cómo reutilizar estilos con un componente screen?

Crea un componente llamado screen que reciba children y envuelva toda la vista. Así aplicas un mismo fondo y espaciados en secciones como index, explore y about.

• Recibe children vía props para renderizar contenido interno.
• Define estilos en StyleSheet.create con styles.screen.
• Usa backgroundColor, paddingHorizontal y paddingVertical como base.
• Envuelve tus vistas: el contenido cambia, el fondo permanece.

¿Cómo aplicar estilos según priority en la card de hábitos?

Agrega un prop priority y ajusta el estilo en función de su valor. Se usa una paleta por prioridad: alto en rojo, mediano en naranja y bajo en verde. Una constante compara priority con el estilo definido y aplica background y el color de la letra.

• Añade priority a los props: low, mid, hide.
• Define estilos por prioridad con colores diferenciados.
• Crea una constante que hace match entre priority y priority style.
• Inserta un Text que indique si es prioritario o no.
• Reorganiza la vista en dos filas para una card más clara.

¿Te gustaría ver un ejemplo con tus propios colores o nombres de prioridad? Deja un comentario y cuéntame cómo estás estructurando tu style sheet y tus props en la card de hábitos.