En esta clase, exploraremos cómo agregar iconos a la navegación de nuestra aplicación React Native, así como también cómo programar el botón de «Cerrar sesión» de manera sencilla.
Solucionando el Problema de Referencias Circulares
Al levantar el proyecto, encontramos un error relacionado con referencias circulares. Este tipo de referencia ocurre cuando un componente o módulo llama a otro, y ese segundo componente o módulo también termina llamando al primero. Este ciclo puede afectar negativamente la performance, especialmente si la aplicación se renderiza en el servidor. En el caso de React Native, el impacto no es tan grave debido a que el código JavaScript se compila en código nativo, pero es una buena práctica evitar las referencias circulares siempre que sea posible.
Para solucionar este problema, simplemente moveremos el archivo Navigation App fuera de la carpeta Core y lo colocaremos en la raíz del proyecto. Esto eliminará la referencia circular y mejorará la estructura de la aplicación.
Pasos para Resolver el Error
- Accedemos a la carpeta Core y abrimos el archivo Index.
- Eliminamos la importación del archivo Navigation App.
- Movemos Navigation App a la raíz del proyecto, fuera de la carpeta Core.
- En el archivo App Tcx, actualizamos la importación de Navigation App para que apunte a la nueva ubicación.
Una vez hecho esto, el error de las referencias circulares debería desaparecer. Refrescamos el proyecto y verificamos que la advertencia ya no aparezca.
Agregar Iconos a la Navegación
A continuación, procederemos a agregar iconos a nuestra barra de navegación. Para esto, usaremos la documentación de React Navigation y la librería de íconos de Expo.
Instalación de la Librería de Iconos
- Primero, accedemos a la documentación de React Navigation y seleccionamos la sección de Tab Navigation, donde podemos encontrar ejemplos y guías para personalizar los tabs.
- Luego, visitamos la página de Expo Icons, donde se ofrece una guía sobre cómo utilizar su librería de iconos.
- Instalamos la librería ejecutando el siguiente comando en la consola:
npx expo install @expo/vector-icons
Con esto, tendremos todo lo necesario para personalizar nuestros tabs.
Personalización de los Tabs
He preparado un gist con el código necesario para realizar la personalización de los tabs. Pueden copiar todo el contenido y pegarlo en el archivo Navigation App.
- Dentro de Navigation App, seleccionamos todo el contenido y lo reemplazamos con el nuevo código que incluye las líneas para personalizar los tabs.
- Utilizamos una propiedad (
props) que nos permite cambiar los iconos según la ruta activa. En este ejemplo, si la ruta es home, usaremos un icono específico; de lo contrario, utilizaremos otro.
Este enfoque es sencillo, pero si tu aplicación tiene más tabs, podrías considerar usar un switch o un diccionario para gestionar los iconos de manera más eficiente.
Resultado Final
Una vez realizado el cambio, levantamos nuevamente el proyecto. Verificamos que los tabs funcionan correctamente y que los iconos se muestran según la ruta activa.
Prueba de Funcionalidad
Para probar la implementación, realizamos el login utilizando un correo electrónico y una contraseña. Una vez dentro, verificamos que los tabs respondan correctamente. Incluso podemos experimentar con las propiedades de los tabs, cambiando colores y otras opciones.
Finalmente, dejamos la configuración tal como estaba antes de realizar las pruebas.
Conclusión
Con esto hemos cubierto cómo solucionar el problema de las referencias circulares y cómo personalizar los iconos en la barra de navegación de nuestra aplicación React Native. Hemos aprendido a usar React Navigation y Expo Icons para mejorar la apariencia de nuestra aplicación y hacerla más intuitiva para los usuarios.
Nos vemos en la próxima clase, donde continuaremos con más funcionalidades.