Skip to content

Expo map#97

Merged
TabotCharlesBessong merged 2 commits into
masterfrom
expo_map
Jun 4, 2026
Merged

Expo map#97
TabotCharlesBessong merged 2 commits into
masterfrom
expo_map

Conversation

@TabotCharlesBessong

@TabotCharlesBessong TabotCharlesBessong commented Jun 4, 2026

Copy link
Copy Markdown
Owner

Description

Please describe your changes and the problem you are solving.

Changes Made

  • List the changes you made here
  • Be specific and clear
  • Include any relevant details

Checklist

  • Tests have been added or updated
  • Documentation has been updated
  • The code follows the project's style guide
  • Any relevant configuration files have been updated

Screenshots (if applicable)

Please attach any relevant screenshots that show the changes made.

Summary by CodeRabbit

  • New Features

    • Added two complete Expo project templates: expo_map featuring interactive maps with markers and polylines (Apple Maps on iOS, Google Maps on Android), and universal_app with tabbed navigation and modal routing.
    • Included theme switching, parallax scrolling animations, and collapsible content sections across both projects.
  • Documentation

    • Added README files with setup instructions and feature overviews for both projects.
  • Configuration

    • Added configuration files for Expo, TypeScript, ESLint, and build tools for both projects.

Copilot AI review requested due to automatic review settings June 4, 2026 03:37
@coderabbitai

coderabbitai Bot commented Jun 4, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Two 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.

Changes

Expo Maps Example Application

Layer / File(s) Summary
Project Configuration
expo_map/.gitignore, expo_map/app.json, expo_map/package.json, expo_map/tsconfig.json, expo_map/eas.json, expo_map/eslint.config.js
Gitignore patterns, Expo app manifest with location permissions and Google Maps API key, npm scripts with Expo/maps dependencies, TypeScript strict mode with path aliases, EAS build profiles, and ESLint flat config.
Root Layout and Tab Navigation
expo_map/app/_layout.tsx, expo_map/app/(tabs)/_layout.tsx, expo_map/app/+not-found.tsx
Root layout initializes custom fonts and applies theme provider; tabs layout configures two routes (Home/Explore) with themed active tint color, custom HapticTab button, and blur-style tab bar on iOS; not-found screen provides 404 fallback.
Platform-Specific Map Implementation
expo_map/app/(tabs)/index.tsx, expo_map/LocationList.js
HomeScreen with AppleMaps view on iOS and GoogleMaps on Android; location state and camera ref control Prev/Next navigation; platform-specific markers, polylines, and event handlers; 78 location entries with store details and coordinates.
Explore Screen
expo_map/app/(tabs)/explore.tsx
Renders ParallaxScrollView with collapsible feature sections (routing, platform support, images, fonts, theming, animations) and platform-conditional iOS-only content.
Core Theme Components
expo_map/components/ThemedText.tsx, expo_map/components/ThemedView.tsx, expo_map/constants/Colors.ts
ThemedText with typography variants (default, title, defaultSemiBold, subtitle, link); ThemedView with background color; Colors constant with light/dark palettes (text, background, tint, icon, tabIconDefault, tabIconSelected).
Reusable UI Components
expo_map/components/Collapsible.tsx, expo_map/components/ExternalLink.tsx, expo_map/components/HapticTab.tsx, expo_map/components/HelloWave.tsx, expo_map/components/ParallaxScrollView.tsx
Collapsible sections with animated chevron toggle; ExternalLink wraps expo-router Link with native platform open-browser behavior; HapticTab adds iOS light haptic feedback; HelloWave uses react-native-reanimated to animate waving emoji; ParallaxScrollView computes animated header parallax transform from scroll offset.
Icon Rendering and Tab Bar
expo_map/components/ui/IconSymbol.ios.tsx, expo_map/components/ui/IconSymbol.tsx, expo_map/components/ui/TabBarBackground.ios.tsx, expo_map/components/ui/TabBarBackground.tsx
iOS IconSymbol wraps expo-symbols SymbolView; Android/web fallback maps SF Symbol names to MaterialIcons; iOS-specific BlurTabBarBackground renders tinted blur effect; web/Android shim provides opaque background.
Theming Hooks
expo_map/hooks/useColorScheme.ts, expo_map/hooks/useColorScheme.web.ts, expo_map/hooks/useThemeColor.ts
useColorScheme re-exported from react-native; web-specific hook returns 'light' before hydration; useThemeColor resolves theme color with optional light/dark override.
Documentation and Utilities
expo_map/README.md, expo_map/scripts/reset-project.js
README covers installation, platform config, and usage examples for map views, markers, polylines, and event handling; reset-project CLI script interactively archives or deletes app directories and regenerates starter templates.

