Customizable Google Places autocomplete component for iOS and Android React-Native apps

Overview
npm version

Google Maps Search Component for React Native

Customizable Google Places autocomplete component for iOS and Android React-Native apps

Version 2 of this library is now available. See more in the releases section.

Preview

Installation

Step 1.

npm install react-native-google-places-autocomplete --save

or

yarn add react-native-google-places-autocomplete

Step 2.

Get your Google Places API keys and enable "Google Places API Web Service" (NOT Android or iOS) in the console. Billing must be enabled on the account.

Step 3.

Enable "Google Maps Geocoding API" if you want to use GoogleReverseGeocoding for Current Location

Basic Example

Basic Address Search

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
      }}
    />
  );
};

export default GooglePlacesInput;

You can also try the basic example in a snack here

More Examples

Get Current Location

Click to expand

Extra step required!

If you are targeting React Native 0.60.0+ you must install either @react-native-community/geolocation (link) or react-native-geolocation-service(link).

Please make sure you follow the installation instructions there and add navigator.geolocation = require(GEOLOCATION_PACKAGE) somewhere in you application before <GooglePlacesAutocomplete />.

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

// navigator.geolocation = require('@react-native-community/geolocation');
// navigator.geolocation = require('react-native-geolocation-service');

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
      }}
      currentLocation={true}
      currentLocationLabel='Current location'
    />
  );
};

export default GooglePlacesInput;

Search with predefined option

Click to expand
import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const homePlace = {
  description: 'Home',
  geometry: { location: { lat: 48.8152937, lng: 2.4597668 } },
};
const workPlace = {
  description: 'Work',
  geometry: { location: { lat: 48.8496818, lng: 2.2940881 } },
};

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
      }}
      predefinedPlaces={[homePlace, workPlace]}
    />
  );
};

export default GooglePlacesInput;

Limit results to one country

Click to expand
import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
        components: 'country:us',
      }}
    />
  );
};

export default GooglePlacesInput;

Use a custom Text Input Component

Click to expand

This is an example using the Text Input from react-native-elements.

import React from 'react';
import { Text, View, Image } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { Input } from 'react-native-elements';

const GOOGLE_PLACES_API_KEY = 'YOUR_GOOGLE_API_KEY';

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      query={{
        key: GOOGLE_PLACES_API_KEY,
        language: 'en', // language of the results
      }}
      onPress={(data, details) => console.log(data, details)}
      textInputProps={{
        InputComp: Input,
        leftIcon: { type: 'font-awesome', name: 'chevron-left' },
        errorStyle: { color: 'red' },
      }}
    />
  );
};

export default GooglePlacesInput;

Props

This list is a work in progress. PRs welcome!

Prop Name type description default value Options
autoFillOnNotFound boolean displays the result from autocomplete if the place details api return not found false true | false
currentLocation boolean Will add a 'Current location' button at the top of the predefined places list false true | false
currentLocationLabel string change the display label for the current location button Current Location Any string
debounce number debounce the requests (in ms) 0
disableScroll boolean disable scroll on the results list
enableHighAccuracyLocation boolean use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. use GPS or not. If set to true, a GPS position will be requested. If set to false, a WIFI location will be requested. true
enablePoweredByContainer boolean show "powered by Google" at the bottom of the search results list true
fetchDetails boolean get more place details about the selected option from the Place Details API false
filterReverseGeocodingByTypes array filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
GooglePlacesDetailsQuery object "query" object for the Google Place Details API (when you press on a suggestion)
GooglePlacesSearchQuery object "query" object for the Google Places Nearby API (when you use current location to find nearby places) { rankby: 'distance', type: 'restaurant' }
GoogleReverseGeocodingQuery object "query" object for the Google Geocode API (when you use current location to get the current address)
isRowScrollable boolean enable/disable horizontal scrolling of a list result https://reactnative.dev/docs/scrollview#scrollenabled true
keyboardShouldPersistTaps string Determines when the keyboard should stay visible after a tap https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps 'always' 'never' | 'always' | 'handled'
listEmptyComponent function use FlatList's ListEmptyComponent prop when no autocomplete results are found.
listUnderlayColor string underlay color of the list result when pressed https://reactnative.dev/docs/touchablehighlight#underlaycolor '#c8c7cc'
listViewDisplayed string override the default behavior of showing the list (results) view 'auto' 'auto' | true | false
minLength number minimum length of text to trigger a search 0
nearbyPlacesAPI string which API to use for current location 'GooglePlacesSearch' 'none' | 'GooglePlacesSearch' | 'GoogleReverseGeocoding'
numberOfLines number number of lines (android - multiline must be set to true) https://reactnative.dev/docs/textinput#numberoflines 1
onFail function returns if an unspecified error comes back from the API
onNotFound function returns if the Google Places Details API returns a 'not found' code (when you press a suggestion).
onPress function returns when after a suggestion is selected
onTimeout function callback when a request timeout ()=>console.warn('google places autocomplete: request timeout')
placeholder string placeholder text https://reactnative.dev/docs/textinput#placeholder 'Search'
predefinedPlaces array Allows you to show pre-defined places (e.g. home, work)
predefinedPlacesAlwaysVisible boolean Shows predefined places at the top of the search results false
preProcess function do something to the text of the search input before a search request is sent
query object "query" object for the Google Places Autocomplete API (link) { key: 'missing api key', language: 'en', types: 'geocode' }
renderDescription function determines the data passed to each renderRow (search result)
renderHeaderComponent function use the ListHeaderComponent from FlatList when showing autocomplete results
renderLeftButton function add a component to the left side of the Text Input
renderRightButton function add a component to the right side of the Text Input
renderRow function custom component to render each result row (use this to show an icon beside each result). data and index will be passed as input parameters
requestUrl object used to set the request url for the library
returnKeyType string the return key text https://reactnative.dev/docs/textinput#returnkeytype 'search'
styles object See styles section below
suppressDefaultStyles boolean removes all default styling from the library false true | false
textInputHide boolean Hide the Search input false true | false
textInputProps object define props for the textInput, or provide a custom input component
timeout number how many ms until the request will timeout 20000

