rn-use-google-places-autocomplete

🗺️ useGooglePlacesAutocomplete

A fully-typed and modern React Native hook for consuming Google Places API v1, without axios or unnecessary dependencies.

✨ Why this package?

The goal was to build a lightweight, developer-friendly and React Native-compliant hook that allows you to easily integrate Google Places Autocomplete in your apps, with geolocation support — all typed, simple, and production-ready.

Most existing packages either:

• Use outdated APIs (Place Autocomplete v1 is recommended)
• Rely on axios, which bloats your bundle
• Aren’t tailored for React Native
• Lack proper TypeScript support

This solves all that in one clean, open-source package 🚀

---

📦 Installation

npm install rn-use-google-places-autocomplete
# or
yarn add rn-use-google-places-autocomplete

---

🛠️ Setup Before Use

Before you start using this package, ensure that you’ve properly set up your Google Cloud Platform (GCP) project and API keys. Here are the steps to follow:

1. Create a Google Cloud Project

1. Access the Google Cloud Console: Go to Google Cloud Console.
2. Create a New Project: Click on the project dropdown and select "New Project". Give it a name and create it.

2. Enable Billing

1. Enable Billing for Your Project: You need to link a billing account to your project. If you don’t have one, create it following the instructions in the console.

Note: Google Cloud offers a free tier, and you won’t be charged unless your usage exceeds the free tier limits.

3. Enable Required APIs

In order to use Google Places Autocomplete and Geocoding, you must enable the following APIs:

• Places API
• Geocoding API

a. Enable APIs:

1. Go to the API Library in the Google Cloud Console.
2. Enable Places API:
   • Search for "Places API", select it, and click "Enable".
3. Enable Geocoding API:
   • Search for "Geocoding API", select it, and click "Enable".

4. Create an API Key

1. Navigate to API Credentials: In the Google Cloud Console, go to "APIs & Services" > "Credentials".
2. Create a New API Key:
   • Click on "Create Credentials" and choose "API Key".
   • Copy the generated key. This key will be used in your app.
3. Restrict Your API Key (Recommended):
   • To prevent unauthorized usage, restrict the key to only work with your allowed referrers (such as your domain or mobile app).
   • You can also restrict the key to only the Places and Geocoding APIs.

For a complete guide on setting up your API keys, see Google’s official documentation.

---

🛠️ Usage

import useGooglePlacesAutocomplete from "use-google-places-autocomplete";
import { useGooglePlacesAutocomplete } from 'rn-use-google-places-autocomplete';
import { Text, View, TextInput, FlatList, TouchableOpacity, RefreshControl, } from 'react-native';

export default function App() {
  const { query, setQuery, places, loading, error } =
  useGooglePlacesAutocomplete({
    gcpApiKey: "YOUR_GOOGLE_API_KEY",
    language: "en", // or "fr", etc.
    countries: ["FR", "US"], // Optional country filter
  });

  return(
    <View>
      // Bind `query` to your input and render `places`
      <TextInput
        placeholder="Search a place..."
        value={query}
        onChangeText={setQuery}
      />
      // Render the places
      <FlatList
        refreshControl={
          <RefreshControl 
            onRefresh={() => {}} 
            refreshing={loading} 
          />
        }
        refreshing={loading}
        data={places}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => {}}>
            <Text>{item.name}</Text>
            <Text>{item.fullAddress}</Text>
            <Text>
              Lat : {item.latitude} | Long : {item.longitude}
            </Text>
          </TouchableOpacity>
        )}
      />
    </View>
  )
}

---

🧠 Features

• ✅ Fully typed (TypeScript ready)
• ✅ Google Places API v1 compatible
• ✅ Geocoding (lat/lng) included
• ✅ Customizable endpoints (for advanced use)
• ✅ Designed for React Native
• ✅ No external dependencies

---

📄 API

useGooglePlacesAutocomplete(props)

Prop	Type	Required	Description
gcpApiKey	string	✅	Your Google Cloud API Key with Places and Geocoding enabled
language	string	❌	Language code (default is 'fr')
countries	string[]	❌	Country restriction (e.g., ['FR', 'US'])
autocompUrl	string	❌	Override autocomplete endpoint
geocodingUrl	string	❌	Override geocoding endpoint
timeoutValue	number	❌	Override timeout (default is 1500)

Returns

Field	Type	Description
query	string	The current user input
setQuery	function	Update the query string
places	Place[]	List of place suggestions with metadata
loading	boolean	Whether a request is in progress
error	string | null	Any API or fetch error

Place Object Structure

interface Place {
  id: string;
  name: string;
  fullAddress: string;
  types: string[];
  latitude: number | null;
  longitude: number | null;
  address_components: {
    mainText: { text: string };
    secondaryText: { text: string };
  };
  raw?: PlacePrediction; // Full Google prediction object
}

---

🚀 Demo

📺 Demo Video

You can view the demo video by clicking here.

---

🤝 Contribute

PRs are welcome! If you’d like to add features (like place detail fetch), feel free to open an issue or contribute directly.

---

💬 Need a custom React Native component?

I build production-grade mobile experiences, MVPs and complex app architectures.
📧 Contact me at [e-mail]

---

📄 License

MIT – Free for personal and commercial use.