Expo map#97
Conversation
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughTwo complete Expo/React Native example applications are added: expo_map showcases platform-specific map rendering using Apple Maps (iOS) and Google Maps (Android) with location navigation, while universal_app provides a tabs-based starter template with theming infrastructure, modal navigation, and reusable UI components. Both include Expo Router configuration, custom theme hooks, and interactive reset scripts. ChangesExpo Maps Example Application
Universal Expo Starter Template
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR adds two new Expo-based apps to the repository: a universal_app scaffolded with Expo Router and themed UI primitives, and an expo_map sample app demonstrating expo-maps usage (Apple Maps / Google Maps) with supporting configuration, hooks, and UI components.
Changes:
- Added a new
universal_appExpo Router project scaffold (theme, UI components, scripts, lint/TS config). - Added a new
expo_mapproject showcasingexpo-mapswith tab navigation and map interactions. - Introduced large static datasets under
expo_map(notablyLocationList.jsandFlavourList.json).
Reviewed changes
Copilot reviewed 57 out of 79 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| universal_app/tsconfig.json | Adds Expo/TypeScript configuration with strict mode and path aliases. |
| universal_app/scripts/reset-project.js | Adds a project reset utility script (move/delete starter directories). |
| universal_app/README.md | Adds template README with Expo Router/get-started instructions. |
| universal_app/package.json | Defines Expo Router app entry, scripts, and dependencies for universal_app. |
| universal_app/hooks/use-theme-color.ts | Adds theme color helper hook tied to light/dark palettes. |
| universal_app/hooks/use-color-scheme.web.ts | Adds web-specific hydration-safe color scheme hook. |
| universal_app/hooks/use-color-scheme.ts | Re-exports React Native useColorScheme for native platforms. |
| universal_app/eslint.config.js | Adds flat ESLint config for Expo. |
| universal_app/constants/theme.ts | Defines color palettes and platform font mappings. |
| universal_app/components/ui/icon-symbol.tsx | Adds non-iOS icon shim mapping SF Symbols names to Material icons. |
| universal_app/components/ui/icon-symbol.ios.tsx | Adds iOS SF Symbols implementation using expo-symbols. |
| universal_app/components/ui/collapsible.tsx | Adds collapsible UI component used in template screens. |
| universal_app/components/themed-view.tsx | Adds themed View wrapper using useThemeColor. |
| universal_app/components/themed-text.tsx | Adds themed Text wrapper with predefined typography variants. |
| universal_app/components/parallax-scroll-view.tsx | Adds parallax header scroll view component (reanimated-based). |
| universal_app/components/hello-wave.tsx | Adds waving hand animated element for the home screen. |
| universal_app/components/haptic-tab.tsx | Adds tab button wrapper providing iOS haptic feedback. |
| universal_app/components/external-link.tsx | Adds link wrapper that opens in-app browser on native. |
| universal_app/CLAUDE.md | Adds pointer file referencing AGENTS.md for agent guidance. |
| universal_app/app/modal.tsx | Adds example modal route/screen. |
| universal_app/app/(tabs)/index.tsx | Adds starter Home tab screen content. |
| universal_app/app/(tabs)/explore.tsx | Adds starter Explore tab screen content. |
| universal_app/app/(tabs)/_layout.tsx | Adds tab navigator layout via Expo Router. |
| universal_app/app/_layout.tsx | Adds root stack layout with theme provider + modal route. |
| universal_app/app.json | Adds Expo app configuration for universal_app (plugins, experiments). |
| universal_app/AGENTS.md | Adds short guidance note referencing versioned Expo docs. |
| universal_app/.gitignore | Adds standard Expo/React Native ignores (including app-example and native dirs). |
| universal_app/.claude/settings.json | Adds Claude plugin settings. |
| expo_map/tsconfig.json | Adds Expo/TypeScript configuration with strict mode and path aliases. |
| expo_map/scripts/reset-project.js | Adds a project reset utility script (same pattern as template). |
| expo_map/README.md | Adds extensive expo-maps usage documentation/examples. |
| expo_map/package.json | Defines Expo Router app entry, scripts, and dependencies for expo_map (incl. expo-maps). |
| expo_map/LocationList.js | Adds large static location dataset used by the map screen. |
| expo_map/hooks/useThemeColor.ts | Adds theme color helper hook tied to Colors constants. |
| expo_map/hooks/useColorScheme.web.ts | Adds web-specific hydration-safe color scheme hook. |
| expo_map/hooks/useColorScheme.ts | Re-exports React Native useColorScheme for native platforms. |
| expo_map/FlavourList.json | Adds large static dataset file (currently not referenced). |
| expo_map/eslint.config.js | Adds flat ESLint config for Expo. |
| expo_map/eas.json | Adds EAS build/submit configuration. |
| expo_map/constants/Colors.ts | Defines light/dark theme colors for expo_map. |
| expo_map/components/ui/TabBarBackground.tsx | Adds TabBar background shim for non-iOS platforms. |
| expo_map/components/ui/TabBarBackground.ios.tsx | Adds iOS blur tab bar background and overflow helper. |
| expo_map/components/ui/IconSymbol.tsx | Adds non-iOS icon shim mapping SF Symbols names to Material icons. |
| expo_map/components/ui/IconSymbol.ios.tsx | Adds iOS SF Symbols implementation using expo-symbols. |
| expo_map/components/ThemedView.tsx | Adds themed View wrapper using useThemeColor. |
| expo_map/components/ThemedText.tsx | Adds themed Text wrapper with predefined typography variants. |
| expo_map/components/ParallaxScrollView.tsx | Adds parallax header scroll view component with bottom-tab overflow handling. |
| expo_map/components/HelloWave.tsx | Adds waving hand animation using Reanimated shared values. |
| expo_map/components/HapticTab.tsx | Adds tab button wrapper providing iOS haptic feedback. |
| expo_map/components/ExternalLink.tsx | Adds link wrapper that opens in-app browser on native. |
| expo_map/components/Collapsible.tsx | Adds collapsible UI component used in Explore screen. |
| expo_map/app/+not-found.tsx | Adds Expo Router not-found screen. |
| expo_map/app/(tabs)/index.tsx | Implements the maps demo screen with Apple/Google maps, markers, polylines, and controls. |
| expo_map/app/(tabs)/explore.tsx | Adds starter Explore tab screen content for expo_map. |
| expo_map/app/(tabs)/_layout.tsx | Adds tab navigator layout with platform-specific tab bar background styling. |
| expo_map/app/_layout.tsx | Adds root stack layout with theme provider and font loading. |
| expo_map/app.json | Adds Expo app configuration for expo_map (incl. expo-maps plugin config). |
| expo_map/.gitignore | Adds standard Expo/React Native ignores. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function handleChangeWithRef(direction: "next" | "prev") { | ||
| const newIndex = locationIndex + (direction === "next" ? 1 : -1); | ||
| const nextLocation = locationList[newIndex]; | ||
|
|
||
| // Set camera position first to ensure animation happens | ||
| ref.current?.setCameraPosition({ | ||
| coordinates: { | ||
| latitude: nextLocation.stores[0].point[0], | ||
| longitude: nextLocation.stores[0].point[1], | ||
| }, | ||
| zoom: SF_ZOOM, | ||
| }); | ||
|
|
||
| // Update state after animation is triggered | ||
| setLocationIndex(newIndex); | ||
| } |
| [ | ||
| "expo-maps", | ||
| { | ||
| "requestLocationPermission": "true", |
| { | ||
| "version": "2025.01", | ||
| "data": [ | ||
| { | ||
| "id": 1, |
Description
Please describe your changes and the problem you are solving.
Changes Made
Checklist
Screenshots (if applicable)
Please attach any relevant screenshots that show the changes made.
Summary by CodeRabbit
New Features
expo_mapfeaturing interactive maps with markers and polylines (Apple Maps on iOS, Google Maps on Android), anduniversal_appwith tabbed navigation and modal routing.Documentation
Configuration