xoup

React-native-google-place-search

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.

Preview

Features

• 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.

Installation

npm install react-native-google-place-search

or

yarn add react-native-google-place-search

How to Use

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;

Props

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.

Place Object Structure

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
}

Example Usage

<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}
/>

License

This project is licensed under the MIT License. See the LICENSE file for details.