Personaliza el modo oscuro y la paleta de colores en React Native con un enfoque práctico. Aquí verás cómo conectar los hooks de tema con componentes reutilizables como ThemeText y ThemeView para lograr una UI coherente, accesible y fácil de mantener.
¿Cómo activar el modo oscuro con hooks de temas en React Native?
El comportamiento dinámico de colores depende del sistema de temas de React Native y su integración con el modo oscuro del dispositivo. Al cambiar entre light y dark, los tabs y vistas como explore se actualizan automáticamente gracias a los hooks de tema.
- Define una paleta de colores en
constants/theme y ajústala a tu marca.
- Usa tipografías por plataforma: fuentes por defecto para iOS y variantes específicas para web.
- Conecta el color del sistema operativo mediante un hook de tema que reacciona al estado del dispositivo.
- Aprovecha componentes base ThemeText y ThemeView con propiedades
lightColor y darkColor para alternar estilos sin duplicar lógica.
Idea clave: configura colores y tipografías en un solo lugar, y deja que el hook gestione el cambio de tema.
¿Cómo crear un componente reutilizable con paleta personalizada?
Se construye un ProfileHeader.tsx dentro de components para mostrar nombre y rol de la persona usuaria. Este componente ilustra cómo consumir la paleta, aplicar estilos con Flexbox y generar iniciales para un avatar circular.
¿Cómo obtener colores con use theme color?Idea clave: usa nombres semánticos como card, primary y onPrimary para desacoplar diseño y lógica.
¿Cómo maquetar con view, Flexbox y StyleSheet?
Combina estilos de layout con color dinámico. El contenedor usa backgroundColor de la paleta y el avatar un círculo con el color primario.Idea clave: mezcla styles estáticos para layout con colores del tema en línea, sin duplicar estilos.
¿Cómo generar iniciales del nombre en TypeScript?
Crea una constante para obtener iniciales a partir del nombre: separa por espacios, toma la primera letra de cada palabra y conviértela a mayúsculas.Luego úsala dentro del avatar:Idea clave: prepara datos en constantes antes del render para mantener JSX limpio y legible.
¿Cómo integrarlo en la pantalla e impulsar la UI dinámica?
Integra el componente en la pantalla, importa y pasa las props name y role. Reemplaza Text por ThemeText en el resto de la interfaz para heredar el modo oscuro automáticamente. Como reto, cambia View por ThemeView y asigna colores por tema directamente.Usa ThemeText en mensajes como “buenas tardes” y el saludo principal.
- Ajusta
lightColor y darkColor en ThemeView para el fondo.
- Centraliza la paleta en
constants/theme para mantener consistencia.
¿Tienes dudas, ideas o una paleta preferida? Comparte en comentarios cómo aplicarás ThemeView y qué estilos sumarás a tu UI.
