reactjsreact-nativecolorsplaceholdergoogle-places-autocomplete

How Do I Change Placeholder Text on Google Places Autocomplete Component in React Native?


I have been trying to find a way to change the placeholder text for a GooglePlacesAutocomplete Component in React Native. I have tried looking through the official documentation and did not see anything on this. Does someone have a solution to this? I have tried using props such as placeholderTextColor, which did not work for me. Thank you.

Code

<GooglePlacesAutocomplete 
                    renderLeftButton={()  => <Icon name='location'
                    type='evilicon' color={colors.middlegray} style={styles.icon}/>}
                    placeholder="Where is it?"
                    styles={toInputBoxStyles}
                    returnKeyType={"search"}
                    fetchDetails={true}
                    name="location"
                    enablePoweredByContainer={false}
                    nearbyPlacesAPI="GooglePlacesSearch"
                    debounce={400}
                    value={searchWords.searchKeyword}
                    query={{
                        key: GOOGLE_MAPS_APIKEY,
                        language: 'en'
                    }}
                    onPress={(data, details = null) => {
                        setSearch({searchKeyword: data.description});
                    }}
                    />

Solution

  • You can use textInputProps to set placeholderTextColor, like so:

    <GooglePlacesAutocomplete 
          ...
          placeholder="Where is it?"
          textInputProps={{
            placeholderTextColor: '#32a852',
            returnKeyType: "search"
          }}
          ...
          query={{
          key: GOOGLE_MAPS_APIKEY,
          language: 'en'
        }}
        onPress={(data, details = null) => {
          setSearch({searchKeyword: data.description});
        }}
      />
    

    You can see all of the prop available here