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


Solution 1:[1]

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

Solution 2:[2]

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;

Solution 3:[3]

this solution worked for me in React.js

<GooglePlacesAutocomplete
            selectProps={{
              placeholder: 'here is the placeholder text'
            }}
          />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steven Bell
Solution 2 Onkar Kole
Solution 3 sana arshed

Related Questions