Skip to content
RepoMovil

Configuración del Proyecto

Antes de instalar mapas, debemos limpiar nuestra casa. El template de Expo viene con herramientas que no usaremos.

1. El Gran Reset

Section titled “1. El Gran Reset”

Ejecuta este comando para dejar tu carpeta app/ lista para la batalla:

Terminal window
npm run reset-project
❌ Antes del reset
app/
├── (tabs)/
│   ├── index.tsx
│   ├── explore.tsx
│   └── _layout.tsx
├── +not-found.tsx
└── _layout.tsx
✅ Después del reset
app/
└── index.tsx (Limpio)

app-example/
└── (Respaldo del código demo)

2. Instalación de Herramientas

Section titled “2. Instalación de Herramientas”

Necesitamos tres pilares: el navegador (WebView), el motor de mapas (Leaflet) y el acceso al GPS.

Terminal window
# 1. El navegador interno
npx expo install react-native-webview


# 2. El motor de Mapas
npm install react-native-leaflet-view


# 3. Acceso al GPS
npx expo install expo-location

3. Configuración de Diseño (NativeWind v4)

Section titled “3. Configuración de Diseño (NativeWind v4)”

Utilizaremos la paleta Neon que define la identidad visual de RepoMovil.

tailwind.config.js

Section titled “tailwind.config.js”

Copia esta configuración para activar los colores corporativos:

module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        'neon-green': '#39FF14',
        'neon-cyan': '#00FFFF',
        'neon-pink': '#FF2D78',
        'neon-yellow': '#FFE600',
        'dark-base': '#000000',
        'dark-surface': '#0D0D0D',
      },
    },
  },
  plugins: [],
};

4. Verificación

Section titled “4. Verificación”

Si has seguido los pasos, al ejecutar npx expo start deberías ver el código QR sin errores rojos en la consola. ¡Estamos listos para construir la arquitectura!