Estructura de un proyecto React Native con Expo

Construir aplicaciones móviles utilizando React Native y Expo es sencillo y organizado si entiendes cómo se estructura un proyecto base. Al iniciar tu proyecto, tendrás diversas carpetas y archivos predefinidos que debes conocer para optimizar su uso y evitar problemas técnicos.

¿Cuáles son las carpetas iniciales en una aplicación Expo?

Al crear tu proyecto React Native utilizando Expo, encuentras varias carpetas fundamentales. A continuación, se detalla la utilidad que tiene cada una:

• Carpetas invisibles generadas por Expo: Estas carpetas no requieren de tu atención, ya que Expo las maneja automáticamente para la configuración del proyecto.
• Assets: Aquí se almacenan imágenes, iconos, logos y splash screens que utilizarás en tu aplicación.
• Node Modules: Contiene todas las dependencias y paquetes necesarios para ejecutar tu proyecto. No debes modificar esta carpeta directamente, Expo se encargará de gestionarla automáticamente cuando instales nuevas librerías.

¿Qué archivos clave existen en el proyecto y para qué sirven?

¿Para qué sirve el archivo package.json?

Es esencial conocer el contenido del package.json para manejar correctamente tu proyecto:

• Main: Indica el fichero inicial que ejecutará Expo, que no debes modificar manualmente.
• Scripts: Son comandos específicos que utilizarás durante el desarrollo, como yarn start, yarn android o yarn ios.
• Dependencias: Aquí verás todas las librerías instaladas, con sus versiones correspondientes. Expo actualiza esta sección automáticamente al instalar nuevas dependencias.

¿Qué otras configuraciones importantes necesitas controlar?

• app.json: Es crucial, ya que allí configuras características específicas para Android y iOS. Puedes personalizar el nombre, versión, iconos, colores o modo de visualización de tus aplicaciones.
• babel.config.js: Aunque es importante conocerlo, en general no necesitarás modificarlo manualmente si trabajas con opciones básicas ofrecidas por Expo.

¿Cómo funciona el archivo app.js en React Native?

El fichero app.js es la entrada principal de la aplicación React Native:

• Siempre inicia ejecutando este archivo.
• Necesitas importar React y componentes específicos desde React Native y Expo.
• Usa componentes específicos, por ejemplo, el componente Text para renderizar correctamente texto en los dispositivos móviles y evitar errores.
• Toda pantalla requiere un componente de vista (View o ScrollView) como base para contener los elementos, estableciendo así la estructura estándar del proyecto.

¿Cómo instalar y manejar dependencias adicionales?

Para optimizar la construcción de tu aplicación, puedes agregar más librerías externas mediante el comando de consola:

yarn add nombre-de-la-dependencia

Expo gestionará automáticamente estas nuevas dependencias, mostrándolas claramente en tu archivo package.json y en la carpeta node_modules, manteniendo todo ordenado y eficiente.

Te invito a compartir tus dudas o experiencias en los comentarios para seguir enriqueciendo el aprendizaje en el desarrollo de aplicaciones multiplataforma con React Native y Expo.