FederalDriver · Expo SDK 57 + EAS + Firebase + Leaflet + Google Maps

1

Pré-requisitos do Sistema

Node.js · Git · Conta Expo · Conta Firebase · Google Cloud

Verificar versão do Node.js Requer Node.js 20.18.3 ou superior. Recomendado: LTS 22.

                    PS>
                    node --version
                

Ajustar permissões do PowerShell Execute como Administrador. Libera scripts apenas nesta sessão.

                    PS>
                    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
                

Crie contas gratuitas em expo.dev, console.firebase.google.com e console.cloud.google.com (para Google Maps Platform).

2

Criar o Projeto `FederalDriver`

Expo SDK 57 · TypeScript · tudo dentro da pasta

Criar projeto FederalDriver Gera a pasta FederalDriver com todo o projeto React Native + TypeScript dentro.

                    PS>
                    npx create-expo-app@latest FederalDriver --template default@sdk-57
                

Entrar na pasta FederalDriver Todos os comandos seguintes rodam DENTRO de FederalDriver.

                    PS>
                    cd FederalDriver
                

3

Instalar o EAS CLI

Expo Application Services · build na nuvem

Instalar EAS CLI globalmente Necessário para compilar, assinar e enviar builds iOS/Android.

                    PS>
                    npm install --global eas-cli
                

Verificar instalação do EAS Confirma que o EAS CLI foi instalado corretamente.

                    PS>
                    eas --version
                

4

Login e Configuração do EAS

Autenticação · eas.json · credenciais

Fazer login na conta Expo Abre o navegador para autenticar. Use a conta criada em expo.dev.

                    PS>
                    eas login
                

Configurar o projeto para EAS Cria o eas.json dentro de FederalDriver/ com perfis de build.

                    PS>
                    eas build:configure
                

Para iOS, você precisará de uma conta Apple Developer ($99/ano). Para Android, conta Google Play Console ($25 único).

5

Bibliotecas Base do Projeto

Tudo instalado dentro de FederalDriver/node_modules

WebView + Clipboard + Ícones + SafeArea Combo completo para renderizar HTML5 e copiar comandos.

                    PS>
                    npx expo install react-native-webview expo-clipboard @expo/vector-icons react-native-safe-area-context
                

Navegação + Animações + StatusBar React Navigation e Reanimated para UI premium fluida.

                    PS>
                    npx expo install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-gesture-handler react-native-reanimated expo-status-bar
                

Fontes customizadas + Haptics (feedback tátil) Inter/Poppins via expo-font e vibração sutil no copiar.

                    PS>
                    npx expo install expo-font expo-haptics expo-splash-screen
                

Verificar e corrigir dependências Roda o check de versões compatíveis com o SDK 57.

                    PS>
                    npx expo install --fix
                

6

Firebase SDK

Firebase JS SDK · React Native Firebase · Configuração nativa

O Expo suporta duas abordagens oficiais para Firebase: Firebase JS SDK (JavaScript puro, funciona no Expo Go) e React Native Firebase (SDK nativo, requer development build). Escolha uma delas conforme a necessidade do FederalDriver.

Opção A — Firebase JS SDK (Expo Go compatível)

Instalar Firebase JS SDK Requer firebase@12.0.0 ou superior. Versões anteriores causam erros de resolução de módulos ES.

                    PS>
                    npx expo install firebase
                

Opção B — React Native Firebase (SDK nativo · requer Development Build)

React Native Firebase não funciona no Expo Go — usa código nativo que não está compilado no app padrão. É obrigatório criar um Development Build (Passo 7).

Instalar módulo base (app) Obrigatório antes de qualquer outro serviço Firebase (Auth, Firestore, Storage, etc.).

                    PS>
                    npx expo install @react-native-firebase/app
                

Instalar Authentication + Firestore Módulos mais usados. Instale também Crashlytics ou Analytics se precisar.

                    PS>
                    npx expo install @react-native-firebase/auth @react-native-firebase/firestore
                

