How to change the font family for textInput Placeholder in React Native

Question

I need to change the font family to textInput Bookmark Text. If we add this secureTextEntry={true} , the mentioned Family font will be set for the placeholder text.

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

But if we remove this secureTextEntry={true} , we will not be able to set the font family for placeholder

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

Style: textboxfieldd: {height: 39, backgroundColor: '#ffffff', MarginBottom: 0, FontFamily: 'Inconsolata-Regular',},

How to change font family for placeholder text?

Answer 1

Try the following:

 <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" /> 

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

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

If this field length is 0 and not focused, it will set true secureTextEntry = {true} so that the placeholder text is specified as mentioned fontfamily

Answer 2

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

If you plan to use your font in many places, I suggest you create a class that uses the same fontFamily everyTime:

You can do this as follows: (Quicksand example as a 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, requiring it in each file ( import TextInput from './TextInput' )