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