Instalar Crashlytics + Analytics (opcional) Somente se o FederalDriver precisar de relatórios de falhas e analytics nativos.

                    PS>
                    npx expo install @react-native-firebase/crashlytics @react-native-firebase/analytics
                

Configuração nativa obrigatória: baixe google-services.json (Android) e GoogleService-Info.plist (iOS) no Console do Firebase e referencie os caminhos no app.json.

7

Desenvolvimento Local

Expo Go · Dev Build · Live reload

Iniciar servidor de desenvolvimento Escaneie o QR Code com o app Expo Go para testar (use apenas se estiver com Firebase JS SDK).

                    PS>
                    npx expo start
                

Iniciar limpando cache Use se encontrar bugs estranhos após instalar novas libs.

                    PS>
                    npx expo start --clear
                

Criar Development Build (EAS) Obrigatório se estiver usando React Native Firebase ou expo-maps. Build de dev com as libs nativas.

                    PS>
                    eas build --profile development --platform all
                

8

Builds de Produção (iOS + Android)

Compilação na nuvem EAS · projeto FederalDriver

Build Android (AAB para Play Store) Gera o arquivo .aab assinado do FederalDriver.

                    PS>
                    eas build --platform android --profile production
                

Build iOS (IPA para App Store) Gera o .ipa assinado. Requer Apple Developer Account.

                    PS>
                    eas build --platform ios --profile production
                

Build Android APK (para testes diretos) Gera .apk instalável fora da Play Store.

                    PS>
                    eas build --platform android --profile preview
                

Build iOS + Android simultaneamente Dispara as duas compilações na nuvem em paralelo.

                    PS>
                    eas build --platform all --profile production
                

9

Enviar para as Lojas

App Store · Google Play

Enviar para a Google Play Store Faz upload do AAB do FederalDriver para o track de produção.

                    PS>
                    eas submit --platform android
                

Enviar para a App Store (iOS) Faz upload para o App Store Connect.

                    PS>
                    eas submit --platform ios
                

10

Leaflet SDK para Mapas, Rotas e Entregas

OpenStreetMap · Leaflet Routing Machine · Clustering · Geolocalização

Leaflet é uma biblioteca de mapas open-source baseada em OpenStreetMap. No Expo, ela é renderizada dentro de um WebView — não é um componente nativo. Para um app de transporte de passageiros e entregas, você precisará de: mapas interativos, marcadores customizados (motorista, passageiro, pontos de entrega), rotas entre dois pontos e clustering para muitos marcadores.

10.1 — Opção Completa: `expo-leaflet-navigation-map`

Recomendado para começar. Este pacote já integra LeafletJS + OpenStreetMap + Leaflet Routing Machine em um único componente pronto para Expo. Desenha rotas entre dois pontos, exibe marcadores e painel de direções.

Instalar expo-leaflet-navigation-map Inclui LeafletJS, OpenStreetMap, Leaflet Routing Machine e WebView automaticamente.

                    PS>
                    npx expo install expo-leaflet-navigation-map
                

10.2 — Opção com Controle Total: `react-native-maps-leaflet`

Permite controle total sobre marcadores, popups, tile layers e eventos. Não inclui routing machine nativo — para rotas, adicione leaflet-routing-machine separadamente ou use a opção 10.1.

Instalar react-native-maps-leaflet + dependências Instala o componente, WebView, React-Leaflet e Leaflet core. Versões fixas compatíveis entre si.

                    PS>
                    npm install @netizen-teknologi/react-native-maps-leaflet; npx expo install react-native-webview; npm install react-leaflet@4.2.1 leaflet@1.9.4
                

10.3 — Alternativa: `react-native-leaflet-view`

Componente estável e amplamente usado. No Expo, requer expo-asset e expo-file-system para carregar o HTML do Leaflet a partir do bundle. Suporta marcadores, polígonos, polilinhas e formas.

Instalar react-native-leaflet-view + dependências Expo Inclui WebView, Asset e FileSystem — necessários para carregar o HTML do Leaflet no Expo.

                    PS>
                    npm install react-native-leaflet-view; npx expo install react-native-webview expo-asset expo-file-system
                

