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.

Ejemplo de combinación de estilos:

<Text style={[styles.textoBase, { color: '#ff5252' }]}>
  Etiqueta con ajuste de color.
</Text>

¿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.

Ejemplo de contenedor con Flexbox:

const styles = StyleSheet.create({
  fila: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

¿Cómo crear un componente screen y condicionar estilos por prioridad?

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.

Ejemplo base:

const Screen = ({ children }) => (
  <View style={styles.screen}>{children}</View>
);

const styles = StyleSheet.create({
  screen: {
    flexDirection: 'column',
    backgroundColor: '#101010',
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
});

¿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.

Mapa de estilos por prioridad (ejemplo):

const priorityStyle = {
  low:   { backgroundColor: '#2ecc71', color: '#0b3d2e' },
  mid:   { backgroundColor: '#f39c12', color: '#4a2e00' },
  hide:  { backgroundColor: '#e74c3c', color: '#4a0e0e' },
};

const estilos = priorityStyle[priority] || priorityStyle.low;

¿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.