React Native New Google Places Autocomplete

A modern, highly customizable Google Places autocomplete component for React Native using the latest Google Places API (New).

Features

• 🚀 Modern API: Built with the latest Google Places API (New)
• 📱 React Native: Fully compatible with React Native
• 🎨 Customizable: Highly customizable UI and behavior
• 🔍 TypeScript: Full TypeScript support with type definitions
• ⚡ Performance: Optimized for performance with debouncing and caching
• 🌍 International: Support for multiple languages and regions
• 🔒 Secure: No API keys exposed in client-side code
• 📦 Lightweight: Minimal bundle size impact

Installation

npm install react-native-new-google-places-autocomplete
# or
yarn add react-native-new-google-places-autocomplete

Prerequisites

1. Google Places API Key: You'll need a Google Places API key with the following APIs enabled:

   • Places API (New)
   • Geocoding API
   • Maps JavaScript API

2. React Native Setup: Ensure you have React Native properly configured in your project.

Quick Start

GoogleNewPlacesAutocomplete Component

Uses the new Google Places API (New) with POST requests and supports all advanced features:

import React from 'react';
import { View } from 'react-native';
import { GoogleNewPlacesAutocomplete } from 'react-native-new-google-places-autocomplete';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <GoogleNewPlacesAutocomplete
        apiKey="YOUR_GOOGLE_PLACES_API_KEY"
        placeholder="Search for a place..."
        onPlaceSelect={place => {
          console.log('Selected place:', place);
        }}
        includedRegionCodes={['NG']}
        languageCode="en"
        debounceMs={300}
        locationBias={{
          latitude: 6.5244,
          longitude: 3.3792,
          radius: 10000,
        }}
        includeQueryPredictions={true}
        includePureServiceAreaBusinesses={true}
      />
    </View>
  );
};

export default App;

API Reference

Props

GoogleNewPlacesAutocomplete Props

| Prop | Type | Default | Description | | ---------------------------------- | ---------------------------- | ------------------------- | ---------------------------------------- | | apiKey | string | Required | Your Google Places API key | | placeholder | string | 'Search for a place...' | Placeholder text for the input | | onPlaceSelect | (place: Place) => void | - | Callback when a place is selected | | onTextChange | (text: string) => void | - | Callback when text changes | | value | string | '' | Controlled input value | | onChangeText | (text: string) => void | - | Callback when input text changes | | style | any | - | Style for input container | | containerStyle | any | - | Style for main container | | inputStyle | any | - | Style for text input | | listStyle | any | - | Style for results list | | itemStyle | any | - | Style for list items | | itemTextStyle | any | - | Style for item main text | | itemSubTextStyle | any | - | Style for item sub text | | loadingColor | string | '#007AFF' | Color for loading indicator | | showLoader | boolean | true | Whether to show loading indicator | | customLoader | React.ReactNode | - | Custom loading component | | loaderStyle | any | - | Style for loading indicator | | debounceMs | number | 300 | Debounce delay in milliseconds | | minLength | number | 2 | Minimum characters before search | | includedRegionCodes | string[] | ['NG'] | Region codes for search bias | | languageCode | string | 'en' | Language code for results | | locationBias | LocationBias | - | Location bias for search results | | locationRestriction | LocationRestriction | - | Location restriction for search | | origin | {lat: number, lng: number} | - | Origin location for distance calculation | | regionCode | string | - | Region code for search | | sessionToken | string | - | Session token for billing | | includedPrimaryTypes | string[] | - | Primary types to include | | includeQueryPredictions | boolean | - | Include query predictions | | includePureServiceAreaBusinesses | boolean | - | Include service area businesses | | inputOffset | number | - | Cursor position for predictions |

Place Object

interface Place {
  place_id: string;
  description: string;
  structured_formatting: {
    main_text: string;
    secondary_text: string;
  };
  terms: Array<{
    offset: number;
    value: string;
  }>;
  types: string[];
  geometry?: {
    location: {
      lat: number;
      lng: number;
    };
  };
  details?: PlaceDetails;
}

