React-native-google-places-autocomplete: Not working in IOS

Created on 17 Oct 2018  路  3Comments  路  Source: FaridSafi/react-native-google-places-autocomplete

i'm typing but nothing happens, it works fine in android but doesn't display dropdown in IOS.

<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'    // true/false/undefined
          fetchDetails={true}
          renderDescription={row => row.description} // custom description render
          onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
            console.log(data, details);
          }}

          getDefaultValue={() => ''}

          query={{
            // available options: https://developers.google.com/places/web-service/autocomplete
            key: 'xxxxxxxxxxxxxxxx',
            language: 'en', // language of the results
            types: '(cities)' // default: 'geocode'
          }}

          styles={{
            textInputContainer: {
              width: '100%'
            },
            description: {
              fontWeight: 'bold'
            },
            predefinedPlacesDescription: {
              color: '#1faadb'
            }
          }}

          currentLocation={true} // 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={[homePlace, workPlace]}

          debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
        />

Most helpful comment

SOLVED!! by adding this
listView: {
top:40,
position: 'absolute',
height: require('Dimensions').get('window').width,
width: require('Dimensions').get('window').width,
}

All 3 comments

SOLVED!! by adding this
listView: {
top:40,
position: 'absolute',
height: require('Dimensions').get('window').width,
width: require('Dimensions').get('window').width,
}

SOLVED!! by adding this
listView: {
top:40,
position: 'absolute',
height: require('Dimensions').get('window').width,
width: require('Dimensions').get('window').width,
}

where and how did you put it?

Add this in Styles for GooglePlacesAutocomplete like ..

<GooglePlacesAutocomplete styles={{ textInputContainer: { backgroundColor: 'rgba(0,0,0,0)', borderTopWidth: 0, borderBottomWidth:0 }, textInput: { marginLeft: 0, marginRight: 0, height: 38, color: '#5d5d5d', fontSize: 16 }, predefinedPlacesDescription: { color: '#1faadb' }, listView: { top:40, position: 'absolute', height: Dimensions.get('window').width, width: Dimensions.get('window').width, } }} />

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RajanPN picture RajanPN  路  3Comments

tgreco picture tgreco  路  3Comments

yasirdev picture yasirdev  路  3Comments

sohel-tech picture sohel-tech  路  3Comments

nikohosn picture nikohosn  路  3Comments