react-native-google-places-autocomplete: react-native-google-places-autocomplete not working on React native 0.61

Hi,

I have added react-native-google-places-autocomplete with yarn in my react-native cli project but it is not working. Here are the issues I am facing at the moment.

  1. the places drop down is not showing up on IOS, however the input text field allows me to enter a place name but the predictions list does not appear

  2. onPress handler is not triggered at all on both IOS and android

  3. The Text Input coming from react-native-google-places-autocomplete does not allow me to enter anything on ANDROID. It is like disabled all the time ( although the focus is set to true)

Note: all google location apis are enabled , google maps api, places api and geocode api are enabled and a valid api key is given.

I tried all possible solutions available including the following:

  1. setting zIndex: 1000 a high value to avoid it being hidden behind some other view

  2. Tried creating new RN App and added only this component to keep the project clean

  3. Regenerating the API and even using another api which works with previous versions of REACT NATIVE.

The logs don’t show anything on both Xcode and Android Studio. Here is the code snippet:

                 <View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
				<GooglePlacesAutocomplete
					ref = {ref => setSearchTextRef(ref)}
					placeholder='Search for gym'
					styles={{
						container: {backgroundColor: 'transparent'},
						textInputContainer: styles.viewStyle,
						textInput: styles.textInputStyle,
					}}
					keyboardShouldPersistTaps = {'handled'}
					listUnderlayColor = {'transparent'}
					textInputProps = {{
						onFocus: () => focusInput(),
						onBlur: () => blurInput(),
						onChangeText: (text) => onChange(text)
					}}
					minLength={1} // minimum length of text to search
					returnKeyType={'search'}
					listViewDisplayed={'auto'}   // true/false/undefined
					fetchDetails={true}
					renderDescription={row => row.description} // custom description render
					onPress={(data, details = null) => {
						let coordinates = details.geometry.location;
						sendCoordinates(coordinates, {data, details});
					}}
					getDefaultValue={() => ''}
					query={{
						key: googleAPIKey,
						language: 'en', // language of the results
						// types: '(cities)' // default: 'geocode'
					}}
					nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
					GooglePlacesSearchQuery={{
						rankby: 'distance',
						types: 'gym'
					}}
					filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
					debounce={200}
				/>
			</View>

Thank you in advance

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 4
  • Comments: 19

Most upvoted comments

I can’t reproduce this, so i’m going to close this. If you encounter this, and this is still a problem for you, please open a new issue (please follow the issue template).

Hi guys. I had the same issue with this lib, and after trying for hours, I found a solution. The problem was in the billing configuration on the google APIs. Try to configure the project where you are using key and activate billings configurations, it solved my problem. Please let me know if it works for you.

P.S. I hope this can help you.

same issue here got stuck on this for more than 5 hours.

I’m observing the same issue but only in some scenes in my app - I’m not 100% sure that’s the cause but I suspect it won’t work because it’s inside a modal component. It works fine somewhere else in the app though.

Any thoughts?

If I can still help someone, here is what I did to fix the not showing list issue :

container: { flex: 0, },

Applied to styles of <GooglePlacesAutocomplet />

I’m not getting any list. any solution?

Am not sure if anybody else had/have this issue… I too got this error on searching I saw onFail is available. onFail={error => console.log('error' + error)} this will give you error. If suppose the error is something like This IP, site or mobile application is not authorized to use this API key. Request received from IP address $someipaddress, with empty referer. Then do create a SERVER KEY instead of normal api key. Creating a server key is same like creating api key. Under the heading Application Restrictions select IP addresses instead of none. thus you are good. This was my trouble. Hope no one else will be stuck around this. Also make sure billing is enabled for your project.

Screenshot 2020-11-01 at 12 28 50 PM

Hope this helps someone

Actually just solved it by following the steps here

Either removing onBlur in the component or adding keyboardShouldPersistTaps works

Any solution?

This package is no longer maintained and simply not working. I tried on IOS with expo. I didn’t even get a list of results. I found a other package that is working like a charm:

https://www.npmjs.com/package/react-native-places-input