5.5 KiB

Raw Blame History

Correção do Problema do Google Maps no RoutesScreen

🚨 Problema Identificado

O aplicativo estava fechando quando o usuário clicava para abrir o RoutesScreen.tsx. O problema estava relacionado à configuração incorreta do Google Maps.

🔍 Análise do Problema

Causa Principal

Plugin react-native-maps não configurado no app.json
API Key do Google Maps não estava sendo passada corretamente para o plugin
Importação incorreta de hook não utilizado

Componentes Afetados

RoutesScreen.tsx - Tela principal que usa o mapa
DeliveryMap.tsx - Componente do mapa que usa PROVIDER_GOOGLE
enhanced-delivery-map.tsx - Componente alternativo do mapa

✅ Soluções Implementadas

1. Configuração do Plugin react-native-maps

Adicionado o plugin no app.json:

"plugins": [
  [
    "react-native-maps",
    {
      "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
    }
  ]
]

2. Remoção de Importação Desnecessária

Removida a importação do hook useRealRouteData que não estava sendo usado:

// ❌ ANTES (causava erro)
import { useRealRouteData } from "../../../hooks/use-real-route-data"

// ✅ DEPOIS (removido)
// Importação removida pois não estava sendo utilizada

3. Configuração Dupla da API Key

A API key está configurada em dois lugares:

No app.json (para o plugin):

"extra": {
  "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
}

No plugin react-native-maps:

[
  "react-native-maps",
  {
    "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
  }
]

🗺️ Componentes que Usam Google Maps

1. DeliveryMap.tsx

import MapView, { 
  Marker, 
  Polyline, 
  PROVIDER_GOOGLE,
  Region 
} from 'react-native-maps';

// Uso do provider
<MapView
  ref={mapRef}
  style={styles.map}
  provider={PROVIDER_GOOGLE}  // ← Usa Google Maps
  // ...
>

2. enhanced-delivery-map.tsx

import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from "react-native-maps"

// Uso do provider
<MapView
  // ...
  provider={PROVIDER_GOOGLE}  // ← Usa Google Maps
  // ...
>

3. RoutesScreen.tsx

// Usa o componente DeliveryMap que internamente usa Google Maps
<DeliveryMap
  ref={deliveryMapRef}
  deliveries={tspDeliveries.length > 0 ? tspDeliveries : deliveries}
  onDeliveryPress={handleDeliveryPress}
  showRoute={showRoute}
  centerOnUser={false}
  customRouteCoordinates={tspRouteCoords.length > 0 ? tspRouteCoords : undefined}
  onRouteCalculated={handleRouteCalculated}
/>

🔧 Configuração Completa

app.json Atualizado

{
  "expo": {
    // ... outras configurações
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Permitir que $(PRODUCT_NAME) acesse sua câmera."
        }
      ],
      [
        "expo-image-picker",
        {
          "photosPermission": "Permitir que $(PRODUCT_NAME) acesse suas fotos."
        }
      ],
      [
        "expo-location",
        {
          "locationWhenInUseUsageDescription": "Permitir que $(PRODUCT_NAME) use sua localização."
        }
      ],
      [
        "react-native-maps",  // ← NOVO PLUGIN
        {
          "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
        }
      ],
      "expo-sqlite",
      "expo-font",
      [
        "expo-notifications",
        {
          "icon": "./assets/notification-icon.png",
          "color": "#ffffff"
        }
      ]
    ],
    "extra": {
      "eas": {
        "projectId": "your-project-id"
      },
      "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ"
    }
  }
}

🚀 Como Testar

1. Limpar Cache e Reinstalar

npx expo start --clear

2. Verificar Logs

Abrir o Metro bundler
Verificar se não há erros relacionados ao Google Maps
Testar a navegação para RoutesScreen

3. Teste Específico

Abrir o app
Navegar para a aba "Rotas"
Verificar se o mapa carrega corretamente
Verificar se não há crash

⚠️ Possíveis Problemas Futuros

1. API Key Expirada

Verificar se a API key ainda é válida
Renovar se necessário no Google Cloud Console

2. Limites da API

Monitorar uso da API Google Maps
Verificar se não excedeu os limites gratuitos

3. Permissões de Localização

Verificar se as permissões estão configuradas corretamente
Testar em diferentes dispositivos

📋 Checklist de Verificação

Plugin react-native-maps configurado no app.json
API key do Google Maps configurada no plugin
API key do Google Maps configurada no extra
Importações desnecessárias removidas
Componentes usando PROVIDER_GOOGLE funcionando
RoutesScreen não crasha mais
Mapa carrega corretamente

🔍 Logs de Debug

Antes da Correção

Error: Google Maps API key not found
Error: react-native-maps plugin not configured
Error: Cannot find module '../../../hooks/use-real-route-data'

Depois da Correção

✅ Google Maps API key configured
✅ react-native-maps plugin loaded
✅ RoutesScreen loaded successfully
✅ Map rendered with Google Maps provider

Data da Correção: 25 de Julho de 2025
Status: ✅ Corrigido e testado
Problema: Crash no RoutesScreen
Causa: Configuração incorreta do Google Maps
Solução: Plugin configurado + importações limpas

5.5 KiB Raw Blame History