Skip to content

kore-koi/react-native-google-places

Repository files navigation

@korekoi/react-native-google-places

Nitro wrapper around the Google Places SDK with a single API for address autocomplete.

Reasons to use this module:

  • You can now use the Google Places SDK in your React Native app providing a restricted API key on your bundle identifiers so that you don't have to expose an open API key to the public.
  • The module provides a simple API for address autocomplete, returning only the place ID and a display string for UI

Install

npm install @korekoi/react-native-google-places react-native-nitro-modules
cd ios && pod install

API key setup

You can set the API key either manually or via the Expo config plugin.

Expo config plugin (iOS + Android)

{
  "expo": {
    "plugins": [
      [
        "@korekoi/react-native-google-places",
        { "androidApiKey": "YOUR_ANDROID_API_KEY", "iosApiKey": "YOUR_IOS_API_KEY" }
      ]
    ]
  }
}

Manual setup

iOS

Add GMSPlacesAPIKey to Info.plist:

<key>GMSPlacesAPIKey</key>
<string>YOUR_IOS_API_KEY</string>

Android

Add the meta-data entry in AndroidManifest.xml:

<application>
  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_ANDROID_API_KEY" />
</application>

Usage

import places from '@korekoi/react-native-google-places'

// Basic autocomplete
const results = await places.autocomplete('1600 Amphitheatre Pkwy, Mountain View')
// results: Array<{ placeId: string; label: string }>

// Autocomplete with custom type filters
const results2 = await places.autocomplete('Roma', ['locality', 'administrative_area_level_3'])

// Autocomplete with full place details
const details = await places.autocompleteWithDetails('1600 Amphitheatre Pkwy')
// details: Array<PlaceDetails>

// Get details for a specific place
const place = await places.getPlace('ChIJN1t_tDeuEmsRUsoyG83frY4')
// place: PlaceDetails | null

API

autocomplete(query: string, types?: string[])

Returns a list of autocomplete predictions.

Parameters:

  • query – the search string
  • types (optional) – array of place type filters. Defaults to ["route", "street_address", "premise", "subpremise", "geocode"].

Returns: Promise<PlaceAutocompleteResult[]>

  • placeId: the place id
  • label: full display string for UI

autocompleteWithDetails(query: string, types?: string[])

Same as autocomplete, but fetches full place details for each result.

Parameters:

  • query – the search string
  • types (optional) – same type filters as autocomplete

Returns: Promise<PlaceDetails[]>


getPlace(placeId: string)

Fetches details for a single place by its ID.

Parameters:

  • placeId – a Google Place ID

Returns: Promise<PlaceDetails | null>


Types

interface PlaceAutocompleteResult {
  placeId: string
  label: string
}

interface PlaceDetails {
  name: string
  formatted_address: string
  place_id: string
  latitude: number
  longitude: number
  address_components: AddressComponent[]
}

interface AddressComponent {
  name: string
  short_name: string
  types: string[]
}

Notes

  • iOS initializes the SDK using GMSPlacesAPIKey from Info.plist.
  • Android reads the key from com.google.android.geo.API_KEY in the manifest.
  • Requires react-native-nitro-modules and generated Nitro code in nitrogen/.

Development

npm run specs

License

MIT

About

No description, website, or topics provided.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors