How to Change Font Family for textInput Placeholder in React Native - 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

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>

Answer 4

You can handle this by length of your password like :
<TextInput
secureTextEntry={this.state.password.length === 0? false : true}
/>

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')

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

Answer 7

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

Answer 8

its worked for me
fontWeight: 'normal',
good luck :)