Methods

method name type description
getAddressText () => string return the value of TextInput
setAddressText (value: string) => void set the value of TextInput
focus void makes the TextInput focus
blur void makes the TextInput lose focus
clear void removes all text from the TextInput
isFocused () => boolean returns true if the TextInput is currently focused; false otherwise
getCurrentLocation () => void makes a query to find nearby places based on current location

You can access these methods using a ref.

Example

import React, { useEffect, useRef } from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
  const ref = useRef();

  useEffect(() => {
    ref.current?.setAddressText('Some Text');
  }, []);

  return (
    <GooglePlacesAutocomplete
      ref={ref}
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
      }}
    />
  );
};

export default GooglePlacesInput;

Styling

GooglePlacesAutocomplete can be easily customized to meet styles of your app. Pass styles props to GooglePlacesAutocomplete with style object for different elements (keys for style object are listed below)

key type
container object (View)
textInputContainer object (View style)
textInput object (style)
listView object (ListView style)
row object (View style)
loader object (View style)
description object (Text style)
predefinedPlacesDescription object (Text style)
separator object (View style)
poweredContainer object (View style)
powered object (Image style)

Example

<GooglePlacesAutocomplete
  placeholder='Enter Location'
  minLength={2}
  autoFocus={false}
  returnKeyType={'default'}
  fetchDetails={true}
  styles={{
    textInputContainer: {
      backgroundColor: 'grey',
    },
    textInput: {
      height: 38,
      color: '#5d5d5d',
      fontSize: 16,
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
  }}
/>

Default Styles

{
  container: {
    flex: 1,
  },
  textInputContainer: {
    flexDirection: 'row',
  },
  textInput: {
    backgroundColor: '#FFFFFF',
    height: 44,
    borderRadius: 5,
    paddingVertical: 5,
    paddingHorizontal: 10,
    fontSize: 15,
    flex: 1,
  },
  poweredContainer: {
    justifyContent: 'flex-end',
    alignItems: 'center',
    borderBottomRightRadius: 5,
    borderBottomLeftRadius: 5,
    borderColor: '#c8c7cc',
    borderTopWidth: 0.5,
  },
  powered: {},
  listView: {},
  row: {
    backgroundColor: '#FFFFFF',
    padding: 13,
    height: 44,
    flexDirection: 'row',
  },
  separator: {
    height: 0.5,
    backgroundColor: '#c8c7cc',
  },
  description: {},
  loader: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    height: 20,
  },
}

Web Support

Web support can be enabled via the requestUrl prop, by passing in a URL that you can use to proxy your requests. CORS implemented by the Google Places API prevent using this library directly on the web. You will need to use a proxy server. Please be mindful of this limitation when opening an issue.

The requestUrl prop takes an object with two properties: useOnPlatform and url.

The url property is used to set the url that requests will be made to. If you are using the regular google maps API, you need to make sure you are ultimately hitting https://maps.googleapis.com/maps/api.

