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

[roshan-p]

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

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

[steventilator]

I'm having the same issue. Have you managed to solve it?

[olayinkaokewale]

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

[steventilator]

In my case, I had it wrapped in a KeyboardAvoidingView with behavior={'position'}. The problem was that the touchable area stayed below the keyboard. Setting behavior={'padding'} on Android solved the problem.

[RWOverdijk]

The problem is the zIndex. zIndex + Android = 🔥

It might be _visible_ but it messes with the touch events. I simply added it some levels up to make sure it's on top, removed zIndex, and it worked.

[Traineau]

Having the same issue, and since my GooglePlaces component is wrapped inside a View like yours, if i don't set the position: "absolute" it get's hidden by my view. Any reliable solution for this ? I don't get how the previous comments handled this...

[arys]

@roshan-p any updates?

[roshan-p]

Sorry I don't use it anymore because I can't find a way to fix it.
So I used Place Autocomplete API instead and display the result in ScrollView. It is easier to custom and I don't get the problem like this anymore.

https://developers.google.com/places/web-service/autocomplete

[arys]

@roshan-p ok, thanks for reply!

[tvillafane]

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

[bell-steven]

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

[kelvin-dev]

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

Please reopen the issue, i just got it

[bell-steven]

@kelvin-dev please open a new issue if you are having a problem.

[dakkafex]

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

[dalton-cole]

Removing position: 'absolute' from the listView style object fixed this for me on android.

[tgreco]

I want my list view below my component at a certain position so I need position: 'absolute'.
Any solution to this? Touch doesn't work on the results if you have it...

[zsooltj]

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