@korekoi/react-native-google-places
v0.2.1
Published
A React Native library for Google Places API, providing geocoding, autocomplete, and more.
Downloads
394
Readme
@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-modulescd ios && pod installAPI 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 | nullAPI
autocomplete(query: string, types?: string[])
Returns a list of autocomplete predictions.
Parameters:
query– the search stringtypes(optional) – array of place type filters. Defaults to["route", "street_address", "premise", "subpremise", "geocode"].
Returns: Promise<PlaceAutocompleteResult[]>
placeId: the place idlabel: 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 stringtypes(optional) – same type filters asautocomplete
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
GMSPlacesAPIKeyfromInfo.plist. - Android reads the key from
com.google.android.geo.API_KEYin the manifest. - Requires
react-native-nitro-modulesand generated Nitro code innitrogen/.
Development
npm run specsLicense
MIT
