El StyleSheet en React Native funciona como una hoja de estilos que te permite reutilizar y condicionar diseños dentro de tus componentes y pantallas. Si estás construyendo una app y quieres organizar tu interfaz sin repetir código, aquí aprendes a crear estilos estandarizados, aplicar Flexbox y cambiar colores según la prioridad de cada elemento.

Qué es el StyleSheet y cómo se relaciona con CSS

El StyleSheet es muy parecido a una hoja de cascada tradicional. Dentro guardas un identificador para cada estilo y, debajo, las claves que funcionan como propiedades de CSS [00:40].

La diferencia principal está en la escritura. En lugar de usar guiones como en CSS, React Native usa camel case: la propiedad empieza en minúscula y la siguiente palabra arranca en mayúscula. Por ejemplo, backgroundColor en vez de background-color.

¿Qué es el StyleSheet en React Native? Es un objeto donde defines estilos reutilizables con identificadores y propiedades de CSS escritas en camel case. Luego los aplicas a tus componentes a través de la constante styles.

Lo interesante es que casi todas las propiedades de CSS funcionan aquí, porque se usan las mismas [01:50]. También puedes agregar estilos en línea abriendo un arreglo con llaves directamente en el componente, lo que te da más personalidad sin perder estructura [01:05].

Cómo organizo una card con Flexbox

Flexbox es una de las propiedades más importantes para distribuir elementos en pantalla. React Native, por defecto, acomoda todo en dirección de columna [02:30].

Para cambiar esa dirección y controlar el acomodo usas tres propiedades clave:

• flexDirection: cambia de columna a fila cuando le pasas el valor row.
• justifyContent: controla la alineación en el eje principal.
• alignItems: controla la alineación en el eje cruzado.

Estas propiedades aceptan los mismos valores que ya existen en CSS, y por eso puedes reutilizarlos sin aprender nada nuevo [03:00]:

• flex-start coloca los elementos al comienzo.
• flex-end los lleva al final.
• center los centra.
• space-between y space-around distribuyen el espacio entre ellos.

Después de dominar esto, el siguiente paso natural es dejar de repetir estilos en cada pantalla.

Cómo creo un componente para estandarizar estilos

Para no escribir el mismo fondo una y otra vez, creas un componente llamado screen que estandariza el color y la apariencia de todas tus pantallas [04:05].

La idea es que el fondo sea siempre el mismo y lo único que cambie sea el contenido que entregas. Para lograrlo, pasas un children, que se recibe como una prop de tipo React.Node, parte de las etiquetas propias de React Native [04:40].

¿Para qué sirve children en React Native? Permite que un componente envuelva y muestre el contenido que recibe desde afuera. Así reutilizas un mismo contenedor con fondos o estilos distintos sin reescribirlo.

Dentro del componente retornas un View como contenedor principal y le aplicas la clase screen desde la constante styles. Importante: debes llamar al objeto correcto, que es styles y no stylesheet [06:30].

Los estilos del contenedor incluyen una dirección en columna, un backgroundColor a tu gusto, un padding horizontal para el espacio en el eje X y un padding vertical para el eje Y [06:00].

Para usarlo, vas al archivo index y envuelves tu view dentro de la etiqueta screen, importándola desde componentes. Al guardar, cambia el fondo pero el contenido se mantiene igual [07:00]. Lo mismo aplicas en las pantallas de explore y about.

Cómo condiciono estilos según la prioridad

Aquí viene lo interesante: puedes cambiar el estilo de un componente dependiendo de un valor. En la card de hábitos agregas una prop llamada priority y, según su valor, aplicas una paleta de colores distinta [07:50].

La paleta se construye con los mismos estilos del StyleSheet y define tres niveles:

• Prioridad alta en rojo (high).
• Prioridad media en naranja (mid).
• Prioridad baja en verde (low).

Primero agregas priority dentro de las props del componente, empezando con el tipo low [08:20]. Luego creas una constante que busca la coincidencia entre el valor de priority y el valor dentro de priorityStyle [09:20].

¿Cómo aplico estilos condicionales en React Native? Creas una constante que compara una prop, como priority, contra un objeto de estilos. Si hace match, aplica el color de fondo y de letra correspondiente a ese valor.

Cuando hay coincidencia, se asigna el background y el color de la letra correspondientes. Si cambias el valor a mid o high, la visualización cambia por completo [10:00].

Para cerrar la parte estética, organizas la card en dos filas. Colocas una etiqueta en la fila inferior para que la información se vea más ordenada y con eso tu tarjeta de hábitos queda lista [10:30].

¿Ya probaste condicionar estilos con una prop en tu propio componente? Cuéntame cómo te fue en los comentarios.