Tukukkk

I am using react-native-google-places-autocomplete. When the user types a location, the search options appear and the user is then able to select a location.

However, the search options still appear after the user has pressed and selected a location.

How to make sure the search options disappear after the user has selected a location.

Below is my component:

   <GooglePlacesAutocomplete

              placeholder='Business Location'

              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

                this.setState({ location: data.description });

                this.validateLocation();

              }}

              getDefaultValue={() => ''}

              query={{

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

                key: 'XXXXXXXXXXXXXXXXXXXXXXXX',

                language: 'en', // language of the results

                types: 'geocode' // default: 'geocode'

              }}

              styles={{

                                textInputContainer: {

                                 backgroundColor: 'white',

                                  width: 0.8*width,

                                  marginLeft: 0.1*width,

                                  height: 0.1*height,

                                   zIndex: 1,

                                  borderTopWidth: 0,

                                  borderBottomWidth: 1,

                                  borderColor: 'black'



                                }

                              }}

              //currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list

              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: ''

              }}

              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.

              value={this.state.location}

              onChangeText={(location) => {

                this.setState({ location });

                this.validateLocation();

              }}

              //renderLeftButton={()  => <Icon name="map-marker" size={28} color="#000" style={{ marginTop: 0.015*width }} />}

              //renderRightButton={() => <Icon name="rocket" size={30} color="#900" />}

           />