10.4 — Rotas com Leaflet Routing Machine (para opções 10.2 e 10.3)

Adiciona cálculo e desenho de rotas entre dois pontos usando dados gratuitos do OpenStreetMap. Para instruções de navegação em texto, instale também osrm-text-instructions.

Instalar Leaflet Routing Machine Plugin de rotas para Leaflet. Use se estiver com react-native-maps-leaflet ou react-native-leaflet-view.

                    PS>
                    npm install leaflet-routing-machine
                

Instalar instruções de navegação (opcional) Adiciona textos de instrução (ex.: “vire à direita na Av. Paulista”) nas rotas.

                    PS>
                    npm install osrm-text-instructions
                

10.5 — Clustering de Marcadores (muitos pontos de entrega)

Para apps de entrega com dezenas ou centenas de pontos, o clustering agrupa marcadores próximos e melhora drasticamente a performance visual. Instale o plugin oficial leaflet.markercluster.

Instalar Leaflet.markercluster Plugin oficial de clustering. Requer Leaflet core (já instalado na opção 10.2).

                    PS>
                    npm install leaflet.markercluster
                

10.6 — Geolocalização do Motorista / Passageiro

Instalar expo-location Obtém latitude/longitude do dispositivo para exibir no mapa e calcular rotas.

                    PS>
                    npx expo install expo-location
                

Dica para transporte/entregas: combine expo-location para a posição do motorista, leaflet-routing-machine para a rota até o destino e leaflet.markercluster para agrupar vários pontos de entrega em uma única tela. Use react-native-maps-leaflet ou expo-leaflet-navigation-map para renderizar tudo dentro do Expo.

11

Google Maps Platform API

Mapas · Localização · Direções · Geocoding · Reverse Geocoding · Autocomplete

A Google Maps Platform oferece APIs nativas e serviços REST para todas as necessidades do FederalDriver. A chave de API é obtida no Google Cloud Console e deve ter as APIs específicas habilitadas: Maps SDK, Directions API, Geocoding API e Places API. Todas as bibliotecas abaixo são compatíveis com Expo SDK 57.

11.1 — Mapas Nativos: `expo-maps`

Recomendado para SDK 57. Usa Google Maps no Android e Apple Maps no iOS. Requer development build (não funciona no Expo Go). Configure a chave de API no app.json com expo.android.config.googleMaps.apiKey[reference:0].

Instalar expo-maps Mapas nativos com Google Maps (Android) e Apple Maps (iOS). Requer development build.

                    PS>
                    npx expo install expo-maps
                

11.2 — Alternativa Multiplataforma: `react-native-maps`

Permite usar Google Maps em ambas as plataformas (iOS e Android). É a base para as bibliotecas de direções e geocoding abaixo. Requer development build.[reference:1]

Instalar react-native-maps Mapas com Google Maps em iOS e Android. Requer configuração de API key e development build.

                    PS>
                    npx expo install react-native-maps
                

11.3 — Localização e Geocoding: `expo-location`

expo-location fornece geolocalização (getCurrentPositionAsync), geocoding (geocodeAsync: endereço → coordenadas) e reverse geocoding (reverseGeocodeAsync: coordenadas → endereço). Para usar o serviço do Google no reverse geocoding, passe { useGoogleMaps: true } como opção[reference:2].

Instalar expo-location Geolocalização, geocoding e reverse geocoding. Suporta Google Maps via opção no reverse geocode.

                    PS>
                    npx expo install expo-location
                

11.4 — Direções e Rotas: `react-native-maps-directions`

Desenha a rota entre dois pontos usando a Google Directions API e renderiza uma Polyline no MapView. Requer react-native-maps e uma chave de API com a Directions API habilitada[reference:3].

Instalar react-native-maps-directions Componente MapViewDirections para desenhar rotas no mapa usando Google Directions API.

                    PS>
                    npm install react-native-maps-directions
                

