¿Quieres que tu aplicación cambie de colores automáticamente según el tema del dispositivo? El modo oscuro en React Native se logra con un sistema de temas que ya viene integrado y que puedes personalizar con tu propia paleta de colores. Esta guía es para ti si estás construyendo interfaces que respondan al modo claro y oscuro del sistema operativo.

La magia está en los hooks de temas que React Native trae por defecto. Cuando cambias tu dispositivo al modo oscuro, los tabs y las páginas como Explore ajustan sus colores solos, y al volver a light todo regresa. Y aquí viene lo interesante: puedes controlar cada tono de esa transición.

Dónde se definen los colores y la tipografía de la app

Todo arranca en la carpeta constants, dentro del archivo theme. Ahí viven los colores que la aplicación usa por defecto, y puedes reemplazarlos por los de tu propia paleta [00:53].

La recomendación es tomarte el tiempo de ajustar esos valores a tu gusto. En el ejemplo se conservaron los colores por defecto y se agregaron nuevos para los botones y los warnings, haciendo la interfaz más dinámica.

Pero el archivo de tema no solo guarda colores. También define la tipografía de toda la aplicación, con fuentes específicas para iOS y otras distintas para web [01:28].

¿Dónde se configuran los colores del tema en React Native? En el archivo theme dentro de la carpeta constants. Ahí defines los colores por defecto y agregas los tuyos para botones, warnings y cualquier elemento personalizado.

Qué hace el hook useTheme

El archivo theme guarda los valores, pero quien los hace visibles según el modo del celular es el hook useTheme [01:46].

Este hook ya viene automatizado en la plantilla y se conecta con el color del sistema operativo. Es justamente lo que permite ver el cambio de color dependiendo de cómo esté configurado tu dispositivo.

Cómo usar los componentes ThemeText y ThemeView

Además de los hooks, la plantilla incluye dos componentes clave que funcionan como las etiquetas principales de tu JSX [02:10].

• ThemeText: maneja tipos de texto como default, title y semibold, cada uno con su estilo específico.
• ThemeView: incluye propiedades de light color y dark color, que son las que permiten el cambio de fondo según el tema.

Estos componentes ya traen colores por defecto, así que reemplazan a las etiquetas normales de texto y vista para que todo responda al modo del sistema sin trabajo extra.

Cómo crear un componente ProfileHeader con useThemeColor

Para poner en práctica todo esto, se crea un nuevo componente dentro de components llamado ProfileHeader.tsx [03:00]. La idea es mostrar el nombre y el rol de la persona que usa la aplicación.

El paso central es usar la función useThemeColor. Para acceder a un tono de tu paleta, llamas a esta funcionalidad y le indicas qué color quieres usar [03:32]. Así se almacenan en constantes los colores que necesita la tarjeta:

• El color de la cart o tarjeta.
• El color primario de la página.
• El color onPrimary.

Con esos colores listos, se construyen las vistas con View y se definen estilos de ubicación usando StyleSheet, aplicando flexbox, borders y espacios a la tarjeta [04:20].

¿Para qué sirve useThemeColor? Es la función que te da acceso a un color específico de tu paleta del tema. Le indicas el color que quieres y lo guardas en una constante para aplicarlo en el backgroundColor u otros estilos.

Cómo combinar estilos del JSX con los del tema

La parte interesante es mezclar tus estilos normales con los colores dinámicos del tema. Esto se hace en la propiedad styles del View abriendo corchetes, llaves y corchetes [05:30].

Primero entregas la propiedad de ubicación, como la de la cart que acomoda con flexbox. Luego, dentro de corchetes, defines que el backgroundColor sea igual a la constante de color que guardaste. De esa forma conviven los estilos del JSX y los del theme color en un mismo elemento.

También se crea un contenedor circular para el avatar, con estilos redondeados y el backgroundColor de la constante primaria, y dentro se usa el componente ThemeText con el estilo avatarText para mostrar las iniciales.

Cómo generar las iniciales del avatar con split y map

Para que el avatar muestre las iniciales de la persona, se crea una constante llamada initials [06:50]. La lógica toma el name, hace un split, quita los espacios y mapea cada parte del nombre.

Así se obtienen dos letras del nombre y se mantienen en mayúscula. En lugar de mostrar el name completo, el componente renderiza esas initials dentro del círculo del avatar.

Como es una constante, se invoca entre llaves dentro del JSX, mientras que View y StyleSheet se importan desde React Native.

Cómo usar el componente en la pantalla home

Una vez listo el componente, solo se llama en la pantalla deseada. En el archivo index se importa ProfileHeader y se le pasan las propiedades que necesita: name y role [07:40].

Al guardar, aparece la tarjeta de perfil con el nombre y el rol, por ejemplo dev. Como el estilo es reusable, puedes eliminar vistas sobrantes para ver la aplicación en pantalla completa.

El siguiente paso es reemplazar cada Text por ThemeText, eligiendo el estilo o color que prefieras. Al activar el modo oscuro, el perfil y el mensaje de bienvenida como el Buenas tardes cambian de color automáticamente.

Te queda un reto: transformar el View principal en un ThemeView, aplicarle el color que quieras y sumarle más estilos. Ese cambio no estará en el commit de esta sesión, pero lo verás en la próxima.

¿Qué paleta de colores vas a usar en tu aplicación? Cuéntanos en los comentarios cómo te fue con el reto de cambiar los view por themeView.