Plantilla Expo React Native Todo Terreno

Una plantilla personalizada de Expo + React Native en JavaScript preparada para crear aplicaciones Android, iOS y web con animaciones, archivos, imágenes, audio, PDF, Excel, Supabase, Gemini y envío de correos desde un backend.

Manual de uso

Crear un proyecto nuevo con la plantilla

npx create-expo-app@latest MiNuevaApp --template plantilla-expo-todo-terreno

Después entra a la carpeta e inicia Expo:

cd MiNuevaApp
npm start

También puedes iniciar una plataforma directamente:

npm run web
npm run android
npm run ios

Importante: las claves privadas de Supabase, Gemini y Resend deben guardarse en variables de entorno. No publiques archivos .env ni coloques claves secretas directamente en el código de la aplicación.

¿Para qué sirve cada package?

Base de Expo y React Native

| Package | Función | |---|---| | expo | Framework principal para desarrollar y ejecutar la aplicación en Android, iOS y web. | | react | Biblioteca para crear componentes y manejar el estado de la interfaz. | | react-dom | Renderiza los componentes React cuando la aplicación corre en navegador. | | react-native | Componentes y APIs fundamentales de React Native. | | react-native-web | Traduce componentes de React Native para que funcionen en la web. | | @expo/metro-runtime | Integración de Metro y su runtime para proyectos Expo, especialmente en web. | | babel-preset-expo | Configuración de Babel recomendada por Expo. | | expo-status-bar | Permite controlar la barra de estado del dispositivo. | | expo-asset | Carga y administra imágenes, fuentes y otros recursos incluidos en la app. | | @expo/log-box | Gestiona advertencias y errores mostrados durante el desarrollo. | | @expo/dom-webview | Permite integrar contenido DOM/web dentro de experiencias compatibles de Expo. |

Archivos, imágenes, audio y documentos

| Package | Función | |---|---| | expo-document-picker | Permite seleccionar documentos almacenados en el dispositivo. | | expo-file-system | Lee, escribe, copia, descarga y administra archivos locales. | | expo-image-picker | Selecciona imágenes desde la galería o la cámara. | | expo-image-manipulator | Recorta, rota, redimensiona y comprime imágenes. | | expo-audio | Reproduce, administra y graba audio con las APIs modernas de Expo. | | expo-font | Carga fuentes personalizadas. | | expo-print | Genera contenido imprimible y archivos PDF a partir de HTML. | | expo-sharing | Comparte archivos mediante el menú nativo del dispositivo. | | pdf-lib | Crea, combina, modifica y rellena documentos PDF con JavaScript. | | xlsx | Lee y genera archivos de Excel en formato XLSX. |

Interfaz, iconos y animaciones

| Package | Función | |---|---| | lucide-react-native | Colección de iconos modernos para React Native. | | react-native-svg | Renderiza gráficos e iconos SVG. | | react-native-gesture-handler | Maneja gestos táctiles complejos y fluidos. | | react-native-reanimated | Motor de animaciones de alto rendimiento para React Native. | | react-native-worklets | Ejecuta worklets usados por animaciones y procesamiento fuera del hilo principal. | | moti | Simplifica la creación de animaciones declarativas sobre Reanimated. | | motion | Animaciones avanzadas para la versión web de la aplicación. |

Backend, seguridad e inteligencia artificial

| Package | Función | |---|---| | @supabase/supabase-js | Conecta la app con Supabase: base de datos, autenticación, almacenamiento y funciones. | | @google/generative-ai | Permite consumir modelos generativos de Google Gemini. | | bcryptjs | Genera y verifica hashes de contraseñas usando JavaScript. | | resend | Envía correos electrónicos desde un servidor o función backend. No debe usarse con una API key secreta directamente en el frontend. | | tslib | Incluye helpers reutilizables requeridos por algunos paquetes compilados con TypeScript. |

Herramientas de desarrollo

| Package | Función | |---|---| | @babel/core | Transforma código JavaScript moderno mediante Babel. | | @react-native/metro-config | Proporciona la configuración base de Metro para React Native. | | babel-plugin-module-resolver | Crea alias de importación para evitar rutas largas como ../../../components. | | react-refresh | Actualiza componentes durante el desarrollo sin perder completamente su estado. |

Overrides y resolutions

El package.json fija versiones modernas de glob, rimraf, inflight y uuid para reducir conflictos con dependencias indirectas. overrides se aplica con npm y resolutions puede ser utilizado por otros gestores como Yarn.

Scripts incluidos

| Comando | Acción | |---|---| | npm start | Abre el servidor de desarrollo de Expo. | | npm run web | Inicia la aplicación en el navegador. | | npm run android | Abre la aplicación en Android. | | npm run ios | Abre la aplicación en iOS, disponible desde macOS. |

Publicar una actualización de la plantilla

Comprueba primero la cuenta activa y los archivos que serán publicados:

npm whoami
npm pack --dry-run

Incrementa la versión y publica:

npm version patch
npm publish

Para una actualización con funciones nuevas puedes usar npm version minor; para cambios incompatibles, npm version major.

Creada por Gerardo García como base reutilizable para proyectos Expo React Native multiplataforma.