Ride Caller App Template

Features

• Tab Navigation: Four main sections (Home, Trips, Messages, Profile) with emoji-based icons and smooth transitions
• Interactive Map Screen: Mock map with animated pan controls, location markers with pulse effects, and recenter functionality
• Location Management: Quick shortcuts for saved locations (Home, Work, Airport) and suggested recent destinations
• Messaging System: Message list with unread badges, avatar initials, timestamps, and message previews
• User Profile: Profile header with rating display, statistics cards (rides, spending, CO₂ saved), and account/support menu items
• Bottom Sheet Component: Collapsible sheet for search and location suggestions with smooth expand/collapse animations
• Animated UI Elements: Smooth animations for map panning, bottom sheet interactions, and tab transitions
• Safe Area Handling: Proper edge insets for notched devices and safe areas

Tech Stack

• Framework: React Native with Expo Router
• Language: TypeScript
• Navigation: Expo Router (file-based routing)
• Animations: React Native Animated API
• UI Components: React Native built-ins (View, Text, Pressable, ScrollView, SafeAreaView)
• Styling: StyleSheet with custom theme constants
• Safe Area: react-native-safe-area-context

Setup/Usage

1. Install dependencies:

   npm install
   # or
   yarn install
   

2. Run the app:

   npx expo start
   

3. File Structure:

   • app/(tabs)/_layout.tsx - Tab navigation configuration
   • app/(tabs)/index.tsx - Home screen with map and location search
   • app/(tabs)/messages.tsx - Messages list screen
   • app/(tabs)/profile.tsx - User profile screen
   • src/constants/theme.ts - Design tokens (colors, spacing, typography)
   • src/constants/mockData.ts - Mock data for locations and messages
   • src/components/ - Reusable components (BottomSheet, MapMock, MapPin)

Key Components

• TabIcon: Custom icon component with opacity-based focus states
• HomeScreen: Main screen with animated map, location shortcuts, and search interface
• MessagesScreen: Scrollable message list with unread indicators
• ProfileScreen: User profile with stats, account settings, and support menu
• BottomSheet: Collapsible sheet component for search and suggestions
• MapMock: Mock map container with pan offset support
• MapPin: Positioned map marker with optional pulse animation

Customization

• Theme: Modify Colors, Spacing, Radii, Type, and Shadows in src/constants/theme.ts
• Mock Data: Update RECENT_LOCATIONS and MESSAGES in src/constants/mockData.ts
• Tab Icons: Change emoji glyphs in _layout.tsx or replace with custom components
• Navigation Routes: Add new screens in app/(tabs)/ directory following Expo Router conventions

License

Tetrees License