How to change styling of TextInput placeholder in React Native?
You can build this functionality yourself. The placeholder is displayed when the input is empty, so you can check your state and change the fontStyle accordingly:
<TextInput
onChangeText={txt => this.setState({enteredText: txt})}
fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
style={style.input} />
For some reason this does not seem to work with fontFamily = System. So you have to explicitly specify the fontFamily.
Improving on Daniel's answer for a more generic solution
class TextInput2 extends Component {
constructor(props) {
super(props);
this.state = { placeholder: props.value.length == 0 }
this.handleChange = this.handleChange.bind(this);
}
handleChange(ev) {
this.setState({ placeholder: ev.nativeEvent.text.length == 0 });
this.props.onChange && this.props.onChange(ev);
}
render() {
const { placeholderStyle, style, onChange, ...rest } = this.props;
return <TextInput
{...rest}
onChange={this.handleChange}
style={this.state.placeholder ? [style, placeholderStyle] : style}
/>
}
}
Usage:
<TextInput2
value={this.state.myText}
style={{ fontFamily: "MyFont" }}
placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>
You can set your placeholder color by using the placeholderTextColor
prop.
<TextInput placeholderTextColor={'red'} />
Content and placeHolder of TextInput use a common style, so you can set fontWeight and fontSize for placeHolder. For another, you can set property placeholderTextColor
for TextInput