Continuación del Maquetado del Home: Creación de Pantallas en React Native

En esta clase, vamos a continuar con el maquetado de la pantalla principal de nuestra aplicación (home). Para ello, nos dirigimos a la carpeta src/containers.

Creación de las Pantallas de Home y Profile

1. Copiar y renombrar la carpeta out: Lo primero que debemos hacer es copiar toda la carpeta out, pegarla en el mismo directorio y cambiarle el nombre.
2. Renombrar y organizar las pantallas: En el directorio de home, encontraremos dos pantallas provenientes de la copia de la carpeta out. Decidimos eliminarlas y crear una nueva pantalla denominada Home Screen.
3. Uso de NFS y exportación: Utilizamos NFS (Network File System) para exportar por nombre la pantalla Home Screen, completando así la creación de la página de inicio de nuestra app.
4. Crear la pantalla de perfil: De la misma manera, copiamos el archivo de la pantalla principal y lo pegamos en el directorio correspondiente, renombrándolo a Profile Screen.

Exportación y Ajuste de los Archivos

1. Exportar las pantallas: Ahora, debemos asegurarnos de que los archivos de las pantallas estén correctamente exportados. En el archivo index de la carpeta containers, realizamos la exportación de las pantallas Home y Profile.
2. Configuración de navegación: En el archivo index de la carpeta navigation, eliminamos las configuraciones previas de autenticación y las reemplazamos con las pantallas recién creadas: Home Screen y Profile Screen. Además, ajustamos el nombre de la app a Main App para que se inicialice correctamente con el stack correspondiente.

Levantamiento de la Aplicación

1. Verificación en la aplicación: Al levantar la aplicación, notamos que se presenta un problema similar al que tuvimos en la pantalla de login: la interfaz se desplaza hacia arriba, afectando la visualización en la pantalla del dispositivo móvil. Esto se debe a que no estamos respetando correctamente el área nativa del celular.
2. Ajuste del Tab Navigator: Nos dirigimos al Tab Navigator y realizamos un ajuste utilizando el mismo hook que usamos en la pantalla de login para evitar que la pantalla se mueva incorrectamente.

Ajustes en Estilos y Componentes

1. Ajuste de estilos: Para garantizar que nuestra pantalla de Home se vea correctamente, aplicamos el mismo estilo de contenedor utilizado en la pantalla de login. Añadimos un padding top de 100 para asegurar que los elementos no se solapen con la barra de navegación del celular.
2. Visualización de los usuarios: Creamos una lista de usuarios ficticios (dummy) para mostrar cómo se renderiza una lista de datos en la pantalla. Inicialmente, intentamos renderizar una lista de usuarios con un ScrollView. Sin embargo, detectamos que al agregar muchos usuarios, no es posible desplazarse por la lista.
3. Uso de FlatList: Para corregir el problema y mejorar la eficiencia, decidimos utilizar el componente FlatList de React Native, que permite cargar y renderizar los elementos de la lista de manera más eficiente. Este componente maneja dinámicamente los datos, lo que lo hace ideal para cargar listas de usuarios de tamaño variable.

Implementación de Funcionalidades Adicionales

1. Botones de interacción: En la pantalla de Home, añadimos botones que permiten editar o eliminar usuarios. Ajustamos el diseño de estos botones utilizando FlexDirection row y un gap de 16 para mejorar la apariencia.
2. Pantalla de perfil: En la pantalla de Profile, integramos un botón de «Cerrar sesión» y aplicamos los mismos ajustes de estilos utilizados en la pantalla principal. Además, seguimos buenas prácticas al mover los estilos a componentes externos, lo que permite un código más limpio y modular.

Commit y Cierre del Proyecto

Finalmente, realizamos un commit para guardar los cambios y asegurarnos de que todas las modificaciones en las pantallas de Home y Profile estén debidamente registradas. El mensaje del commit es el siguiente:

git commit -m "Se agrega Home y Profile screens"

Con estos ajustes y mejoras, hemos terminado el proceso de maquetado y preparación de las pantallas de nuestra aplicación. Nos vemos en la próxima clase, donde continuaremos con nuevas implementaciones y ajustes.