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 ?

Answer 1

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.

Answer 2

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