CODEWITHSUNDEEP
androidreact-nativelistviewgoogle-places-autocomplete
Savad
Savad

Reputation: 1314

Google Places Auto complete React native custom view

I am developing a react native app that uses react-native-google-places-autocomplete. I want to customize its list view so that it should come like a model over all other components. currently, when we search for a place the list view goes under other components. how to make it come top of all other components below is my code.

      <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='false'    // 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);
      this.setState({latitutde:details.geometry.location.lat})
      this.setState({longitude:details.geometry.location.lng})
        }}

      getDefaultValue={() => ''}

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

        styles={{

        listView: {
        backgroundColor: 'white',
        borderRadius: 5,
        flex: 1,
        elevation: 3,
        zIndex: 10
                },
        textInputContainer: {
        borderTopWidth: 0,
        borderBottomWidth:0,
        width: '90%',
        backgroundColor: 'transparent',
                            },

          }}

          //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.
           />

Upvotes: 1

Views: 2564

Answers (2)

Julia
Julia

Reputation: 11

GooglePlacesAutocomplete can be easily customized to meet styles of your app. Pass styles props to GooglePlacesAutocomplete with style object for different elements (keys for style object are listed below)

  • container
  • textInputContainer
  • textInput
  • listView
  • row
  • loader
  • description
  • predefinedPlacesDescription
  • separator
  • poweredContainer
  • powered

Example:

<GooglePlacesAutocomplete
  placeholder='Enter Location'
  minLength={2}
  autoFocus={false}
  returnKeyType={'default'}
  fetchDetails={true}
  styles={{
    textInputContainer: {
      backgroundColor: 'grey',
    },
    textInput: {
      height: 38,
      color: '#5d5d5d',
      fontSize: 16,
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
  }}
/>

Upvotes: 1

hamza liaqat
hamza liaqat

Reputation: 157

The only solution I found, when I was working on this type of issue, just wrap your code inside a container and increase the height of your container, as much as needed, then just set the container background color to transparent. Another solution is to conditionally set the height of main container equals to the height of your list view.

Upvotes: 0

Related Questions