React-native-web: TextInput: support placeholderTextColor

[Hkmu]

Code

```javascript

````

Result

[RyanThomas73]

@necolas Do you have any thoughts on how you would like to approach this? I didn't want to have to implement my own placeholder functionality when browsers already support this.

Currently I have two workarounds to achieve this functionality, but I wouldn't mind contributing towards direct support if you have thoughts on how you would like to implement it.

For those that need to create a workaround I've managed to roughly support this using the below two approaches.

1) The first workaround approach I've used depends on having an id (or adding a class after the fact using ref) and inserting my own stylesheet rules. Adding the class after the fact is problematic though, because it has to render first and sometimes flickers.

2) The alternate workaround is a monkey patch to StyleManager.setDeclaration and to TextInputStylePropTypes. In the patch I check for a special style prop name 'placeholderColor'
and create a separate flow of the setDeclaration logic that generates the css in the format:
.${className}${psuedoElement} { color: ${value} }.

export class MyTextInput extends Component {
    ....
    render() {
         ... doing stuff ...
         let placeholderColorStyle = undefined;
         if( web platform ) {
               // with my monkey patch in place the placeholderColor
               // prop name generates the class name like `rn-placeholderColor-${hashValue}`
               // and then generates the css in the format `.${className}${pseudoElement} { color: ${value} }`
              placeholderColorStyle = StyleRegistry.register({ placeholderColor: calculatedPlaceholderColor }); 
         }

         const computedStyles = [.... some styles ..., placeholderColorStyle, .... remaining styles ...];
         return (
               <TextInput style={computedStyles} {...otherTextInputProperties} />
         )
    }
}  

[VinceBT]

I'd like this feature a lot

[wordyallen]

@RyanThomas73
Could you please elaborate a little more on the second approach ?

[leggomuhgreggo]

@necolas hey, apologies if this is subject of placeholderTextColor has become at all tiresome, but:

I was reviewing the patch where support was deprecated / the PRs it referenced, and it wasn't immediately clear to me what the impetus for dropping it was -- was it api inconsistencies with placeholder positioning with RN?

It's the type of thing I'd be happy to work on if you'd be able to give a little background / direction.

Appreciate your time, man, thanks.

[nikoloza]

This workaround does not solve this RN bug, but it does some trick for the web:

import React from 'react'
import { Platform } from 'react-native'

class WebPlaceholderColor extends React.Component {
  static defaultProps = {
    selector: '',
    color: '#CCC',
  }

  render() {
    const { color, selector } = this.props
    return Platform.OS === 'web' ? (
      <style>
        {`
          ${selector}::-webkit-input-placeholder { color: ${color} }
          ${selector}::-moz-placeholder { color: ${color} }
          ${selector}:-ms-input-placeholder { color: ${color} }
          ${selector}:-moz-placeholder { color: ${color} }
        `}
      </style>
    ) : null
  }
}