LocationBias Object

interface LocationBias {
  latitude: number;
  longitude: number;
  radius?: number;
}

LocationRestriction Object

interface LocationRestriction {
  latitude: number;
  longitude: number;
  radius: number;
}

Advanced Usage

Location Bias

<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  placeholder="Search near Lagos..."
  onPlaceSelect={place => console.log(place)}
  locationBias={{
    latitude: 6.5244,
    longitude: 3.3792,
    radius: 10000, // 10km radius
  }}
  includedRegionCodes={['NG']}
  languageCode="en"
/>

Primary Types Filtering

<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  placeholder="Search for restaurants..."
  onPlaceSelect={place => console.log(place)}
  includedPrimaryTypes={['restaurant', 'cafe']}
  locationBias={{
    latitude: 6.5244,
    longitude: 3.3792,
    radius: 5000,
  }}
/>

Location Restriction

<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  placeholder="Search within Lagos area..."
  onPlaceSelect={place => console.log(place)}
  locationRestriction={{
    latitude: 6.5244,
    longitude: 3.3792,
    radius: 50000, // 50km radius
  }}
/>

Advanced Features

<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  placeholder="Advanced search..."
  onPlaceSelect={place => console.log(place)}
  includedPrimaryTypes={['establishment', 'geocode']}
  includedRegionCodes={['NG']}
  languageCode="en"
  locationBias={{
    latitude: 6.5244,
    longitude: 3.3792,
    radius: 10000,
  }}
  includeQueryPredictions={true}
  includePureServiceAreaBusinesses={true}
  sessionToken="your-session-token"
  regionCode="NG"
  debounceMs={500}
  minLength={3}
/>

Custom Styling

<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  placeholder="Custom styled search..."
  onPlaceSelect={place => console.log(place)}
  containerStyle={{
    backgroundColor: 'white',
    borderRadius: 8,
    margin: 16,
  }}
  inputStyle={{
    height: 44,
    color: '#5d5d5d',
    fontSize: 16,
    backgroundColor: 'transparent',
  }}
  listStyle={{
    backgroundColor: 'white',
    borderRadius: 8,
    marginTop: 8,
  }}
  itemStyle={{
    backgroundColor: 'white',
    padding: 13,
    minHeight: 44,
  }}
  itemTextStyle={{
    fontSize: 15,
    color: '#333',
  }}
/>

Custom Loading

// Hide loader completely
<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  showLoader={false}
  onPlaceSelect={place => console.log(place)}
/>

// Custom loader styling
<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  loadingColor="#FF6B6B"
  loaderStyle={{
    marginRight: 8,
  }}
  onPlaceSelect={place => console.log(place)}
/>

// Custom loader component
<GoogleNewPlacesAutocomplete
  apiKey="YOUR_API_KEY"
  customLoader={
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#4CAF50" />
      <Text style={{ marginLeft: 8, color: '#4CAF50' }}>
        Loading places...
      </Text>
    </View>
  }
  onPlaceSelect={place => console.log(place)}
/>

Styling

The component accepts a styles prop that allows you to customize the appearance of various elements:

• container: Main container
• textInput: Input field
• listView: Results list container
• row: Individual result row
• separator: Row separator
• description: Place description text
• poweredContainer: "Powered by Google" container
• powered: "Powered by Google" text

Error Handling

Common errors and solutions:

1. "REQUEST_DENIED": Check your API key and ensure the Places API is enabled
2. "OVER_QUERY_LIMIT": You've exceeded your API quota
3. "ZERO_RESULTS": No places found for the search term
4. "INVALID_REQUEST": Check your query parameters

Contributing

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

License

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

Support

If you encounter any issues or have questions, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue with a detailed description

Changelog

See CHANGELOG.md for a list of changes and version history.