Places Search - React Native App

A modern, feature-rich React Native mobile application built with Expo that provides Google Maps Places search functionality with real-time autocomplete, interactive map display, and persistent search history.

🚀 Features

Core Functionality

• 🔍 Real-time Place Search: Google Places API autocomplete with instant suggestions
• 🗺️ Interactive Map: Google Maps integration with custom markers and location display
• 📍 Place Details: Comprehensive place information including ratings, photos, and addresses
• 📱 Search History: Persistent storage of searched places with AsyncStorage
• 🌍 Location Services: Current location detection and map navigation
• 🌙 Dark Mode: Full dark/light theme support

User Experience

• ⚡ Performance Optimized: Debounced search, efficient state management
• 🎨 Modern UI: Clean gradient design with smooth animations
• 📱 Mobile-First: Responsive design optimized for mobile devices
• ♿ Accessibility: Proper safe area handling for iOS/Android status bars
• 🔄 Navigation: Tab-based navigation between Search and History screens

📱 Screenshots

The app features a clean, modern interface with:

• Search overlay with real-time suggestions
• Interactive Google Maps with place markers
• History management with ratings and details
• Responsive design for all screen sizes

🛠️ Technology Stack

• Framework: React Native with Expo SDK 53
• Language: TypeScript
• State Management: Zustand
• Maps: react-native-maps with Google Maps
• Storage: AsyncStorage for persistence
• Styling: React Native StyleSheet with gradient support
• API: Google Places API (Autocomplete & Place Details)

📋 Prerequisites

Before running this application, ensure you have:

1. Node.js (v16 or higher)
2. npm or yarn
3. Expo CLI: npm install -g @expo/cli
4. Google Cloud Console Account with API access
5. Mobile device or emulator for testing

🔧 Installation & Setup

1. Clone & Install Dependencies

git clone <repository-url>
cd places-search
npm install

2. Google API Configuration

Step 1: Create Google Cloud Project

1. Go to Google Cloud Console
2. Create a new project or select existing one
3. Enable the following APIs:
   • Places API (New)
   • Places API
   • Maps SDK for Android
   • Maps SDK for iOS

Step 2: Create API Key

1. Go to Credentials
2. Click "Create Credentials" → "API Key"
3. Copy the generated API key

Step 3: Configure API Key Restrictions (Recommended)

For Android:

1. Edit your API key
2. Under "Application restrictions" → Select "Android apps"
3. Add your package name: com.yourcompany.placessearch
4. Add SHA-1 certificate fingerprint (get from Expo)

For iOS:

1. Edit your API key
2. Under "Application restrictions" → Select "iOS apps"
3. Add your bundle identifier: com.yourcompany.placessearch

3. Update Configuration Files

Update app.json:

{
  "expo": {
    "ios": {
      "config": {
        "googleMapsApiKey": "YOUR_GOOGLE_MAPS_API_KEY_HERE"
      }
    },
    "android": {
      "config": {
        "googleMaps": {
          "apiKey": "YOUR_GOOGLE_MAPS_API_KEY_HERE"
        }
      }
    }
  }
}

Update services/googlePlacesAPI.ts:

const GOOGLE_PLACES_API_KEY = 'YOUR_GOOGLE_MAPS_API_KEY_HERE';

4. Run the Application

# Start the development server
npx expo start

# For specific platforms
npx expo start --ios
npx expo start --android

📁 Project Structure

places-search/
├── app/                          # App Router screens
│   ├── (tabs)/
│   │   ├── index.tsx            # Main search screen
│   │   ├── explore.tsx          # History screen
│   │   └── _layout.tsx          # Tab navigation layout
│   ├── _layout.tsx              # Root layout
│   └── +not-found.tsx           # 404 screen
├── components/                   # Reusable components
│   ├── MapView.tsx              # Google Maps component
│   ├── PlaceSearchSimple.tsx    # Search with autocomplete
│   ├── SearchHistory.tsx        # History management
│   ├── ThemedText.tsx           # Themed text component
│   ├── ThemedView.tsx           # Themed view component
│   ├── HapticTab.tsx            # Tab with haptic feedback
│   └── ui/                      # UI components
│       ├── IconSymbol.tsx       # Icon component
│       └── TabBarBackground.tsx # Tab bar styling
├── services/                     # API services
│   └── googlePlacesAPI.ts       # Google Places API client
├── store/                        # State management
│   └── placesStore.ts           # Zustand store
├── hooks/                        # Custom hooks
│   ├── useColorScheme.ts        # Theme detection
│   └── useThemeColor.ts         # Theme colors
├── constants/                    # App constants
│   └── Colors.ts                # Color definitions
└── assets/                       # Static assets
    ├── images/                  # App icons and images
    └── fonts/                   # Custom fonts

🎯 Key Components

MapView Component

• Google Maps integration with react-native-maps
• Custom markers for selected places
• User location display
• Dark mode map styling
• Smooth animations and gestures

PlaceSearchSimple Component

• Real-time autocomplete search
• Debounced API calls for performance
• Smart suggestion filtering
• Clean, accessible UI design

SearchHistory Component

• Persistent storage with AsyncStorage
• Place ratings and details display
• Clear history functionality
• Empty state handling

Zustand Store (placesStore.ts)

• Centralized state management
• Place selection and history
• Map region control
• Async storage integration

🔍 API Integration

Google Places Autocomplete

// Get place suggestions
const suggestions = await GooglePlacesAPI.autocomplete(query);

Place Details

// Get detailed place information
const placeDetails = await GooglePlacesAPI.getPlaceDetails(placeId);

Nearby Search

// Search for nearby places
const nearbyPlaces = await GooglePlacesAPI.searchNearby(lat, lng, radius);

🎨 Styling & Theming

The app supports automatic dark/light mode switching based on system preferences:

• Light Mode: Clean whites and blues
• Dark Mode: Dark grays with blue accents
• Gradients: Modern gradient backgrounds
• Typography: Consistent font weights and sizes
• Spacing: Standardized margins and padding

📱 Platform Support

• iOS: Full support with native Maps integration
• Android: Google Maps with custom styling
• Expo Go: Development testing support
• Production: Ready for App Store/Play Store deployment

🚀 Performance Optimizations

• Debounced Search: 300ms delay to reduce API calls
• Smart Caching: Prevents duplicate API requests
• Efficient Rendering: Optimized FlatList components
• Memory Management: Proper cleanup of timers and listeners
• Bundle Optimization: Tree-shaking and code splitting

🔧 Troubleshooting

Common Issues

Maps Not Loading

1. Verify API key is correct in both app.json and googlePlacesAPI.ts
2. Ensure Maps SDK is enabled in Google Cloud Console
3. Check API key restrictions match your app's bundle ID
4. Clear Expo cache: npx expo start --clear

Search Not Working

1. Verify Places API is enabled in Google Cloud Console
2. Check API key has Places API permissions
3. Monitor console logs for API errors
4. Ensure network connectivity

Location Permission Issues

1. Check device location services are enabled
2. Grant location permission when prompted
3. Test on physical device (not simulator)

Debug Mode

Enable detailed logging by checking console output:

✅ Autocomplete: Found 5 suggestions for "restaurant"
✅ Place Details: Found "Restaurant Name" at Address

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

📞 Support

For support and questions:

• Create an issue in the repository
• Check the troubleshooting section above
• Review Google Places API documentation

🙏 Acknowledgments

• Google Places API for location data
• React Native Maps community
• Expo team for the excellent development platform
• Zustand for simple state management