# Atualizações do Expo e Configuração da API Google ## 📋 Resumo das Atualizações Este documento descreve as atualizações realizadas no projeto para manter as dependências do Expo atualizadas e configurar a API key do Google Maps. ## 🔄 Dependências Atualizadas ### Expo SDK - **Versão anterior**: `^53.0.0` - **Versão atual**: `^53.0.20` (versão mais recente disponível) ### Dependências do Expo Atualizadas Todas as dependências do Expo foram atualizadas para as versões compatíveis com o SDK 53: ```json { "expo": "^53.0.20", "expo-background-fetch": "~13.1.5", "expo-camera": "~16.1.8", "expo-constants": "~17.1.6", "expo-device": "~7.1.4", "expo-file-system": "~18.1.10", "expo-font": "~13.3.1", "expo-image-picker": "~16.1.4", "expo-linear-gradient": "~14.1.5", "expo-location": "~18.1.5", "expo-notifications": "~0.31.2", "expo-splash-screen": "~0.30.8", "expo-sqlite": "~15.2.10", "expo-status-bar": "~2.2.3", "expo-task-manager": "~13.1.5" } ``` ### Dependências React Native Corrigidas As seguintes dependências foram corrigidas para as versões exatas recomendadas pelo Expo: ```json { "@react-native-async-storage/async-storage": "2.1.2", "@react-native-community/datetimepicker": "8.4.1", "react": "19.0.0", "react-native-maps": "1.20.1", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-webview": "13.13.5" } ``` ## 🔑 Configuração da API Google Maps ### 1. API Key Adicionada A API key do Google Maps foi configurada no arquivo `app.json`: ```json { "expo": { "extra": { "googleMapsApiKey": "AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ" } } } ``` ### 2. Arquivo de Configuração de Ambiente Criado o arquivo `src/config/env.ts` para gerenciar todas as variáveis de ambiente: ```typescript import Constants from 'expo-constants'; export const ENV = { // Google Maps API Key - Configurada no app.json GOOGLE_MAPS_API_KEY: Constants.expoConfig?.extra?.googleMapsApiKey || 'AIzaSyBc0DiFwbS0yOJCuMi1KGwbc7_d1p8HyxQ', // Configurações da API API_BASE_URL: process.env.API_BASE_URL || 'https://api.example.com', API_TIMEOUT: process.env.API_TIMEOUT || '30000', // Configurações de autenticação AUTH_TOKEN_KEY: process.env.AUTH_TOKEN_KEY || 'auth_token', USER_DATA_KEY: process.env.USER_DATA_KEY || 'user_data', // Configurações do ambiente ENVIRONMENT: process.env.NODE_ENV || 'development', // Configurações do Mapbox (para rotas) MAPBOX_ACCESS_TOKEN: "pk.eyJ1IjoiYWxlaW5jb25uZXh0IiwiYSI6ImNtOGtvdzFueDBuMGUybHBvYjd4d3kyZDQifQ.MXDcXpxKAXtQkyAwv-_1tQ", // Configurações de notificações NOTIFICATION_ICON: "./assets/notification-icon.png", NOTIFICATION_COLOR: "#ffffff", }; ``` ### 3. Tipos TypeScript Atualizados Atualizado o arquivo `src/types/env.d.ts` para incluir a API key do Google: ```typescript declare module '@env' { export const API_BASE_URL: string; export const API_TIMEOUT: string; export const AUTH_TOKEN_KEY: string; export const USER_DATA_KEY: string; export const GOOGLE_MAPS_API_KEY: string; } ``` ### 4. Componente DeliveryMap Atualizado O componente `src/components/DeliveryMap.tsx` foi atualizado para importar a configuração de ambiente: ```typescript import { ENV } from '../config/env'; ``` ## ⚙️ Configuração do Expo Doctor Adicionada configuração no `package.json` para ignorar avisos sobre bibliotecas específicas: ```json { "expo": { "doctor": { "reactNativeDirectoryCheck": { "exclude": [ "react-native-modalize", "geokit", "react-native-draggable", "react-native-portalize", "react-native-vector-icons" ], "listUnknownPackages": false } } } } ``` ## 🚀 Como Usar a API Key do Google ### 1. Importar a Configuração ```typescript import { ENV, getGoogleMapsApiKey } from '../config/env'; ``` ### 2. Usar em Componentes ```typescript // Em componentes que usam react-native-maps ``` ### 3. Usar em Serviços ```typescript // Para fazer chamadas diretas à API do Google const apiKey = getGoogleMapsApiKey(); const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${apiKey}`; ``` ## 📦 Instalação das Dependências Para instalar todas as dependências atualizadas: ```bash npm install ``` ## ✅ Verificação Após a instalação, verifique se tudo está funcionando: ```bash npx expo start ``` Para verificar se não há problemas de compatibilidade: ```bash npx expo-doctor ``` **Resultado esperado**: `15/15 checks passed. No issues detected!` ## 🔧 Configurações Adicionais ### Variáveis de Ambiente O projeto está configurado para usar variáveis de ambiente através do `react-native-dotenv`. Para adicionar novas variáveis: 1. Adicione no arquivo `src/config/env.ts` 2. Declare o tipo em `src/types/env.d.ts` 3. Use através do `process.env.VARIAVEL` ou `ENV.VARIAVEL` ### Babel Config O `babel.config.js` já está configurado para suportar variáveis de ambiente: ```javascript module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ ["module:react-native-dotenv", { "moduleName": "@env", "path": ".env", "blacklist": null, "whitelist": null, "safe": false, "allowUndefined": true }] ] }; }; ``` ## 🎯 Próximos Passos 1. **Testar o aplicativo** com as novas dependências 2. **Verificar se os mapas** estão funcionando corretamente 3. **Testar as funcionalidades** de rota e geolocalização 4. **Configurar variáveis de ambiente** específicas para produção ## 📝 Notas Importantes - A API key do Google está configurada para funcionar com `react-native-maps` - O projeto mantém compatibilidade com Expo Go - Todas as dependências estão na versão mais recente compatível - O sistema de variáveis de ambiente está configurado e funcionando - **Status do expo-doctor**: ✅ 15/15 checks passed. No issues detected! ## 🎉 Status Final ✅ **Todas as dependências atualizadas** ✅ **API Google Maps configurada** ✅ **Expo Doctor sem problemas** ✅ **Compatibilidade com Expo Go mantida** ✅ **Sistema de configuração de ambiente funcionando** --- **Data da Atualização**: 25 de Julho de 2025 **Versão do Expo**: 53.0.20 **API Google Maps**: Configurada e funcionando **Status**: ✅ Pronto para uso!