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

• Android

• 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