Change the color of a TextInput placeholder with Styled Components in React Native

Question

How do you set the color of TextInput its placeholder with Styled Components in React Native?

I tried the following without any luck:

1.

const Input = styled.TextInput`
   border: 1px solid green;
   display: block;
   margin: 0 0 1em;

   ::placeholder {
       color: green;
   }
`

2.

const Input = styled.TextInput`
   border: 1px solid green;
   display: block;
   margin: 0 0 1em;

   &::placeholder {
       color: green;
   }
`

Soekarno

Answer 1

The best way to make this:

export const Input = styled.TextInput.attrs({
  placeholderTextColor: "red"
})`
  background-color: "#000";
`;

Quadrature

This works for me but I can't access the theme object to get the colors. hard coded values seem to work fine. – Willyt

@HaseebBurki try color: ${themeColor}; – Rolanda

Thank you for this! I've been trying to do something similar but had ended up just adding the placeholderTextColor attribute to the element in JSX instead of putting it into my styled components. This is almost exactly what I needed. The only thing I had to change is that I wanted to use a theme object that's passed in as props so my final working code looks like export const RecoveryQuestionTextInput = styled.TextInput.attrs(props => ({ placeholderTextColor: props.theme.guide_placeholder, })) – Rothwell

Answer 2

you can try:

export const NewTodo = styled.input`
  padding: 16px 16px 16px 60px;
  font-weight: 300;
  font-size: 15px;
  ::placeholder,
  ::-webkit-input-placeholder {
    color: red;
  }
  :-ms-input-placeholder {
     color: red;
  }
`;

How do I style an input placeholder with Styled Components?

Fisk

That doesn't work for me. Only &::placeholder works (with two semicolons). – Flirtatious

Answer 3

Adding on to @Fernando Pascoal Gomes's answer, if you wish to access the theme object, consider passing a function to .attrs() that returns an object that the component inherits for its props.

For your case, TextInput accepts a placeholderTextColor prop, so it might look like this:

const Input = styled.TextInput.attrs((props) => ({
  placeholderTextColor: props.theme.palette.placeholderColor,
}))`
  background-color: #fff;
  color: #000;
  ...
`

Kersten

This should be the accepted answer since it's more complete. I know that in the comment on the accepted answer is the same thing, but still – Pyrone

Answer 4

You cannot style the placeholder color with styled-components directly, but you can pass the placeholderTextColor property to your styled Textinput.

Example:

const Input = styled.TextInput`
   border: 1px solid green;
   display: block;
   margin: 0 0 1em;

`

and then inside your render function:

<Input placeholder="hello" placeholderTextColor="green" />

Output:

Working example:

https://snack.expo.io/rybp-nKaE

Sapsucker

Ok, thanks. Of course, this is not what I hoped. How can I know which properties are possible and which not? Is this somewhere documented? – Soekarno

@Soekarno This is not really documented, but everything which is related to specific browsers is not supported. Like for example ::placeholder and so on – Sapsucker

Answer 5

Not sure why this answer is so outdated, but none of these worked for me, it was as simple as this:

export const SearchInput = styled.input<MTStyledProps>`
    
    &::placeholder {
        color: ${onlyTheme.color.lightGrey};
    }

`;

Youngran

Actually, you would need the webkit to ensure it works, &::-webkit-input-placeholder – Angelynanger

Answer 6

To change the textinputs placeholder's text color user prperty "placeholderTextColor" eg

<TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        placeholder = 'Enter text'
        placeholderTextColor = 'red'
        value={this.state.text}
      />

Telpher