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

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});
                    }}
                    />

CodePudding user response：

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

CodePudding user response：

Change placeholder vlaue in GooglePlacesAutocomplete tag.

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

const GooglePlacesInput = () => {
  return (
    <GooglePlacesAutocomplete
      placeholder='Enter your placeholder text here'
    />
  );
};

export default GooglePlacesInput;