How to Change Font Family for textInput Placeholder in React Native

Question

I have to change the font family for textInput's Placeholder text. If we add this secureTextEntry={true}, the mentioned font Family is set for placeholder text.

<TextInput style={styles.textboxfield}  secureTextEntry={true} placeholder="Password" />

But if we remove this secureTextEntry={true}, we can't set font-family for placeholder

<TextInput style={styles.textboxfield} placeholder="Password" />

Style is : textboxfieldd: { height: 39, backgroundColor: '#ffffff', marginBottom:0, fontFamily:'Inconsolata-Regular', },

How can I change the font family for placeholder text ?

Overwind

This is a React Native issue. A fix is scheduled to be released when RN 0.42 comes out. See the discussion here and the fix here. – Confidante

Answer 1

Try this :

<TextInput
    secureTextEntry={(this.state.email.length <= 0 && this.state.emailStatus != 'onFocus') ? true : false}
    style={styles.textboxfieldd}
    placeholderStyle={styles.textboxfieldd}
    onFocus={this.changeStatus.bind(this, 'emailStatus', 'onFocus', '')}
    onChangeText={(email) => this.setState({ email })}
    value={this.state.email}
    placeholder={this.state.emailStatusPH}
    placeholderTextColor="#D8D8D8" />

Exactly this line => secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false} solves the problem .

Because if we give secureTextEntry={true} means fontfamily is set to placeholder text but field changed as password , so for that only we wrote like this . secureTextEntry={(this.state.email.length<=0 && this.state.emailStatus!='onFocus') ?true:false}

If that field length is 0 and not focused means it will set true secureTextEntry={true} so the placeholder text is set to mentioned fontfamily

Overwind

not to be super nitpicky, but you dont need to return a boolean in a turnery. the it could be written as secureTextEntry={!this.state.email.length && this.state.emailStatus !== 'onFocus'} – Bartley

the prop placeholderStyle seems to not be documented. It also did not work for me. facebook.github.io/react-native/docs/textinput.html – Voss

"placeholderStyle" doesn't work for me either. This sounds like a great idea, am I missing something or has this been deprecated? – Sestet

This should not be the accepted answer as placeholderStyle doesn't work at least in RN 0.59. Jon Wyatt 's method of conditional styling worked for me – Meaty

Answer 2

The way I solved this was to conditionally style the fontFamily (or style) on the presence or absence of the value i.e.

<TextInput
  style={{ fontFamily: value ? 'OpenSans-Regular' : 'OpenSans-Italic' }}
  value={value}
  onChangeText={onChange}
/>

This way the font family is italic for the placeholder (when value === '') and regular when text is shown.

Above is not tested as I was using styled components but concept should be the same. Also this only works if TextInput is rendered as a controlled component so you have access to value.

Fredfreda

Answer 3

Textinput can have a Text child.

So you can have

<TextInput>
 <Text style = {value.length == 0? styles.hint : styles.input}>
  {value.length == 0? hint : value}
 </Text>
</TextInput>

Renferd

Answer 4

You can handle this by length of your password like :

  <TextInput
      secureTextEntry={this.state.password.length === 0? false : true}
  />

Gambado

Or more simply, you could say secureTextEntry={ this.state.password.length > 0 } – Lavernalaverne

Answer 5

If you want to change the font once, you can just set fontFamily: yourFontFamilyName

If you plan on using your font in many place I suggest you create a class that will use the same fontFamily everyTime :

You can do it this way : (example with Quicksand as font-family)

import React, {TextInput} from 'react-native';

import _ from 'lodash';

var OldTextInput = TextInput;

class NewTextInput extends OldTextInput {
  defaultProps = {};
  render() {
    var props = _.clone(this.props);

    if (_.isArray(this.props.style)){
      props.style.push({fontFamily: 'Quicksand-Regular'});
    } else if (props.style) {
      props.style = [props.style, {fontFamily: 'Quicksand-Regular'}];
    } else {
      props.style = {fontFamily: 'Quicksand-Regular'};
    }

    this.props = props;

    return super.render();
  };
}

export default NewTextInput; 

and then use TextInput by requiring it in every file (import TextInput from './TextInput')

Zackaryzacks

I have tried with " fontFamily: Inconsolata-Regular " but unable to change Font family For PLACEHOLDER . and i have added style above . – Overwind

Answer is not addressing actual problem about placeholder – Barlow

Answer 6

You're likely experiencing this on Android with React Native <= 0.64. In which case here's a solution:

<TextInput ref={ref => ref && ref.setNativeProps({ style: { fontFamily: 'FONT_NAME' } })} />

For more information and alternatives that might work better for you look at this issue thread on Github

Exaggerated

Answer 7

Add fontSize={20}

<TextInput style={styles.textboxfield}  secureTextEntry={true} placeholder="Password" fontSize={20}
 />

Claytonclaytonia

Answer 8

its worked for me

      fontWeight: 'normal',

good luck :)

Cenis