Creación de nueva pantalla y navegación en React Native

La nueva arquitectura de React Native impulsa un rendimiento superior: menos consumo de batería, animaciones fluidas y una experiencia natural. Gracias a un motor de JavaScript en Fabric y un render en Hermes, se optimiza el ciclo de ejecución. Aquí verás cómo crear una pantalla about, enlazarla desde home con Expo Router y resolver errores comunes con la terminal, limpieza de caché y Expo Go.

¿Cómo mejora el rendimiento con la nueva arquitectura de React Native?

La base del desempeño está en dos pilares: un motor de JavaScript en Fabric y un render en Hermes. Esto reduce el desgaste de batería y mantiene la interfaz fluida al interactuar con pantallas y navegación.

¿Por qué se nota en la experiencia del usuario?

• Menor consumo de recursos del dispositivo.
• Transiciones y desplazamientos más naturales.
• Respuesta inmediata al tocar tabs o enlaces.

¿Qué ventajas prácticas obtienes al desarrollar?

• Cambios visibles con más estabilidad.
• Menos bloqueos durante el render.
• Base sólida para crecer la app de hábitos.

¿Cómo crear una nueva pantalla y tabs con Expo Router?

Expo Router trata los archivos dentro de la carpeta tabs como páginas y tabs automáticamente. Duplicar la pantalla principal y renombrarla permite sumar una vista sin configurar rutas manuales.

¿Qué pasos seguir para duplicar y renombrar?

• Copiar el archivo del index (tu home) dentro de la carpeta tabs.
• Pegar y renombrar con rename para que sea un identificador claro: about.
• Editar el contenido: título “sobre mí” y un mensaje de ánimo para la app de hábitos.
• Guardar y verificar que aparece una nueva tab de forma automática.

¿Qué aporta el uso de TSX en tabs?

• Estructura declarativa y simple.
• Una vista nueva con solo agregar un archivo .tsx.
• Consistencia en estilos y componentes reutilizables.

¿Cómo navegar con link y evitar errores comunes?

Además de las tabs, puedes navegar mediante texto clicable usando la etiqueta Link. Desde home, crea un enlace que apunte a la página about, importando el componente directamente desde expo-router.

¿Cómo crear el enlace a about?

• Ir a home y añadir una etiqueta Link.
• Importar Link desde expo-router cuando lo solicite.
• Agregar la propiedad de destino entre comillas con la ruta: "about".
• Hacer clic en “ir sobre mí” y confirmar que redirige a about.

¿Qué errores típicos verás y cómo depurarlos?

• Falta de cierre en una etiqueta: revisar la terminal, que indica el archivo y la línea exacta.
• Cambios que no se renderizan: en la terminal, presionar la tecla r para redesplegar.
• Inconsistencias por caché: iniciar con el comando que incluye -c para borrar la caché antes del despliegue.
• Puerto ocupado: aceptar el nuevo puerto sugerido por la terminal.
• Vista en dispositivo físico: conectar laptop y dispositivo al mismo wifi para ver la app en Expo Go.

¿Te gustaría que profundicemos en más patrones con Expo Router o en expresiones de JavaScript para sumar interactividad? Deja tus preguntas y cuéntame qué parte quieres explorar a fondo.