How to change styling of TextInput placeholder in React Native?

Question

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.

Answer 1

您可以使用placeholderTextColor道具设置占位符颜色。

<TextInput placeholderTextColor={'red'} />

Answer 2

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 
  text={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

Answer 3

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.

Answer 4

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

Answer 5

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) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

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

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

Then, in my wrapped component...

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

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;

Answer 6

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:

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

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

Answer 7

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.

Answer 8

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.

Answer 9

只需更改 textInputStyle，占位符样式将更改为与 textInputStyle 相同，并且您想更改颜色使用 placeholderTextColor

Answer 10

将组件作为占位符传入对我有用