react-native-google-places-legacy-autocomplete

A beautiful, fully customizable React Native autocomplete component for Google Places API (New Places API). This component provides a Google Places-like experience with modern UI/UX, smooth animations, and extensive customization options.

✨ Features

• 🎨 Beautiful UI/UX - Rounded corners, subtle shadows, floating labels, smooth animations
• 🔍 Smart Search - Debounced API calls, loading indicators, keyboard-aware behavior
• 🎯 Highly Customizable - Custom styles, icons, themes, and render functions
• ♿ Accessible - Full keyboard navigation and screen-reader support
• ⚡ Performance Optimized - Memoized components, virtualized lists, efficient rendering
• 🌓 Theme Support - Built-in light and dark themes
• 📱 Mobile Optimized - Keyboard-aware, touch-friendly, responsive design

Installation

npm install react-native-google-places-legacy-autocomplete

or

yarn add react-native-google-places-legacy-autocomplete

Prerequisites

• React Native >= 0.60.0
• React >= 16.8.0
• A valid Google Places API key with the following APIs enabled:
  • Places API (New)
  • Places API

Basic Usage

import React from 'react';
import { AddressAutocomplete, AddressData } from 'react-native-google-places-legacy-autocomplete';

const App = () => {
  const handleSelect = (data: AddressData) => {
    console.log('Selected address:', data);
    // data contains: address, city, state, pincode, country, lat, lng
  };

  return (
    <AddressAutocomplete
      apiKey="YOUR_GOOGLE_PLACES_API_KEY"
      placeholder="Enter address"
      countryCodes={['IN', 'US']} // Optional: filter by country codes
      onSelect={handleSelect}
    />
  );
};

export default App;

Advanced Usage

With Custom Styling

<AddressAutocomplete
  apiKey="YOUR_API_KEY"
  label="Delivery Address"
  placeholder="Search for an address"
  inputStyle={{ borderWidth: 2 }}
  containerStyle={{ margin: 16 }}
  listStyle={{ maxHeight: 200 }}
  onSelect={handleSelect}
/>

With Custom Icons

import { MaterialIcons } from '@expo/vector-icons';

<AddressAutocomplete
  apiKey="YOUR_API_KEY"
  leftIcon={<MaterialIcons name="search" size={24} color="#666" />}
  rightIcon={<MaterialIcons name="close" size={24} color="#666" />}
  onSelect={handleSelect}
/>

With Dark Theme

<AddressAutocomplete
  apiKey="YOUR_API_KEY"
  theme="dark"
  onSelect={handleSelect}
/>

Controlled Input

const [address, setAddress] = useState('');

<AddressAutocomplete
  apiKey="YOUR_API_KEY"
  value={address}
  onChangeText={setAddress}
  onSelect={handleSelect}
/>

Custom Render Item

<AddressAutocomplete
  apiKey="YOUR_API_KEY"
  renderItem={(item, onPress, query) => (
    <TouchableOpacity onPress={onPress} style={customStyle}>
      <Text>{item.placePrediction.text.text}</Text>
    </TouchableOpacity>
  )}
  onSelect={handleSelect}
/>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your Google Places API key | | onSelect | (data: AddressData) => void | Yes | - | Callback function called when an address is selected | | placeholder | string | No | 'Enter address' | Placeholder text for the input field | | label | string | No | - | Floating label text (appears above input when focused) | | countryCodes | string[] | No | ['IN'] | Array of ISO country codes to filter results (e.g., ['IN', 'US']) | | value | string | No | - | Controlled input value | | onChangeText | (text: string) => void | No | - | Callback for controlled input changes | | minChars | number | No | 3 | Minimum characters before search starts | | debounceMs | number | No | 400 | Debounce delay in milliseconds | | inputStyle | ViewStyle \| TextStyle | No | - | Custom styles for the input container | | containerStyle | ViewStyle | No | - | Custom styles for the main container | | listStyle | ViewStyle | No | - | Custom styles for the suggestions dropdown | | leftIcon | React.ReactNode | No | - | Custom left icon (replaces default search icon) | | rightIcon | React.ReactNode | No | - | Custom right icon (replaces default clear icon) | | renderItem | (item, onPress, query) => React.ReactNode | No | - | Custom render function for suggestion items | | theme | 'light' \| 'dark' | No | 'light' | Theme mode | | showLoader | boolean | No | true | Show loading indicator while fetching | | highlightMatch | boolean | No | true | Highlight matching text in suggestions |

AddressData Type

The onSelect callback receives an AddressData object with the following structure:

type AddressData = {
  address: string;        // Full formatted address
  city?: string;          // City name
  state?: string;         // State/Province name
  pincode?: string;       // Postal/ZIP code
  country?: string;       // Country name
  lat?: number;           // Latitude
  lng?: number;           // Longitude
};

UI/UX Features

• ✅ Text Input - Rounded corners (12px), subtle shadow, smooth focus transitions
• ✅ Floating Label - Animated label that floats above input when focused or has value
• ✅ Icons - Left search icon and optional right clear (✕) icon
• ✅ Suggestions Dropdown - Card-style elevation with smooth open/close animations
• ✅ Suggestion Items - Location icon, primary text (bold), secondary text (muted), highlighted matches
• ✅ Touch Feedback - Active opacity and hover states for better interaction
• ✅ Animations - Smooth slide and fade animations for dropdown

Behavior Features

• ✅ Debounced API Calls - Configurable debounce (default 400ms)
• ✅ Loading Indicator - Shows spinner while fetching results
• ✅ Keyboard-Aware - Automatically handles keyboard appearance
• ✅ Outside Press - Closes suggestions when clicking outside
• ✅ Clear on Selection - Automatically clears suggestions after selection
• ✅ Controlled & Uncontrolled - Supports both input modes

Accessibility

• ✅ Focus Handling - Proper focus management and visual indicators
• ✅ Screen Reader - Accessible labels and roles
• ✅ Keyboard Navigation - Full keyboard support for navigation

Performance

• ✅ FlatList - Virtualized list for efficient rendering
• ✅ Memoization - Memoized render items and callbacks
• ✅ Optimized Rendering - removeClippedSubviews, maxToRenderPerBatch, windowSize optimizations

Getting a Google Places API Key

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the following APIs:
   • Places API (New)
   • Places API
4. Create credentials (API Key)
5. Restrict the API key to your app (recommended for production)

License

MIT