Google Places autocomplete

An address field that suggests places as the user types. SelectPicker's loadOptions waits for a pause in typing, shows the loader and ignores late answers, so the only code you write is the request. That covers what react-native-google-places-autocomplete is installed for, in a field that matches the rest of your form.

The field

Below, searchPlaces stands in for the request so the example runs without a key. Each option keeps the place ID as its value and the address as its description.

Loading…

Platform

Props

presentation

clearabledisabled

<SelectPicker
  label="Address"
  placeholder="Search for a place"
  value={placeId}
  onChange={setPlaceId}
  loadOptions={searchPlaces}
  searchPrompt="Type an address or a place"
  emptyText="No places found"
  clearable
  onClear={() => setPlaceId(null)}
/>

The request

With Autocomplete (New), searchPlaces is one fetch:

import type { SelectOption } from '@elik56a/react-native-pickers';

const API_KEY = 'YOUR_API_KEY';

type Suggestion = {
  placePrediction?: {
    placeId: string;
    text: { text: string };
    structuredFormat: { mainText: { text: string }; secondaryText?: { text: string } };
  };
};

export const searchPlaces = async (input: string): Promise<SelectOption<string>[]> => {
  const response = await fetch('https://places.googleapis.com/v1/places:autocomplete', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-Goog-Api-Key': API_KEY },
    body: JSON.stringify({ input, languageCode: 'en' }),
  });
  const { suggestions = [] }: { suggestions?: Suggestion[] } = await response.json();
  return suggestions.flatMap(({ placePrediction: p }) =>
    p
      ? [{ label: p.structuredFormat.mainText.text, value: p.placeId, description: p.structuredFormat.secondaryText?.text }]
      : []
  );
};

• Limit the countries with includedRegionCodes: ['us'] in the body.
• Billing: searchDebounce (300 ms by default) already skips a request per keystroke. To bill typing and the follow-up Place Details call as one session, send the same sessionToken with both, and make a new one after a pick.
• Coordinates: onChange(placeId, option) gives you the place ID; fetch Place Details with it when you need the location.
• The key: restrict it in the Google Cloud console, or call your own server and let it add the key.

Coming from react-native-google-places-autocomplete

react-native-google-places-autocomplete	React Native Pickers
query={{ key, language }}	your fetch, as above
onPress(data, details)	onChange(placeId, option), then Place Details if you need details
placeholder	placeholder (and label above the field)
debounce	searchDebounce
minLength	return [] from loadOptions for shorter queries
fetchDetails	a Place Details request in onChange
renderRow	renderOption
listEmptyComponent	emptyText
textInputProps / styles	styles with the field and list slots
requestUrl (a proxy for the web)	call your server from loadOptions

For more on loadOptions, pages of results and custom loaders, see Search a server.