How to change styling of TextInput placeholder in React Native?

AndroidIosReact Native

Android Problem Overview

Is there a way to set fontStyle: 'italic' only for the placeholder of the TextInput in React Native?

looking here at the documentation seems like you can only set a placeholder and placeholderTextColor.

Android Solutions

Solution 1 - Android

You can set your placeholder color by using the placeholderTextColor prop.

<TextInput placeholderTextColor={'red'} />

Solution 2 - Android

Improving on Daniel's answer for a more generic solution

class TextInput2 extends Component {
  constructor(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, } = this.props;

    return <TextInput 
      style={this.state.placeholder ? [style, placeholderStyle] : style}


  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}

Solution 3 - Android

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:

  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.

Solution 4 - Android

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

Solution 5 - Android

You can also use a stateless component.

Here's my solution:

First, in my screen component...

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    this.state = {
      myText: null,
    this.handleTextOnChange = this.handleTextOnChange.bind(this);

  handleTextOnChange(myText) {
    this.setState({ myText });

  render() {
    const { myText } = this.state
  return (
        placeholder="My Placeholder Text"

Then, in my wrapped component...

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
}) => (
    style={!value ? [style, placeholderStyle] : style}

export default MyWrappedComponent;

Solution 6 - Android

If you simply want to adjust your placeholder's positioning you can wrap the inside a and add styling to the :

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"

it'll allow the placeholder align to center as sometimes 'alignContent', 'alignItems', 'justifyContent' may not work. Also:

                    borderColor: 'transparent'

to style any border lines (the one above removes any borders coming from 'react-native-elements').

Solution 7 - Android

Take a look at placeholder:

TextInput placeholder will inherit TextInput's styles. So we can set our Styles in the TextInput styles. sometimes we need a different color for placeholders, so we can easily use placeholderTextColor props for customizing.

Solution 8 - Android

I found that the styling that you assign to your text input will also apply to your placeholder text. The only property that you can set specific to the placeholder text is the color, other styling will be inherited from the text input styling.

Solution 9 - Android

Just change in textInputStyle, placeholder style will change to the same with textInputStyle, and you wanna change color use placeholderTextColor

Solution 10 - Android

Passing in a component as the placeholder is what worked for me


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZohar LevinView Question on Stackoverflow
Solution 1 - AndroidSebastián LaraView Answer on Stackoverflow
Solution 2 - AndroidJake CoxonView Answer on Stackoverflow
Solution 3 - AndroidDaniel BasedowView Answer on Stackoverflow
Solution 4 - AndroidPober WongView Answer on Stackoverflow
Solution 5 - AndroidFilip MaslovaricView Answer on Stackoverflow
Solution 6 - AndroiddhahnView Answer on Stackoverflow
Solution 7 - AndroidnimaView Answer on Stackoverflow
Solution 8 - AndroidcherucoleView Answer on Stackoverflow
Solution 9 - AndroidThoai HuynhView Answer on Stackoverflow
Solution 10 - AndroidsandypocketsView Answer on Stackoverflow