expo-realtime-maps-toolkit
Advanced tools
A clean, fast, and maintainable Expo package for real-time maps navigation with Google Places, HERE Routing, and voice guidance
The easiest way to add professional navigation to your Expo app. One command install, zero configuration, production-ready.
🎯 Perfect for: Delivery apps, ride-sharing, field services, travel apps, and any app needing turn-by-turn navigation.
| Feature | Description |
|---|---|
| 🗺️ Google Places Search | Autocomplete, search, and place details |
| 🧭 HERE Navigation | Real-time routing with turn-by-turn directions |
| 📍 Live Location Tracking | GPS tracking with automatic rerouting |
| 🔊 Voice Guidance | Spoken directions in multiple languages |
| 🎨 Custom UI Components | Ready-to-use navigation panels |
| ⚡ Performance Optimized | Debounced API calls, efficient rendering |
npm install expo-realtime-maps-toolkit
That's it! All required dependencies are automatically installed.
Only install if you need advanced map rendering:
# Optional: Advanced map features (most apps won't need this)
npx expo install expo-maps
Option A: Using .env file (Recommended)
Create a .env file in your project root:
# Google Maps API Configuration
GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY_HERE
# HERE API Configuration
HERE_API_KEY=YOUR_HERE_API_KEY_HERE
# Optional settings
DEFAULT_LANGUAGE=fr-FR
DEFAULT_TRANSPORT_MODE=car
ENABLE_VOICE_GUIDANCE=true
Option B: Update app.json directly
{
"expo": {
"plugins": [
[
"expo-maps",
{
"googleMapsApiKey": "YOUR_GOOGLE_MAPS_API_KEY"
}
]
],
"ios": {
"config": {
"googleMapsApiKey": "YOUR_GOOGLE_MAPS_API_KEY"
}
},
"android": {
"config": {
"googleMaps": {
"apiKey": "YOUR_GOOGLE_MAPS_API_KEY"
}
}
}
}
}
import React from 'react';
import { View } from 'react-native';
import MapView, { Polyline, Marker } from 'expo-maps';
import { useNavigation, NavigationPanel, Coordinates } from 'expo-realtime-maps-toolkit';
const PARIS: Coordinates = { latitude: 48.8566, longitude: 2.3522 };
const EIFFEL: Coordinates = { latitude: 48.8584, longitude: 2.2945 };
export default function App() {
const navigation = useNavigation({
from: PARIS,
to: EIFFEL,
googleMapsApiKey: 'YOUR_GOOGLE_API_KEY',
hereApiKey: 'YOUR_HERE_API_KEY',
language: 'fr-FR',
transportMode: 'car',
enableVoiceGuidance: true
});
return (
<View style={{ flex: 1 }}>
<MapView
provider="google"
style={{ flex: 1 }}
region={navigation.mapRegion}
showsUserLocation
>
{navigation.routeCoords.length > 0 && (
<Polyline
coordinates={navigation.routeCoords}
strokeColor="#007AFF"
strokeWidth={4}
/>
)}
<Marker coordinate={PARIS} pinColor="green" />
<Marker coordinate={EIFFEL} pinColor="red" />
</MapView>
<NavigationPanel
navigationState={navigation.navigationState}
instructions={navigation.instructions}
error={navigation.error}
isLoading={navigation.isLoading}
onStart={navigation.startNavigation}
onStop={navigation.stopNavigation}
onPause={navigation.pauseNavigation}
onResume={navigation.resumeNavigation}
/>
</View>
);
}
Main hook that combines all navigation functionality:
const navigation = useNavigation({
from: { latitude: 48.8566, longitude: 2.3522 },
to: { latitude: 48.8584, longitude: 2.2945 },
googleMapsApiKey: 'YOUR_KEY',
hereApiKey: 'YOUR_KEY',
language: 'fr-FR', // optional
transportMode: 'car', // 'car' | 'pedestrian' | 'bicycle'
enableVoiceGuidance: true, // optional
routingMode: 'fast' // 'fast' | 'short' | 'balanced'
});
// Google Places search
const places = useGooglePlaces({ apiKey: 'YOUR_KEY' });
await places.searchPlaces('Paris restaurant');
// Geocoding
const geocoding = useGeocoding({ apiKey: 'YOUR_KEY' });
const coords = await geocoding.geocode('1 Rue de Rivoli, Paris');
const address = await geocoding.reverseGeocode({ lat: 48.8566, lng: 2.3522 });
// HERE Routing
const routing = useHereRouting({ apiKey: 'YOUR_KEY' });
const route = await routing.calculateRoute(from, to);
Ready-to-use navigation control panel:
<NavigationPanel
navigationState={navigationState}
instructions={instructions}
error={error}
isLoading={isLoading}
onStart={() => startNavigation()}
onStop={() => stopNavigation()}
onPause={() => pauseNavigation()}
onResume={() => resumeNavigation()}
/>
car - Driving routespedestrian - Walking routesbicycle - Cycling routesfast - Fastest routeshort - Shortest distancebalanced - Balance of time/distancefr-FR - Frenchen-US - EnglishThe package provides comprehensive error handling:
if (navigation.error) {
console.log('Navigation error:', navigation.error);
// Handle specific errors:
// - 'API key is required'
// - 'Location permission denied'
// - 'No route found'
// - 'API quota exceeded'
}
API Key Security: Never hardcode API keys. Use environment variables or secure storage.
Debounced Search: Places search is automatically debounced (300ms) to reduce API calls.
Location Permissions: Always request location permissions before starting navigation.
Quota Monitoring: Monitor your API usage in Google Cloud Console and HERE portal.
Error Recovery: Implement proper error handling and retry mechanisms.
✅ Full compatibility - Uses only REST APIs and Expo modules, no native SDKs required.
"API key is required"
"Location permission denied"
"No route found"
Maps not loading
MIT License - see LICENSE file for details.
const deliveryNavigation = useNavigation({
from: currentLocation,
to: customerAddress,
googleMapsApiKey: API_KEY,
hereApiKey: HERE_KEY,
transportMode: 'car',
enableVoiceGuidance: true
});
const walkingNavigation = useNavigation({
from: currentLocation,
to: destination,
googleMapsApiKey: API_KEY,
hereApiKey: HERE_KEY,
transportMode: 'pedestrian',
language: 'en-US'
});
const places = useGooglePlaces({ apiKey: API_KEY });
const [selectedPlace, setSelectedPlace] = useState(null);
// Search for places
await places.searchPlaces('restaurants near me');
// Navigate to selected place
const navigation = useNavigation({
from: currentLocation,
to: selectedPlace.geometry.location,
googleMapsApiKey: API_KEY,
hereApiKey: HERE_KEY
});
| Feature | This Package | Google Maps SDK | MapBox | React Native Maps |
|---|---|---|---|---|
| Easy Installation | ✅ 1 command | ❌ Complex setup | ❌ Native SDKs | ❌ Many dependencies |
| Expo Compatible | ✅ Full support | ❌ Limited | ❌ Ejection required | ✅ Partial |
| Voice Navigation | ✅ Built-in | ❌ Separate setup | ✅ Built-in | ❌ Manual |
| TypeScript | ✅ Complete | ⚠️ Partial | ✅ Good | ⚠️ Community |
| Bundle Size | ✅ ~90KB | ❌ ~2MB+ | ❌ ~1.5MB+ | ✅ ~200KB |
| Free Tier | ✅ Generous | ⚠️ Limited | ⚠️ Limited | N/A |
// Before: Complex Google Maps setup
import GoogleMaps from 'google-maps-sdk';
// ... hundreds of lines of setup
// After: Simple hook
const navigation = useNavigation({ /* config */ });
// Before: Manual route calculation
import MapView from 'react-native-maps';
// ... manual API calls, state management
// After: Everything included
import { useNavigation, NavigationPanel } from 'expo-realtime-maps-toolkit';
<NavigationPanel
navigationState={navigationState}
instructions={instructions}
customStyles={{
container: { backgroundColor: '#1a1a1a', borderRadius: 20 },
button: { backgroundColor: '#007AFF' },
text: { color: '#FFFFFF' }
}}
theme="dark"
/>
<NavigationPanel
navigationState={navigationState}
instructions={instructions}
tailwindClasses={{
container: 'bg-gray-900 rounded-xl shadow-2xl',
button: 'bg-blue-600 hover:bg-blue-700',
text: 'text-white font-semibold'
}}
/>
Need help? We've got you covered:
Installation Issues?
npm cache clean --force
rm -rf node_modules package-lock.json
npm install expo-realtime-maps-toolkit
API Key Problems?
Permission Errors?
Made with ❤️ by AMBROISE
FAQs
A clean, fast, and maintainable Expo package for real-time maps navigation with Google Places, HERE Routing, and voice guidance
The npm package expo-realtime-maps-toolkit receives a total of 0 weekly downloads. As such, expo-realtime-maps-toolkit popularity was classified as not popular.
We found that expo-realtime-maps-toolkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.