11.5 — Geocoding e Reverse Geocoding Alternativo: `react-native-geocoding`

Módulo dedicado que usa exclusivamente a Google Geocoding API. Oferece Geocoder.geocode(address) (endereço → coordenadas) e Geocoder.from(lat, lng) (coordenadas → endereço). Alternativa ao expo-location quando você quer controle total sobre a API do Google[reference:4].

Instalar react-native-geocoding Geocoding e reverse geocoding usando Google Geocoding API. Requer API key.

                    PS>
                    npm install react-native-geocoding
                

11.6 — Autocomplete de Locais: `react-native-google-places-autocomplete`

Componente de autocomplete para busca de endereços e locais usando a Google Places API. Perfeito para campos de origem/destino no FederalDriver[reference:5].

Instalar react-native-google-places-autocomplete Autocomplete de endereços e locais com Google Places API. Requer API key com Places API habilitada.

                    PS>
                    npx expo install react-native-google-places-autocomplete
                

Resumo do fluxo Google para o FederalDriver: use expo-location para obter a posição atual do motorista, react-native-google-places-autocomplete para o passageiro digitar origem/destino, react-native-maps-directions para desenhar a rota no react-native-maps, e react-native-geocoding (ou expo-location com useGoogleMaps: true) para converter coordenadas em endereços legíveis na confirmação da corrida/entrega.

📦

Referência de Dependências

Tudo instalado em FederalDriver/node_modules

react-native-webviewRenderiza HTML5 e mapas Leaflet dentro do app.

expo-clipboardCopiar texto para a área de transferência.

@expo/vector-iconsBiblioteca de ícones (Ionicons, Feather, etc).

react-native-safe-area-contextLida com notch, status bar e home indicator.

@react-navigation/nativeNavegação entre telas.

@react-navigation/native-stackStack nativo performático.

react-native-screensOtimização nativa de navegação.

react-native-gesture-handlerGestos nativos (swipe, pan, tap).

react-native-reanimatedAnimações fluidas a 60fps.

expo-status-barControla a status bar.

expo-fontCarrega fontes customizadas.

expo-hapticsFeedback tátil em botões.

expo-splash-screenControla a splash screen nativa.

firebaseFirebase JS SDK (Auth, Firestore, Storage, RTDB).

@react-native-firebase/appMódulo base do React Native Firebase (nativo).

@react-native-firebase/authAutenticação nativa Firebase.

@react-native-firebase/firestoreBanco de dados Firestore nativo.

@react-native-firebase/crashlyticsRelatórios de falhas nativos (opcional).

@react-native-firebase/analyticsAnalytics nativo (opcional).

expo-leaflet-navigation-mapLeaflet + OSM + Routing Machine em um único componente Expo.

@netizen-teknologi/react-native-maps-leafletMapas Leaflet interativos com marcadores, popups e tile layers.

react-leafletBindings React para Leaflet.

leafletBiblioteca core de mapas open-source (OpenStreetMap).

react-native-leaflet-viewComponente Leaflet via WebView para React Native/Expo.

leaflet-routing-machineCálculo e desenho de rotas entre dois pontos com OSM.

osrm-text-instructionsInstruções de navegação em texto para as rotas (opcional).

leaflet.markerclusterAgrupamento de marcadores para muitos pontos de entrega.

expo-locationGeolocalização, geocoding e reverse geocoding.

expo-assetCarrega o HTML do Leaflet no Expo.

expo-file-systemLeitura do arquivo HTML do Leaflet no Expo.

expo-mapsMapas nativos com Google Maps (Android) e Apple Maps (iOS).

react-native-mapsMapas com Google Maps em iOS e Android (multiplataforma).

expo-locationGeolocalização, geocoding e reverse geocoding (Google via opção).

react-native-maps-directionsDesenha rotas no mapa usando Google Directions API.

react-native-geocodingGeocoding e reverse geocoding com Google Geocoding API.

react-native-google-places-autocompleteAutocomplete de endereços e locais com Google Places API.

eas-cliCLI global para builds e submits.