Universal Expo Starter Template

Layer / File(s) Summary
Project Configuration and Documentation
universal_app/.claude/settings.json, universal_app/.gitignore, universal_app/AGENTS.md, universal_app/CLAUDE.md, universal_app/README.md, universal_app/app.json, universal_app/package.json, universal_app/tsconfig.json, universal_app/eslint.config.js
Claude plugin settings, gitignore for Node/Expo/native artifacts, Expo SDK v54 documentation notice, Claude integration reference, getting-started README, Expo app manifest with icon/splash assets and platform settings, npm scripts and dependencies, TypeScript strict config, and ESLint flat config.
Root Layout and Navigation
universal_app/app/_layout.tsx, universal_app/app/(tabs)/_layout.tsx, universal_app/app/modal.tsx
Root layout with anchor on tabs group, theme provider selection via useColorScheme, and Stack with tabs and modal routes; tabs layout configures Home/Explore screens with themed active tint and HapticTab; modal screen provides dismissible navigation to home.
Home and Explore Screens
universal_app/app/(tabs)/index.tsx, universal_app/app/(tabs)/explore.tsx
HomeScreen with ParallaxScrollView header, welcome text, three instructional sections, and link to modal with alert menu actions; ExploreScreen with collapsible feature descriptions and external documentation links.
Core Theme Components
universal_app/components/themed-text.tsx, universal_app/components/themed-view.tsx, universal_app/constants/theme.ts
ThemedText with type variants and theme-aware color; ThemedView with background color; Colors constant (light/dark palettes) and Fonts constant (platform-specific font families via Platform.select).
Reusable UI Components
universal_app/components/ui/collapsible.tsx, universal_app/components/external-link.tsx, universal_app/components/haptic-tab.tsx, universal_app/components/hello-wave.tsx, universal_app/components/parallax-scroll-view.tsx
Collapsible with isOpen state and chevron rotation; ExternalLink forces target="_blank" and delegates to openBrowserAsync on native; HapticTab triggers iOS haptic on press; HelloWave renders emoji with CSS animation; ParallaxScrollView uses Reanimated scroll offset for animated header parallax.
Icon System
universal_app/components/ui/icon-symbol.ios.tsx, universal_app/components/ui/icon-symbol.tsx
iOS-specific SymbolView wrapper; cross-platform component that maps SF Symbol names to MaterialIcons with fallback rendering.
Theming Hooks
universal_app/hooks/use-color-scheme.ts, universal_app/hooks/use-color-scheme.web.ts, universal_app/hooks/use-theme-color.ts
useColorScheme re-exported from react-native; web-specific hook handles SSR by returning 'light' before hydration; useThemeColor resolves color from theme palette with optional overrides.
Utility Script
universal_app/scripts/reset-project.js
Executable Node.js CLI script that prompts user to archive or delete project directories, recreates app folder, and regenerates starter template files.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 Maps and themes in harmony,
Two apps built on React's trajectory,
Platform-specific views so bright,
Theming hooks that feel just right,
Expo Router guides the way,
Fresh examples to learn and play! 🗺️✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is entirely a template with no actual content filled in. All sections are empty placeholders, and no changes, problems solved, or implementation details are described. Fill in the description with actual details: describe what the PR adds (two new Expo example projects), the problem being solved (demonstrating maps functionality), list specific changes, and check relevant boxes.
Docstring Coverage ⚠️ Warning Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'Expo map' is vague and generic. It uses a non-descriptive term that doesn't clearly convey the main changes (adding multiple Expo apps with maps integration, configuration, and UI components). Use a more descriptive title like 'Add expo-maps example apps with navigation and location features' or 'Add expo_map and universal_app example projects' to better reflect the scope.
✅ Passed checks (2 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch expo_map

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@TabotCharlesBessong
TabotCharlesBessong merged commit d0e7526 into master Jun 4, 2026
2 of 3 checks passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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_app Expo Router project scaffold (theme, UI components, scripts, lint/TS config).
  • Added a new expo_map project showcasing expo-maps with tab navigation and map interactions.
  • Introduced large static datasets under expo_map (notably LocationList.js and FlavourList.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.

Comment on lines +32 to +47
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);
}
Comment thread expo_map/app.json
[
"expo-maps",
{
"requestLocationPermission": "true",
Comment thread expo_map/FlavourList.json
Comment on lines +1 to +5
{
"version": "2025.01",
"data": [
{
"id": 1,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants