react-native-google-autocomplete

To restrict search results to a specific country, use the components property with the format country:XX (where XX is the two-letter country code). For example, to restrict to Canada, use components="country:ca".

// Example: Restrict to Canada
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
  components: 'country:ca',
});

Install the package using either yarn or npm.

yarn add @appandflow/react-native-google-autocomplete

npm i @appandflow/react-native-google-autocomplete

Use the headers property in the config object to pass platform-specific API restrictions like Android package names or iOS bundle identifiers.

// Android
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
  headers: {
    'X-Android-Package': 'com.example.app',
    'X-Android-Cert': 'your-signing-certificate-fingerprint',
  },
});

// iOS
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
  headers: {
    'X-Ios-Bundle-Identifier': 'com.example.app',
  },
});

This example demonstrates how to bind a TextInput to the term and setTerm properties, and how to display and interact with the locationResults.

  const { locationResults, setTerm, clearSearch, searchDetails, term } =
    useGoogleAutocomplete(API_KEY, {
      language: 'en',
      debounce: 300,
    });

  return (
    <View>
      <TextInput
        value={term}
        onChangeText={setTerm}
      />
      {locationResults.slice(0, 3).map((el, i) => (
        <TouchableOpacity
          key={String(i)}
          onPress={async () => {
            const details = await searchDetails(el.place_id);
            console.log(JSON.stringify(details, null, 2));
          }}
        >
          <Text>{el.structured_formatting.main_text}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );

The hook returns an object containing the following properties:

• clearSearch: Function to clear the current search.
• isSearching: Boolean indicating if a search is currently in progress.
• locationResults: Array of GoogleLocationResult objects returned by the search.
• searchDetails: Function to fetch full details for a specific result using its place_id.
• searchError: Contains errors encountered during search.
• term: The current search term string.
• setTerm: Function to update the current search term.

The useGoogleAutocomplete hook provides functionality to search for Google Places. It requires a Google Places API key and accepts an optional configuration object.

Arguments:

• apiKey: Your Google Places API key.
• config: (Optional) Configuration object to customize search behavior.

const { 
  locationResults, 
  setTerm, 
  clearSearch, 
  searchDetails, 
  term 
} = useGoogleAutocomplete(API_KEY, {
  language: 'en',
  debounce: 300,
});

You can import the result types for use in TypeScript or Flow.

import {
  GoogleLocationDetailResult,
  GoogleLocationResult,
} from 'react-native-google-autocomplete';

When calling searchDetails(place_id), the returned object follows the GoogleLocationDetailResult interface.

export interface GoogleLocationDetailResult {
  adr_address: string;
  formatted_address: string;
  icon: string;
  id: string;
  name: string;
  place_id: string;
  scope: string;
  reference: string;
  url: string;
  utc_offset: number;
  vicinity: string;
  types: string[];
  geometry: {
    location: {
      lat: number;
      lng: number;
    };
    viewport: {
      [type: string]: {
        lat: number;
        lng: number;
      };
    };
  };
  address_components: Array<{ 
    long_name: string; 
    short_name: string; 
    types: string[]; 
  }>;
}

The locationResults array contains objects following the GoogleLocationResult interface. Note that distance_meters is only present if the origin parameter was provided in the config.

export interface GoogleLocationResult {
  description: string;
  id: string;
  matched_substrings: Array<{ 
    length: number; 
    offset: number; 
  }>;
  place_id: string;
  reference: string;
  structured_formatting: {
    main_text: string;
    secondary_text: string;
    main_text_matched_substrings: Array<{ 
      length: number; 
    }>;
  };
  terms: Array<{ 
    offset: number; 
    value: string; 
  }>;
  types: string[];
  distance_meters?: number; // Present when origin parameter is provided
}

Once a user selects a result from locationResults, you can use the searchDetails function to fetch comprehensive information about that specific place using its placeId.

// Example: Fetching details when a result is selected
const handleSelect = async (placeId: string) => {
  try {
    const details = await searchDetails(placeId);
    console.log('Place Details:', details);
  } catch (error) {
    console.error('Failed to fetch details', error);
  }
};