{"id":22887265,"url":"https://github.com/appandflow/react-native-google-autocomplete","last_synced_at":"2026-01-31T15:04:10.352Z","repository":{"id":48022261,"uuid":"129979121","full_name":"AppAndFlow/react-native-google-autocomplete","owner":"AppAndFlow","description":"A hook that simplifies using the Google Places Autocomplete API.","archived":false,"fork":false,"pushed_at":"2025-02-28T17:09:46.000Z","size":2239,"stargazers_count":149,"open_issues_count":6,"forks_count":32,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-14T11:01:56.462Z","etag":null,"topics":["expo","google-autocomplete","google-places-api","google-places-autocomplete","react-native","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AppAndFlow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-18T00:07:29.000Z","updated_at":"2025-05-04T08:08:33.000Z","dependencies_parsed_at":"2025-01-03T23:08:30.823Z","dependency_job_id":"ecf18d79-4e8b-4fbf-9e79-ca9d5ca878e2","html_url":"https://github.com/AppAndFlow/react-native-google-autocomplete","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-google-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-google-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-google-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AppAndFlow%2Freact-native-google-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AppAndFlow","download_url":"https://codeload.github.com/AppAndFlow/react-native-google-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160589,"owners_count":22024571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","google-autocomplete","google-places-api","google-places-autocomplete","react-native","reactjs","typescript"],"created_at":"2024-12-13T20:32:06.851Z","updated_at":"2026-01-31T15:04:10.343Z","avatar_url":"https://github.com/AppAndFlow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![google_autocomplete](https://github.com/user-attachments/assets/b9d85da5-b833-4e40-a6d7-36380e049ba0)\n\n### About\nApp \u0026 Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by [Expo](https://expo.dev/consultants). Need a hand? Let’s build together. team@appandflow.com\n\n## Installation\n\n```sh\nyarn add @appandflow/react-native-google-autocomplete\n```\n\n```sh\nnpm i @appandflow/react-native-google-autocomplete\n```\n\n## Usage\n\nThe `useGoogleAutocomplete` hook takes 2 arguments\n\n| Arg    | Description                                                                                                |\n| ------ | ---------------------------------------------------------------------------------------------------------- |\n| apiKey | [Your google places api key](https://developers.google.com/maps/documentation/places/web-service/overview) |\n| config | optional config object                                                                                     |\n\n# Config object\n\n| Property        | Description                                                                                            |\n| --------------- | ------------------------------------------------------------------------------------------------------ |\n| debounce        | optional - default 300                                                                                 |\n| debounceOptions | optional - Configuration options for debounce behavior.                                                |\n| language        | optional - default 'en'                                                                                |\n| queryTypes      | optional - default address - https://developers.google.com/places/web-service/autocomplete#place_types |\n| minLength       | optional - default 2 - this is the min length of the term search before start                          |\n| components      | optional - A grouping of places to which you would like to restrict your results                       |\n| radius          | optional - The distance (in meters) within which to return place results                               |\n| lat             | optional - The latitude. If provided, lng is required                                                  |\n| lng             | optional - The longitude. If provided, lat is required                                                 |\n| strictBounds    | optional - Returns only places that are strictly within the region defined by location and radius.     |\n| proxyUrl        | optional - This is required if you want to use the hook in a Web based platform. Since we dont use the Google SDK,  the http call will fail because of issues related to CORS unless a proxyUrl is provided                       |\n| headers         | optional - Custom headers to include in the Google Places API requests. Useful for passing platform-specific API restrictions such as `X-Android-Package`, `X-Android-Cert`, or `X-Ios-Bundle-Identifier`. |\n\n# Exposed properties\n\n| Property        | Description                                                                |\n| --------------- | -------------------------------------------------------------------------- |\n| clearSearch     | Clears your current search                                                 |\n| isSearching     | Boolean that lets you know the search is underway                          |\n| locationResults | The array of results of the search                                         |\n| searchDetails   | Function that lets you get more details, good for when you select a result |\n| searchError     | Errors that could occur during search                                      |\n| term/setTerm    | The term is the search term used, it's set using setTerm                   |\n\n# Code example\n\nThis is a minimalistic functionnal snippet that returns 3 results for your search.\nClicking on a result logs the details of that result.\n\n```ts\n  const { locationResults, setTerm, clearSearch, searchDetails, term } =\n    useGoogleAutocomplete(API_KEY, {\n      language: 'en',\n      debounce: 300,\n    });\n\n  return (\n    \u003cView\u003e\n      \u003cTextInput\n        value={term}\n        onChangeText={setTerm}\n      /\u003e\n      {locationResults.slice(0, 3).map((el, i) =\u003e (\n        \u003cTouchableOpacity\n          key={String(i)}\n          onPress={async () =\u003e {\n            const details = await searchDetails(el.place_id);\n            console.log(JSON.stringify(details, null, 2));\n          }}\n        \u003e\n          \u003cText\u003e{el.structured_formatting.main_text}\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      ))}\n    \u003c/View\u003e\n  );\n```\n\n## Results\n\n`locationResults` returns the following. The maximum result set by Google is 5 locations by query.\n\n```js\nexport interface GoogleLocationResult {\n  description: string;\n  id: string;\n  matched_substrings: Array\u003c{\n    length: number;\n    offset: number;\n  }\u003e;\n  place_id: string;\n  reference: string;\n  structured_formatting: {\n    main_text: string;\n    secondary_text: string;\n    main_text_matched_substrings: Array\u003c{\n      length: number;\n    }\u003e;\n  };\n  terms: Array\u003c{\n    offset: number;\n    value: string;\n  }\u003e;\n  types: string[];\n}\n```\n\nWhen calling the searchDetails this is what you get\n\n```js\nexport interface GoogleLocationDetailResult {\n  adr_address: string;\n  formatted_address: string;\n  icon: string;\n  id: string;\n  name: string;\n  place_id: string;\n  scope: string;\n  reference: string;\n  url: string;\n  utc_offset: number;\n  vicinity: string;\n  types: string[];\n  geometry: {\n    location: {\n      lat: number;\n      lng: number;\n    };\n    viewport: {\n      [type: string]: {\n        lat: number;\n        lng: number;\n      };\n    };\n  };\n  address_components: Array\u003c{\n    long_name: string;\n    short_name: string;\n    types: string[];\n  }\u003e;\n}\n```\n\n## Typings\n\nYou can import both result typing if you need for flow or typescript.\n\n```js\nimport {\n  GoogleLocationDetailResult,\n  GoogleLocationResult,\n} from 'react-native-google-autocomplete';\n```\n\n## Custom Headers\n\nYou can pass custom headers to the underlying Google Places API requests. This is useful for [application restrictions](https://developers.google.com/maps/api-security-best-practices#application-restriction) such as Android app or iOS bundle restrictions.\n\n```ts\n// Android\nconst { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {\n  headers: {\n    'X-Android-Package': 'com.example.app',\n    'X-Android-Cert': 'your-signing-certificate-fingerprint',\n  },\n});\n\n// iOS\nconst { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {\n  headers: {\n    'X-Ios-Bundle-Identifier': 'com.example.app',\n  },\n});\n```\n\n## Restrict by country\n\nIf you want to restrict the search by country you can add this as a props `components=\"country:ca\"`. This here would example restrict it to Canada only.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappandflow%2Freact-native-google-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappandflow%2Freact-native-google-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappandflow%2Freact-native-google-autocomplete/lists"}