React-native-google-places-autocomplete: Style clear button

[mbelgrader]

Is there a way to add styles to the clear button? With my current styling it is not visible, so I need to style it individually.

[NelsonPetitos]

Same issue. Found any solution ?

[NelsonPetitos]

Find a solution but you will have to change the react-native-google-places-autocomplete component.
1 - Change clearButtonMode="while-editing" to clearButtonMode="never" in GooglePlacesAutocomplete.js file
2 - Use renderRightButton property to display may be an
//Don't forget to import { Icon } from 'react-native-elements'
3 - Add onPress property on that right button to clear the inputText

[jjjjjjjjjjjjjjjjjjjj]

@NelsonPetitos You don't need to modify the source component, just pass this as a prop to your component (instead of step 1 above): textInputProps={{ clearButtonMode: 'never' }}

[vibhavagarwal5]

Hi all, I created my own clear button for android but i am facing an issue. Hoping that u guys can help me out.

Using this:

<GooglePlacesAutocomplete
                    minLength={2}
                    listViewDisplayed="auto"
                    autoFocus={false}
                    returnKeyType={'search'}
                    fetchDetails={true}
                    query={{
                        key: Config.GOOGLE_MAPS_KEY,
                        language: 'en'
                    }}
                    textInputProps={{
                        clearButtonMode: 'never',
                        ref: input => {
                            this.textInput = input;
                        }
                    }}
                    onPress={(data, details = null) => {
                        var coordinates = {
                            lat: details.geometry.location.lat,
                            lng: details.geometry.location.lng,
                            name: details.name
                        };
                        this.handleRelocation(coordinates, 'search');
                    }}
                    styles={searchBarStyle}
                    renderRightButton={() => (
                        <TouchableOpacity
                            style={styles.clearButton}
                            onPress={() => {
                                this.textInput.clear();
                            }}
                        >
                            <Icon
                                name="remove"
                                size={15}
                                style={styles.fabButton}
                            />
                        </TouchableOpacity>
                    )}
                />

Important thing: Using this.textinput.clear() for clearing the input box but i read the source code and inferred that actually there is a this.state.text where the text is stored and upon reloading the screen (having this <GooglePlacesAutocomplete /> component) the text reappears in the text input.

Any help?