useOnPlatform configures when the proxy url is used. It can be set to either web- will be used only when the device platform is detected as web (but not iOS or Android, or all - will always be used.

Example:

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Search'
      onPress={(data, details = null) => {
        // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}
      query={{
        key: 'YOUR API KEY',
        language: 'en',
      }}
      requestUrl={{
        useOnPlatform: 'web', // or "all"
        url:
          'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api', // or any proxy server that hits https://maps.googleapis.com/maps/api
      }}
    />
  );
};

export default GooglePlacesInput;

Note: The library expects the same response that the Google Maps API would return.

Features

  • Places autocompletion
  • iOS and Android compatibility
  • Places details fetching + ActivityIndicatorIOS/ProgressBarAndroid loaders
  • Customizable using the styles parameter
  • XHR cancellations when typing fast
  • Google Places terms compliant
  • Predefined places
  • typescript types
  • Current location

Compatibility

This library does not use the iOS, Android or JS SDKs from Google. This comes with some Pros and Cons.

Pros:

  • smaller app size
  • better privacy for your users (although Google still tracks server calls)
  • no need to keep up with sdk updates

Cons:

  • the library is not compatible with a Application key restrictions
  • doesn't work directly on the web without a proxy server
  • any Google API change can be a breaking change for the library.

Use Inside a <ScrollView/> or <FlatList/>

If you need to include this component inside a ScrolView or FlatList, remember to apply the keyboardShouldPersistTaps attribute to all ancestors ScrollView or FlatList (see this issue comment).

A word about the Google Maps APIs

Google Provides a bunch of web APIs for finding an address or place, and getting it’s details. There are the Google Places Web APIs (Place Search, Place Details, Place Photos, Place Autocomplete, Query Autocomplete) and the Google Geocode API .

The 5 Google Places Web APIs are:

  • Place Autocomplete - automatically fills in the name and/or address of a place as users type.
  • Place Details - returns more detailed information about a specific place (using a place_id that you get from Place Search, Place Autocomplete, or Query Autocomplete).
  • Place Photos - provides access to the millions of place-related photos stored in Google's Place database (using a reference_id that you get from Place Search, Place Autocomplete, or Query Autocomplete).
  • Place Search - returns a list of places based on a user's location or search string.
  • Query Autocomplete - provides a query prediction service for text-based geographic searches, returning suggested queries as users type.

The Geocoding API allows you to convert an address into geographic coordinates (lat, long) and to "reverse geocode", which is the process of converting geographic coordinates into a human-readable address.

Which APIs does this library use?

Place Autocomplete API, Place Details API, Place Search API and the Geocoding API.

We use the Place Autocomplete API to get suggestions as you type. When you click on a suggestion, we use the Place Details API to get more information about the place.

We use the Geocoding API and the Place Search API to use your current location to get results.

Because the query parameters are different for each API, there are 4 different "query" props.

  1. Autocomplete -> query (options)
  2. Place Details -> GooglePlacesDetailsQuery (options)
  3. Nearby Search -> GooglePlacesSearchQuery (options)
  4. Geocode -> GoogleReverseGeocodingQuery (options)

Number 1 is used while getting autocomplete results.
Number 2 is used when you click on a result.
Number 3 is used when you select 'Current Location' to load nearby results.
Number 4 is used when nearbyPlacesAPI='GoogleReverseGeocoding' is set and you select 'Current Location' to load nearby results.

Changelog

Please see the releases tab for the changelog information.

License

MIT

Authors

Issues
  • Autocomplete not working after upgrade to React Native 0.38

    Autocomplete not working after upgrade to React Native 0.38

    Hi guys, This component stopped working on our app after we upgraded to React Native 0.38. Nothing else is changed. Is there any new setting we need to cater for after upgrade? Here's our code if it helps, pretty standard:

    import React, {Component} from 'react';
    import {View, MapView, WebView, Text} from 'react-native'
    //import WebViewBridge from 'react-native-webview-bridge';
    var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
    
    
    
    
    const injectScript = `
      (function () {
        if (WebViewBridge) {
            WebViewBridge.onMessage = function (message) {                       
            };
        }
        }());
    `;
    
    var self;
    
    class LocationSearch extends Component {
        constructor(props) {
            super(props);
            
        }
        componentDidMount() {
            self = this;
        }
        
        render() {
            var route = this.props.navigator.getCurrentRoutes(0);
            searchlocation = route[route.length - 1].positionToSearch;  
            var stringSearchLocation= searchlocation.coords.latitude +', ' + searchlocation.coords.longitude;        
            return (
                <View style={{marginTop:60}}>
                    <GooglePlacesAutocomplete
                        placeholder='Search'
                        minLength={2}
                        autoFocus={false}
                        fetchDetails={true}
                        onPress={(data, details = null) => {                     
                            self.props.callBack(details);
                            self.props.navigator.pop();                     
                        } }                  
                        query={{
                            // available options: https://developers.google.com/places/web-service/autocomplete
                            key: 'AIzaSyCJzwLTQ4ADlEr2vftLexbX2xY81hO9yq0',
                            language: 'en', // language of the results   
                            location: stringSearchLocation,
                            radius:5000                     
                        }}
                        styles={{
                            description: {
                                fontWeight: 'bold',
                            },
                            predefinedPlacesDescription: {
                                color: '#1faadb',
                            },
                        }}
    
                        currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
                        currentLocationLabel="Current location"
                        nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                        GoogleReverseGeocodingQuery={{
                            // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                        }}
                        GooglePlacesSearchQuery={{
                            // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                            rankby: 'distance',
                            types: 'food',
                        }}
                        filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
                        
                        />
                </View>
            );
        }
    }
    
    module.exports = LocationSearch;
    
    opened by saeed2402 27
  • List disappears when I try to select result [1.4.0]

    List disappears when I try to select result [1.4.0]

    Using example code I cannot select any result, because every time I try to select it, a list disappears. Happens only after update to 1.4.0.

    opened by MariuszSpeednet 27
  • Search results box does not close, when function call is included in the onPress

    Search results box does not close, when function call is included in the onPress

    I am using GooglePlacesAutocomplete to set the state with location. However, when I include a functional call in the onPress, the results box does not close when I select a location. If I replace the functional call with a console.log, then the results box closes once I select a location. Please help. Thank you

    Here is a screenshot of it not closing: image

    Here is my code:

    onLocationSelect(data, details) { console.log(data, details); this.setState({ region: { latitude: details.geometry.location.lat, longitude: details.geometry.location.lng, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA, } }) }

    .....

                  <GooglePlacesAutocomplete
                    placeholder='Search'
                    minLength={2} // minimum length of text to search
                    autoFocus={true}                   
                    returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
                    listViewDisplayed='auto'    // true/false/undefined
                    fetchDetails={true}
                    renderDescription={row => row.description} // custom description render
                    onPress={(data, details = null) => { this.onLocationSelect(data, details) }}
    
                    getDefaultValue={() => ''}
                     
                    query={{
                       // available options: https://developers.google.com/places/web-service/autocomplete
                       key: 'MY_KEY',
                       language: 'en', // language of the results
                     }}
                     
                    styles={{
                       textInputContainer: {
                         width: '100%'
                       },
                       description: {
                         fontWeight: 'bold'
                       },
                       predefinedPlacesDescription: {
                         color: '#1faadb'
                       }
                     }}
                     
                    currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
                    currentLocationLabel="Current location"
                    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GoogleReverseGeocodingQuery={{
                       // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
                     }}
                    GooglePlacesSearchQuery={{
                       // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
                       rankby: 'distance',
                       types: 'food'
                     }}
    
                    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
                     // predefinedPlaces={[homePlace, workPlace]}
                    enablePoweredByContainer={false}
                    debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
                     // renderLeftButton={()  => <Image source={require('../../icons/icon-left-arrow.png')} />}
                     // renderRightButton={() => <Text>Search</Text>}
                   />
    
    opened by ramluro1 25
  • VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

    VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

    After upgrading to react-native 0.61 I get a lot of warnings like that:

    VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

    What is the other VirtualizedList-backed container that i should use, and why is it now advised not to use like that?

    It comes when I am clicking on autocomplete.

    awaiting author response No reproduction 
    opened by archana-iron 23
  • How to use a restricted API key?

    How to use a restricted API key?

    I'm trying to set a restricted API key. According to Google, there are the following ways to do it:

    • HTTP referrers (web sites)
    • IP addresses (web servers, cron jobs, etc.)
    • Android apps
    • iOS apps

    When I set iOS apps to my bundle identifier (same for debug and production) I'm unable to use the API. Doing some research it seems like the Web API should use HTTP referrers or IP addresses. Since the IP address will change with the app user, that leaves us with using a HTTP referrer.

    Assuming my reasoning above is correct, how would I go about setting the HTTP referrer for this library?

    Thanks, Oskar

    opened by oskarth 21
  • List items not clickable on the web

    List items not clickable on the web

    On expo 39 with web build. List can't not be clickable, it's looks like blur is called and hide list before called.

    Working fine with iOS and Android only issue with web

    import * as React from 'react';
    import { View, StyleSheet, TextInput } from 'react-native';
    import Constants from 'expo-constants';
    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
    
    const GOOGLE_PLACES_API_KEY = ''; // never save your real api key in a snack!
    
    const App = () => {
      return (
        <View style={styles.container}>
          <GooglePlacesAutocomplete
                placeholder="Search"
                onPress={(data, details = null) => {
                    // 'details' is provided when fetchDetails = true
                    console.log(data, details);
                }}
                requestUrl={{
                    useOnPlatform: "web",
                    url:
                        "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api",
                }}
                numberOfLines={3}
                query={{
                    key: "",
                    language: "en",
                    components: "country:uk",
                }}
            />
        </View>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 10,
        paddingTop: Constants.statusBarHeight + 10,
        backgroundColor: '#ecf0f1',
      },
    });
    
    export default App;
    
    

    Additional context

    {
      "main": "node_modules/expo/AppEntry.js",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
      },
      "dependencies": {
        "expo": "^39.0.0",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
        "react-native-web": "~0.13.7",
        "react-native-google-places-autocomplete": "^2.0.2"
      },
      "devDependencies": {
        "babel-preset-expo": "^8.3.0",
        "@babel/core": "^7.8.6"
      },
      "private": true
    }
    
    • [ ] iOS
    • [ ] Android
    • [x] Web

    If you are using expo please indicate here:

    • [x] I am using expo

    Add any other context about the problem here, screenshots etc

    bug help wanted 
    opened by dhru-com 19
  • RN 0.13 support

    RN 0.13 support

    This was working fine with RN 0.12 in both iOS and Android.

    Now, after upgrading to RN 0.13, when selecting an item it is not closing the list and showing the selected item on the textView. When selecting again the list closes but textView is still empty.

    opened by JonnyBGod 18
  • Replace server-side API library for web implementations

    Replace server-side API library for web implementations

    Problem This package currently uses the server-side library for all API calls. This works fine on iOS/Android, but causes CORS errors on web.

    See this thread: googlemaps/google-maps-services-js#59

    Solution Replace with client library for web implementations https://developers.google.com/maps/documentation/javascript/tutorial

    discussion 
    opened by hthillman 18
  • The autocomplete list doesn't appear

    The autocomplete list doesn't appear

    Please help me. I can't see the autocomplete list that appears when I enter a search.

    question No reproduction 
    opened by mnurulhuda 17
  • Custom ListView row renderer

    Custom ListView row renderer

    I think it's good to give the possibility to set custom renderer for ListView rows.

    opened by antonsivogrivov 16
  • fix: Clickable search items

    fix: Clickable search items

    null

    opened by aliAtik 0
  • Results list is not displayed in the simulator

    Results list is not displayed in the simulator

    Good day, I have the following problem. For some reason I am not seeing the list of results in the simulator. It doesn't matter whether the search field is nested or alone on a page. However, if I build the app on my real iPhone, the searchbar works and the list is displayed.

    Maybe someone can help me. Many thanks in advance. Bildschirmfoto 2021-10-15 um 09 18 42

    question 
    opened by renmassonne 0
  • feature: add gesture handler and platform dependent touchable component

    feature: add gesture handler and platform dependent touchable component

    A platform dependent version of the TouchableHighlight.

    Touchables don't usually work well with components like Gorhom's Bottom Sheet, or just don't work properly at all depending on the OS, so I ran some tests and figured the Native version works with iOS and Gesture Handler version works with Android. Might not be the case for everyone, but I hope this works as a solution.

    opened by FelipeLimaMarques 2
  • Can't remove special character in the text input.

    Can't remove special character in the text input.

    Description

    I'm trying to remove special characters from text input but can't. tried using textInputProps with onChangeText but the value in the input does not change, the special character is still displaying on screen. Tried using replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'') to delete the special character, in debugger mode it deletes it but in the app I still see the special character. Any suggestions on how to solve this?

    Reproduction

      <GooglePlacesAutocomplete
                   ref={(instance) => { this.locationRef = instance }}
                   placeholder={this.state.addressPlaceholder}
                   textInputProps={{placeholderTextColor: styles.inputPlaceholder.color}}
                   minLength={2}
                   autoFocus={false}
                   returnKeyType={'search'}
                   keyboardAppearance={'light'}
                   listViewDisplayed={false}
                   fetchDetails={true}
                   enablePoweredByContainer= {false}
                   renderDescription={row => {
                     return row.description
                   }} // custom description render
                   onPress={(data, details = null) => {
                     let streetName = '';
                     let streetNumber = '';
                     let zipCode = '';
                     let city = '';
                     let state = '';
                     let country = '';
                     for (a in details.address_components) {
                       let loc = details.address_components[a];
                       if (loc.types.includes('street_number')) {
                         streetNumber = loc.long_name;
                       } else if (loc.types.includes('route')) {
                         streetName = loc.long_name;
                       } else if (loc.types.includes('locality')) {
                         city = loc.long_name;
                       } else if (loc.types.includes('administrative_area_level_1')) {
                         state = loc.long_name;
                       } else if (loc.types.includes('postal_code')) {
                         zipCode = loc.long_name;
                       } else if (loc.types.includes('country')) {
                         country = loc.long_name;
                       }
                     }
                     this.setState({address: streetNumber+' '+streetName, city: city, state: state, zipCode: zipCode, country: country, nextButtonDisabled: false});
                     this.locationRef.setAddressText(streetNumber+' '+streetName);
                     this.locationRef.listViewDisplayed = false;
                     //this.setState({locationValue: streetName})
                   }}
                   getDefaultValue={() => this.state.address}
    
                   styles={{
                     placeholderTextColor: styles.inputPlaceholder.color,
                     textInputContainer: styles.locationTextInputContainer,
                     textInput: styles.locationTextInput,
                     description: styles.locationDescription,
                     poweredContainer: styles.locationPoweredContainer,
                     powered: {},
                     row: styles.locationPoweredContainer
                   }}
                   currentLocation={false}
                   currentLocationLabel="Current location"
                   nearbyPlacesAPI='GooglePlacesSearch' //'GoogleReverseGeocoding
                   GooglePlacesSearchQuery={{
                     rankby: 'distance',
                     type: 'cafe'
                   }}
                   GooglePlacesDetailsQuery={{
                     fields: ['formatted_address'],
                   }}
                   filterReverseGeocodingByTypes={[]} 
                   predefinedPlaces={[]}
                   debounce={200}
                 />
      
    

    Additional context

    • Library Version: [2.1.3]

    • React Native Version: [0.63.4]

    • [y] iOS

    • [y] Android

    • [ ] Web

    If you are using expo please indicate here:

    • [ ] I am using expo

    Add any other context about the problem here, screenshots etc

    question 
    opened by gg-ballin 0
  • Why is listEmptyComponent a function?

    Why is listEmptyComponent a function?

    Describe the problem

    Perhaps more documentation is needed here, but I'm not sure how to use listEmptyComponent. I'd like to just display a react fragment when the list is empty, but I can't pass one because listEmptyComponent needs to be a function. Does that make sense?

    Reproduction - (required - issue will be closed without this)

    Simply import and use the component like this

    <GooglePlacesAutocomplete
            listEmptyComponent={<></>}
    />
    

    Observe the proptype error

    question 
    opened by Luke9389 0
  • When I do a setAddressText, the list with the suggestions is not displayed

    When I do a setAddressText, the list with the suggestions is not displayed

    When I make a setAddressText, the list with the suggestions is not shown, I had to modify the function of setAddressText in the node modules, adding the following:

    setAddressText: (address) => { setStateText(address); _handleChangeText(address); }

    This corrected the bug, but it would be interesting to review the issue more thoroughly, the solution may be temporary.

    enhancement 
    opened by fernan0823 0
  • Need to show only addresses with a house number

    Need to show only addresses with a house number

    Describe the problem

    I want to exclude all results without street addresses and home numbers. I tried with different values for filterReverseGeocodingByTypes but each time i received Country, City or something like that in dropdown results. Also i searched solution in google api but didn't find it.

    Additional context

    react-native-geolocation-service: ^5.3.0-beta.3 react-native-google-places-autocomplete: ^2.4.1

    • Library Version: [e.g. 1.4.2]

    • React Native Version: [^0.65.1]

    • [ ] iOS

    • [ ] Android

    • [ ] Web

    If you are using expo please indicate here:

    • [ ] I am using expo
    question 
    opened by valin0k 0
  • Allow to style FlatList contentContainer

    Allow to style FlatList contentContainer

    Hi! πŸ‘‹

    Firstly, thanks for your work on this project! πŸ™‚

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Allow to style FlatList contentContainerStyle

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts
    index 1fbd5f9..64f7423 100644
    --- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts
    +++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.d.ts
    @@ -353,6 +353,7 @@ interface Styles {
       powered: StyleProp<ImageStyle>;
       separator: StyleProp<ViewStyle>;
       row: StyleProp<ViewStyle>;
    +  listViewContentContainer: StyleProp<ViewStyle>;
     }
     
     interface Place {
    diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
    index cd03253..8911afe 100644
    --- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
    +++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
    @@ -767,6 +767,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
               keyExtractor={keyGenerator}
               extraData={[dataSource, props]}
               ItemSeparatorComponent={_renderSeparator}
    +          contentContainerStyle={props.styles.listViewContentContainer}
               renderItem={({ item, index }) => _renderRow(item, index)}
               ListEmptyComponent={
                 stateText.length > props.minLength && props.listEmptyComponent
    

    This issue body was partially generated by patch-package.

    opened by KROSF 0
  • strictbounds: true giving issue

    strictbounds: true giving issue

    Package is giving issue with strictbounds: true I was using it previously for exact area but now it is not valid to use it . Api is giving 500

    {
       "predictions" : [],
       "status" : "UNKNOWN_ERROR"
    }
    

    Please confirm before using it .

    question 
    opened by Anujmoglix 0
  • Feature: Query the text input on setAddressText()

    Feature: Query the text input on setAddressText()

    What's in this PR? This PR makes the setAddressText() method query the address passed as a parameter,

    Quick summary of the changes you made. Changed setStateText(address) to _handleChangeText(address) in setAddressText().

    opened by joacoabrego 0
Releases(v2.4.1)
  • v2.4.1(Aug 11, 2021)

  • v2.4.0(Aug 9, 2021)

  • v2.3.0(Aug 2, 2021)

    • run prettier (8fca5d6)
    • add keepResultsAfterBlur to readme (096f7ca)
    • Fix broken link to Google Places API in README.md (f87c3ae)
    • Fix listViewDisplayed warning with propTypes (253f844)
    • Make getCurrentLocation accessible on the ref object (2a697a6)
    • Fix TS GooglePlaceDetail#types (f2e92a3)
    • fix autocomplete url params (994affc)
    • Replace comment sytax for better VSCode support (#706) (01879cd)
    • Allow Persistent Results (#705) (2e3edf5)
    • Fixed a typo in the Readme (1887f72)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Mar 15, 2021)

    • Fix updating props.predefinedPlaces (ec0ad69)
    • add props.query to dependency list (d1657fa)
    • Update README.md (be4923b)
    • remove cors-anywhere reference (20a103e)
    • use npx for release-it (6bd6513)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Jan 25, 2021)

  • v2.1.2(Dec 10, 2020)

    • run yarn lint (800af72)
    • Fix onPress issue caused by blur event (dd8f63e)
    • plus_code feature added to type definition file (#669) (5190c9e)
    • Replace useState import with useRef import in example (0e12807)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Nov 11, 2020)

  • v2.1.0(Nov 11, 2020)

    • add object as option for passing objects (0af296c)
    • fix(ts-error): add JSX.Element type option in addition to dep React.ComponentType (dc235c6)
    • add textInput refs directly on useImperativeHandle (#650) (dbdb653)
    • add release-it (3c2c357)
    • add custom input example (#651) (ca74af2)
    • Fix onChangeText (#647) (6832c88)
    • fixed debounceData function definition (915fce6)
    • Update README.md to document the requestUrl prop (#631) (7f1c05a)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0-RC.0(Nov 9, 2020)

    • add workaround for RNW onBlur issue (#649) (ce02189)
    • add textInput refs directly on useImperativeHandle (#650) (dbdb653)
    • add release-it (3c2c357)
    • add custom input example (#651) (ca74af2)
    • Fix onChangeText (#647) (6832c88)
    • fixed debounceData function definition (915fce6)
    • Update README.md to document the requestUrl prop (#631) (7f1c05a)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Oct 8, 2020)

    Changes:

    • Updated all of the typescript definitions, prop-types and props list in the readme with all of the available props.

    • Updated the default styles (see the updated screenshots at the top of the readme).

    • The library now uses hooks internally

    Breaking Changes:

    1. Removed the following props

      • getDefaultValue - use the setAddressText method with a ref instead.
      • editable - can still be used inside of textInputProps
      • keyboardAppearance - can still be used inside of textInputProps
      • onSubmitEditing - can still be used inside of textInputProps
      • placeholderTextColor - can still be used inside of textInputProps
      • returnKeyType - can still be used inside of textInputProps
      • underlineColorAndroid - can still be used inside of textInputProps
    2. Removed the following methods

      • triggerFocus - use the focus method with a ref instead.
      • triggerBlur - use the blur method with a ref instead.
      • clearText - use the clear method with a ref instead.
    3. Minimum react-native version is now 0.59.0+ (we now use hooks internally).

    Special thanks to @strdr4605 for his help with the typescript definitions.

    Source code(tar.gz)
    Source code(zip)
  • v1.9.0(Oct 5, 2020)

    typescript: add definition for renderRow (#624). Thanks @bill-pairaktaridis! add location compatibility with react-native-service-location (#623). Thanks @ErickMaeda!

    Source code(tar.gz)
    Source code(zip)
  • v1.8.3(Sep 22, 2020)

  • v1.8.2(Sep 11, 2020)

  • v1.8.1(Sep 2, 2020)

  • v1.8.0(Jul 9, 2020)

    • Add ability to show something when there are no results from the autocomplete query.
    • fix pre-defined places not updating.
    • make the onBlur behavior in textInputProps consistent with onFocus (#506). Thanks @sethcwhiting!
    • update some type definition and the readme.
    Source code(tar.gz)
    Source code(zip)
  • v1.7.3(Jul 7, 2020)

  • v1.7.2(Jun 19, 2020)

  • v1.7.1(May 20, 2020)

  • v1.7.0(May 20, 2020)

    • removed the referrer prop. (#562) See this for more.
    • fix crash when getDefaultValue wasn't a string (#406). Thanks @jeromecornet!
    • fix typescript definition errors for textInputProps (#564). Thanks @jamesa3!
    • fix internal callBack in setState (#530). Thanks @sapter!
    • fix list hiding when selecting current location (#565).
    • compressed images used in the library
    Source code(tar.gz)
    Source code(zip)
  • v1.6.1(May 15, 2020)

  • v1.6.0(May 14, 2020)

    • fixed crash on React Native v0.60+ when using currentLocation.
    • updated examples in the readme

    If you want to use currentLocation and you are targeting React Native 0.60.0+ you must install either @react-native-community/geolocation (link) or react-native-geolocation-service(link). You must then set navigator.geolocation = require('SOME_GEOLOCATION_LIBRARY') somewhere in your app.

    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(May 13, 2020)

  • v1.4.2(May 8, 2020)

  • v1.4.0(Dec 2, 2019)

Owner
Farid Safi
Co-Founder of Le Reacteur Coding Bootcamp #JavaScript #React #React-Native
Farid Safi
Google Sign-in for your React Native applications

?? ?? Maintenance notice ?? ?? See this issue Features Support all 3 types of authentication methods (standard, with server-side validation or with of

null 2.3k Oct 11, 2021
React Native wrapper for Twilio Programmable Voice SDK

react-native-twilio-programmable-voice This is a react-native wrapper around Twilio Programmable Voice SDK, which allows your react-native app to make

Hoxfon 160 Oct 10, 2021
A complete and cross-platform card.io component for React Native (iOS and Android).

⚠️ Both iOS and Android SDKs have been archived As this wrapper depends on them, there is not much I can do to support new OS versions or fix bugs.. I

Yann Pringault 446 Sep 21, 2021
Facebook Account Kit SDK wrapper for React Native

React Native Facebook Account Kit A Facebook Account Kit SDK wrapper for react-native. IMPORTANT: Deprecation Notice As announced by Facebook the Acco

Underscope 320 Aug 9, 2021
React Native wrapper for Intercom.io

react-native-intercom React Native wrapper for Intercom.io. Based off of intercom-cordova Installation Guide Install Intercom for iOS via whichever me

Tiny Creative 406 Oct 12, 2021
Fabric Digits wrapper for React-Native

react-native-fabric-digits Introduction Fabric Digits wrapper for React-Native. Special thanks to the following people/projects: jpdriver for his tuto

Jean Lebrument 109 Apr 22, 2021
react native amap module for android

React Native AMap A React Native component for building maps with the AMap Android SDK. Example ... import MapView from 'react-native-amap'; class ex

老秋 22 Aug 24, 2019
A React Native module to interact with Apple Healthkit and Google Fit.

react-native-fitness react-native-fitness is a library that works on both iOS and Android with it you can interact with Apple Healthkit and Google Fit

Oval Money 262 Oct 14, 2021
react-native-digits

React Native Digits Getting Started Installation Setup iOS Setup Android Usage Properties Installation npm install react-native-digits --save Setup iO

Fixt 61 Jul 21, 2020
React Google Analytics Module

react-ga React Google Analytics Module This is a JavaScript module that can be used to include Google Analytics tracking code in a website or app that

null 4.7k Oct 15, 2021
React Native component wrapping the native Facebook SDK login button and manager

Give react-native-fbsdk a try! This project is no longer maintained. If you would like to maintain it, please reach out with a pull request. React Nat

Noah Jorgensen 1.2k Oct 9, 2021
Voximplant mobile SDK for React Native (iOS/Android)

Voximplant SDK for React Native Voximplant Mobile SDK module for React Native. It lets developers embed realtime voice and video communication into Re

Voximplant 182 Sep 29, 2021
React Native around the Agora RTC SDKs for Android and iOS agora

react-native-agora δΈ­ζ–‡ This SDK takes advantage of React Native and Agora RTC Video SDK on Android && iOS. Community Contributor The community develope

Agora.io Community 504 Oct 19, 2021
React Native Linkedin login

react-native-linkedin-login Let your users sign in with their Linkedin account. Requirements Node v4+. React Native 0.30+ Installation iOS Guide Autom

Jody Brewster 72 Oct 10, 2021
Bugfender for React Native

React Native plugin for Bugfender Getting started The Bugfender bindings for React Native depend on the native iOS and Android Bugfender SDKs. Creatin

Bugfender 15 Oct 11, 2021
A React-Native Bridge for the Google Dialogflow (API.AI) SDK

react-native-dialogflow (react-native-api-ai) A React-Native Bridge for the Google Dialogflow AI SDK. Support for iOS 10+ and Android! Dialogflow is a

innFactory 188 Aug 7, 2021
A React Native wrapper for the Twilio mobile SDK

A React Native wrapper for the Twilio mobile SDK This library implement the superseeded Twilio Client SDK. Twilio has moved to the new Programmable Vo

Roger Chapman 93 Jan 27, 2021
Realtime Cloud Messaging React Native SDK for Android

Realtime Messaging SDK for React-Native Android Realtime Cloud Messaging is a highly-scalable pub/sub message broker, allowing you to broadcast messag

Realtime Framework 52 Jun 8, 2020
React Native : Twitter Signin

Note: this guide is for TwitterKit 3.3 and ReactNative 0.56+. React Native : Twitter Signin This package provides necessary code to get your social si

null 157 Sep 3, 2021