react-native-google-places-autocomplete: Can not click on location from the list on android device

I got the list showing but I can not click on them (Can click on IOS Simulator but can not click on Android device) screenshot_20181207-124819_livvz

Here is my code

 <View style={[styles.containerTop]}>   
    <GooglePlacesAutocomplete
                        placeholder='Search'
                        minLength={2} // minimum length of text to search
                        autoFocus={false}
                        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
                        listViewDisplayed='auto'
                        fetchDetails={true}
                        renderDescription={row => row.description} // custom description render
                        onPress={(data, location = null) => { // 'details' is provided when fetchDetails = true
                            console.log(data);
                            console.log(location);
                        }}
                        getDefaultValue={() => this.props.currentAddress}

                        query={{
                            // available options: https://developers.google.com/places/web-service/autocomplete
                            key: 'xxxxxxxxx',
                            language: 'en', // language of the results
                            types: '', // default: 'geocode'
                        }}
                        styles={{
                            description: {
                                fontWeight: 'bold',
                                backgroundColor: 'white',
                            },
                            predefinedPlacesDescription: {
                                color: '#1faadb',
                                backgroundColor: 'white',
                            },
                            textInputContainer: {
                                backgroundColor: 'rgba(47, 111, 45, 0.0)',
                                borderBottomWidth: 0,
                                borderTopWidth: 0,
                                zIndex: 500,
                            },
                            textInput: {
                                backgroundColor: 'white',
                                borderBottomWidth: 0.1,
                                borderColor: 'rgb(47, 111, 45, 0.1)',
                            },
                            listView: {
                                marginTop: 50,
                                elevation: 1,
                                backgroundColor: 'white',
                                position: 'absolute',
                                zIndex: 500,
                            },
                        }}

                        currentLocation={this.state.currentLocationStatus} // 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={this.state.predefinedList}

                        predefinedPlacesAlwaysVisible={true}
                    />
 </View>

    containerTop: {
        height: 0,
        flexDirection: 'row',
        padding: 25,
        paddingBottom: 50,
        marginTop: (isIphoneX() ? 20 : 0),
        zIndex: 200,
    },

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 14
Comments: 17

Most upvoted comments

Looks like this might have been resolved. Please open a new issue if this is still a problem.

+12

bell-steven on May 10, 2020

What worked for me was the following (pseudo coded layout scheme):

<View flex={1}>
    <View style={{ position: 'relative', height: 50 }}>
        <Autocomplete style={{  container: { positition: 'absolute', height: 50 } }} />
    </View>
    <View style={{ flex: 1, zIndex: -1 }}>
        *ALL MY CONTENT*
    </View>
</View>

Make the header container which contains the autocomplete component have no z index stuff . and then put a negative zIndex on the container of the rest of your content. Works on my Pixel with Android 9

+10

tvillafane on Sep 13, 2019

Did you try adding the following to your ScrollView? (without disturbing any styles) keyboardShouldPersistTaps=“handled”

Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/478#issuecomment-573344080

zsooltj on Aug 2, 2021

I’m having the same issue. What I think is affecting the onPress is because the listview has been separated from the input text using the style in:

styles={{
	...
	...
	listView: {
		marginTop: 50, // This right here - remove the margin top and click on the first result, that will work.
		elevation: 1,
		backgroundColor: 'white',
		position: 'absolute', // and the absolute position.
		zIndex: 500,
	},
}}

This is a bug. The onPress on the parent component should work for the listview irrespective of the style. I will revert if I find any solution to it. Please do the same if you get it first

olayinkaokewale on Jan 8, 2019

same here on iOS, the zindex/position thing works on android, but on iOS it makes no difference

dakkafex on Jul 5, 2020