CODEWITHSUNDEEP
javascriptreact-nativeexporeact-google-places-autocomplete
coder03
coder03

Reputation: 129

How to remove google place autocomplete close icon?

I am trying to customize the close icon of google places search field, but I cannot seem to be able to remove the automatic close button. Has anyone been able to remove it? I want to only use the icon specified in the renderRightButton property to reset the location.

import React, { useState } from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';

const Component = () => (
  const [value, setValue] = useState(null);

  return (
    <div>
      <GooglePlacesAutocomplete
        selectProps={{
          value,
          onChange: setValue,
        }}
       renderRightButton={() => <Icon name='remove' onPress=(() => resetLocation)/>}
      />
    </div>
  );
}

Upvotes: 2

Views: 475

Answers (1)

coder03
coder03

Reputation: 129

I was able to find the right property to hide the clear button. If you add clearButtonMode: 'never' inside the textInputProps,it will remove the default clear button by google places autocomplete

   <GooglePlacesAutocomplete
    textInputProps={{
              clearButtonMode: 'never'
            }}
    selectProps={{
              value,
              onChange: setValue,
            }}
   renderRightButton={() => <Icon name='remove' onPress=(() => resetLocation())/>}
          />

Upvotes: 2

Related Questions