react-native-google-place-search
is a React Native component that allows you to easily implement a Google Places autocomplete search feature in your application. It provides a customizable UI to search for places and get details like coordinates.
- Google Places Autocomplete: Autocomplete suggestions as you type.
- Customizable UI: Customize input styles, list items, headers, and footers.
- Powered By Google Logo: Optionally display the "Powered by Google" logo.
- Place Details Fetching: Fetch detailed place information including latitude and longitude.
- Debounce Search: Optimized search requests using a debounce function.
- Error Handling: Display errors if API key is missing or when an API call fails.
npm install react-native-google-place-search
or
yarn add react-native-google-place-search
Here’s an example of how to use the GooglePlaceSearch
component in your project:
import React from "react";
import { View, Text } from "react-native";
import GooglePlaceSearch from "react-native-google-place-search";
const App = () => {
const handlePlaceSelected = (place) => {
console.log("Selected Place:", place);
};
return (
<View style={{ flex: 1 }}>
<GooglePlaceSearch
onPlaceSelected={handlePlaceSelected}
apiKey="YOUR_GOOGLE_API_KEY"
placeholder="Search for a location"
/>
</View>
);
};
export default App;
Below are all the props that the GooglePlaceSearch
component accepts:
Prop Name | Type | Default | Description |
---|---|---|---|
onPlaceSelected |
(place: Place & Partial<PlaceDetails>) => void |
Required | Callback fired when a place is selected from the list. |
apiKey |
string |
Required | Your Google Places API key. |
placeholder |
string |
"Search for a place" |
Placeholder text for the search input. |
shouldShowPoweredLogo |
boolean |
true |
Whether to display the "Powered by Google" logo at the bottom of the list. |
containerStyle |
StyleProp<ViewStyle> |
undefined |
Style for the container view. |
inputStyle |
StyleProp<TextStyle> |
undefined |
Style for the text input. |
placeItemStyle |
StyleProp<ViewStyle> |
undefined |
Style for each place item in the list. |
placeTextStyle |
StyleProp<TextStyle> |
undefined |
Style for the place text in each list item. |
listFooterComponent |
React.ReactNode |
Powered by Google logo |
Footer component for the list (e.g., a custom logo or loading indicator). |
listFooterStyle |
StyleProp<ViewStyle> |
undefined |
Style for the footer component. |
listHeaderComponent |
React.ReactNode |
undefined |
Header component for the list. |
listHeaderStyle |
StyleProp<ViewStyle> |
undefined |
Style for the header component. |
minimumQueryLength |
number |
3 |
Minimum number of characters required to trigger the search. |
The onPlaceSelected
callback provides a place object with the following structure:
{
description: string, // The description of the place
place_id: string, // The unique place ID
lat?: number, // (Optional) Latitude of the place
lng?: number // (Optional) Longitude of the place
}
<GooglePlaceSearch
onPlaceSelected={(place) => console.log("Selected place:", place)}
apiKey="YOUR_GOOGLE_API_KEY"
placeholder="Enter location"
shouldShowPoweredLogo={false}
containerStyle={{ margin: 16 }}
inputStyle={{ borderColor: "blue", borderWidth: 1 }}
placeItemStyle={{
padding: 10,
borderBottomColor: "#ccc",
borderBottomWidth: 1,
}}
placeTextStyle={{ color: "black", fontSize: 16 }}
minimumQueryLength={2}
/>
This project is licensed under the MIT License. See the LICENSE file for details.