I am not able to see the list of addresses.

[ravi2611gupta]

Describe the problem

I am not able to see the list of addresses I am starts typing in the input box. I am using this library in my react-native CLI project and the version of react-native is 0.72.3, If there is any issue in my code or I forgot any step then please let me know because it is really very urgent to me.

Here is my code!

import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { COLORS, SIZES, SPACING } from '../../lib/theme';
import { MAP_KEY } from '../../lib/utils';

const AddressPicker = ({
	setRegion,
	region,
}: {
	setRegion: any;
	region: any;
}) => {
	return (
		<GooglePlacesAutocomplete
			placeholder="Search location"
			fetchDetails={true}
			GooglePlacesSearchQuery={{
				rankby: 'distance',
			}}
			onPress={(data, details = null) => {
				console.log(data, details);
				setRegion({
					latitude: details && details.geometry.location.lat,
					longitude: details && details.geometry.location.lng,
					latitudeDelta: 0.0922,
					longitudeDelta: 0.0421,
				});
			}}
			query={{
				key: MAP_KEY,
				language: 'en',
				location: `${region.latitude}, ${region.longitude}`,
			}}
			styles={{
				container: {
					backgroundColor: COLORS.white,
					height: 48,
					borderRadius: SIZES.base,
					color: COLORS.gray,
					borderWidth: 2,
					marginTop: SPACING.small,
				},
			}}
		/>
	);
};

export default AddressPicker;

Additional context

• Library Version: 2.5.1

• React Native Version: 0.72.3

• [x] Android

• [x] iOS

• [ ] Web

If you are using expo please indicate here:

• [ ] I am using expo

Add any other context about the problem here, screenshots etc

[kyadalu1]

https://www.youtube.com/watch?v=vA9hVdE4UkI

[misterlib]

I ran into the same thing and found that wrapping the component in a larger view solved it:

    <View
        style={{
            margin: 12,
            backgroundColor: "transparent",
            zIndex: 10,
            height: 500,
        }}
    >
        <GooglePlacesAutocomplete ... />
    </View>

[Motoxpro]

I ran into the same thing and found that wrapping the component in a larger view solved it:

    <View
        style={{
            margin: 12,
            backgroundColor: "transparent",
            zIndex: 10,
            height: 500,
        }}
    >
        <GooglePlacesAutocomplete ... />
    </View>

This helped me get this working in a Modal. List wouldn't show up without setting a parent zIndex > 0