How to change font-family of placeholder text

[desai-hardik]

How to change font-family of placeholder text

I want to change font-family of place holder text (Please refere below image for required output)

Reproduction - (required - issue will be closed without this)

1 I apply the styles inside style property but did't word (please find a screen shot)

Please provide a FULLY REPRODUCIBLE example.

<GooglePlacesAutocomplete
        ref={locationSheetRef}
        //textInputProps={{clearButtonMode: 'never'}}
        renderRightButton={() => null}
        styles={{
          textInputContainer: styles.googleInputContainer,
          textInput: styles.googleTextInput,
          placeholderStyle: {
            fontFamily: appFontStyle.fontFamily,
            fontSize: normalize(appFontStyle.fontSize),
          },
        }}
/>

also try inside textInput props

<GooglePlacesAutocomplete
      ref={locationSheetRef}
      //textInputProps={{clearButtonMode: 'never'}}
      renderRightButton={() => null}
      styles={{
        textInputContainer: styles.googleInputContainer,
        textInput: {
          placeholderStyle: {
            fontFamily: appFontStyle.fontFamily,
            fontSize: normalize(appFontStyle.fontSize),
          },
        },
      }}
    />

Additional context

• Library Version: [e.g. 2.4.1]

• React Native Version: [e.g. 0.68.2]

• [*] iOS

• [* ] Android

Help wanted here

So at which place I have to apply styles to chaneg placeholder font-family.

[Fardin96]

@desai-hardik, You can use the 'textInputProps' to add styling to your placeholder text. For example,

<GooglePlacesAutocomplete
        // other props
        textInputProps={{
          placeholderTextColor: 'white',
          fontSize: 16,
          fontFamily: ..... ,
        }}
        // other props
/>

[RyanTG]

From my experience, I had to use an additional style prop to change the fontFamily. So the above became:

<GooglePlacesAutocomplete
        // other props
        textInputProps={{
          placeholderTextColor: 'white',
          style: {
            fontSize: 16,
            fontFamily: ..... ,
        }}}
        // other props
/>

[SaadBazaz]

Need a solution for this which actually works.

[RyanTG]

The above works, bruh.

[jacquesdev]

If by works you mean has no effect at all, then yeah sure, that works...

[RyanTG]

Here's how we're using it. I solemnly swear that it is changing the placeholder font family. We are using "react-native-google-places-autocomplete": "^2.5.1",

[jacquesdev]

Hey @RyanTG - thanks for confirming. The thing that has no effect for me is placeholderTextColor: 'white',, so good to know the font works at least. I'm on the same version... I really wonder what it could be then...

[RyanTG]

Ah, I see. We aren't using that prop (I only showed it above because I was correcting the person's code for how to change the font family, which is the focus of this issue). I haven't tried it, but I would think you could change the color with a color prop within style. I'm assuming you tried that, though.

[jacquesdev]

I take it back, it works, argg! Sorry for the hassle @RyanTG