CODEWITHSUNDEEP
react-native
Aarsh Oza
Aarsh Oza

Reputation: 192

I am using react-native-google-places-autocomplete to search for places and not able to configure for zip code

I have integrated https://github.com/FaridSafi/react-native-google-places-autocomplete successfully and now need only to know how to get suggestions from zip-code . Example: When i write '35801' in search text-input, It should give me 'Huntsville, AL' in suggestions instead other all address, 'Huntsville, AL' should be prioritised

My autocomplete component

<GooglePlacesAutocomplete
  placeholder='Search'
  minLength={2}
  autoFocus={false}
  returnKeyType={'search'}
  keyboardAppearance={'light'}
  listViewDisplayed={false}
  fetchDetails={true}
  keyboardShouldPersistTaps="handled"
  renderDescription={row => row.description}
  onPress={(data, details = null) => {
    console.log(data,details);
    this.setState({location:data.structured_formatting.main_text, user_long:details.geometry.location.lng, user_lat: details.geometry.location.lat })
  }}
  enablePoweredByContainer={false}
  getDefaultValue={() => ''}
  textInputProps={{
    ref: (input) => {this.fourthTextInput = input}
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'api-key',
    language: 'en',
    region: "US", //It removes the country name from the suggestion list
    types: '', // default: 'geocode'
    components: 'country:us'
  }}
  styles={{
    container: {width:width/1.4}
    textInputContainer: {
      backgroundColor: 'transparent',
      margin: 0,
      width: width / 1.4,
      padding:0,
      borderTopWidth: 0,
      borderBottomWidth:0
    },
    textInput: {
      textAlign: 'center',
      minWidth: width/1.4, 
      borderColor: "#cbb4c0",
      borderBottomWidth: 1,
      color: '#5d5d5d',
      fontSize: 14,
    },
    description: {
      color:'#ac879a',
      fontWeight: '300'
    },
    predefinedPlacesDescription: {
      color: '#1faadb'
    }
  }}
  currentLocation={false} 
  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',
    type: 'cafe'
  }}    
  GooglePlacesDetailsQuery={{
    // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
    fields: 'formatted_address',
  }}
  filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
  debounce={200}
/>

Upvotes: 2

Views: 5948

Answers (3)

Oussama Khelifi
Oussama Khelifi

Reputation: 1

 function extraireInformations(adresse) {
  const regexRue = /<span class="street-address">(.*?)<\/span>/;
  const regexCodePostal = /<span class="postal-code">(.*?)<\/span>/;
  const regexLocalite = /<span class="locality">(.*?)<\/span>/;
  const regexPays = /<span class="country-name">(.*?)<\/span>/;

  const rue = adresse.match(regexRue)[1];
  const codePostal = adresse.match(regexCodePostal)[1];
  const localite = adresse.match(regexLocalite)[1];
  const pays = adresse.match(regexPays)[1];

  const informations = {
    localite: localite,
    rue: rue,
    pays: pays,
    codePostal: codePostal,
  };

  return informations;
}

<GooglePlacesAutocomplete
    placeholder="Search"
    onPress={(data, details = null) => {
     const address = extraireInformations(details?.adr_address);
     console.log(address)
    }}
    query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en",
    }}
  />

Upvotes: 0

Mariana Reis Silveira
Mariana Reis Silveira

Reputation: 311

The zipcode or postal code is found inside "details" returned from the onPress event.

It'll actually be inside an array of objects (address_components) inside it.

The thing is that its position can vary.

The best way I found was to iterate this array looking for the type "postal_code".

Here is what has worked for me:

const [postalCode, setPostalCode] = useState("")

return (
    <GooglePlacesAutocomplete
        placeholder='Search'

        onPress={(data, details) => {

            for (let i = 0; i < details.address_components.length; i++) {
               
                if (details.address_components[i].types[0] === "postal_code") {
                    setPostalCode(details.address_components[i].long_name)
                }

            }
        }}
        
        enablePoweredByContainer={false}
        fetchDetails={true}
        onFail={(error) => console.log("Error at finding location: ", error)}
        query={{
            key: googleKey,
            language: "en",
        }}
    />
)

Edited in 08/07/21

Another option is to split the string received on details.formatted_address.

This might be easier.

I hope it hepls!

Upvotes: 1

Steven Bell
Steven Bell

Reputation: 1989

You can use the '(region)' type in the query prop.

<GooglePlacesAutocomplete
    placeholder="Search"
    onPress={(data, details = null) => {
      // 'details' is provided when fetchDetails = true
      console.log(data, details);
    }}
    query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
    }}
  />

If you are looking to only search within a specific country use:

query={{
      key: GOOGLE_PLACES_API_KEY,
      language: "en", // language of the results
      types: "(regions)",
      components: "country:us",
    }}

Upvotes: 0

Related Questions