[TextInput] Some properties and styles seems invalid

[TooBug]

<TextInput style={styles.input} placeholder="test" placeholderTextColor="#ffffff" />

input:{
    height:50,
    color:'#ffffff',
    textAlign:'center',
    backgroundColor:'#1D1F26',
    fontSize:20
  }, 

The placeholderTextColor and textAlign has no effect. Did I miss something?

[sahrens]

Currently we don't throw or even warn if you provide unsupported react props, we'll only tell you if you provide the wrong type for a propType that is declared. It would be nice to fix this somehow :\

On Mar 26, 2015, at 7:25 PM, TooBug notifications@github.com wrote:

input:{ height:50, color:'#ffffff', textAlign:'center', backgroundColor:'#1D1F26', fontSize:20 }, The placeholderTextColor and textAlign has no effect. Did I miss something?

—
Reply to this email directly or view it on GitHub.

[TooBug]

Thanks for explanation!

In my understanding, what you mean is: If I use something that is unsupported now, react-native may not give out a warning or an error.

But, both placeholderTextColor and textAlign are in the docs, but has no effect. So I'm not sure whether I have missed something. Quite confused.

[jaygarcia]

@sahrens , what @TooBug is referring to is the props docs: http://facebook.github.io/react-native/docs/textinput.html#props

placeholder string 

The string that will be rendered before text input has been entered

placeholderTextColor string 

The text color of the placeholder string

[TooBug]

Exactly! But has no effect.

[sahrens]

Those props should work - they are used in the Movies and UIExplorer example apps.

I was specifically referring to multi line support - I don't think that is working in OSS yet and might break things if you try to use it.

-Spencer

On Mar 27, 2015, at 6:41 AM, TooBug notifications@github.com wrote:

Exactly! But has no effect.

—
Reply to this email directly or view it on GitHub.

[JonathanMatthey]

placeholderTextColor doesn't work :(

also you can see that they're not used in the Movies or UIExplorer examples:

[InfamousVague]

I'm getting issues with placeholderTextColor as well

[jlmitch5]

@wski looks like that prop is not being rendered...placeholderTextColor is not found in the render step.

react-native/Libraries/Components/TextInput/TextInput.ios.js

Lines 329 to 346 in f3cd27c

	textContainer =
	<RCTTextField
	ref="input"
	style={[styles.input, this.props.style]}
	enabled={this.props.editable}
	keyboardType={this.props.keyboardType}
	onFocus={this._onFocus}
	onBlur={this._onBlur}
	onChange={this._onChange}
	onEndEditing={this.props.onEndEditing}
	onSubmitEditing={this.props.onSubmitEditing}
	onSelectionChangeShouldSetResponder={() => true}
	placeholder={this.props.placeholder}
	text={this.state.bufferedValue}
	autoCapitalize={autoCapitalize}
	autoCorrect={this.props.autoCorrect}
	clearButtonMode={clearButtonMode}
	/>;

[jlmitch5]

@wski PR submitted #467

[jlmitch5]

psych this doesn't fix it...closing PR :(

[darylrowland]

Should textAlign: 'center' work on a TextInput? It doesn't seem to be working for me?

[InfamousVague]

@darylrowland I suspect anything listed under props here should work: http://facebook.github.io/react-native/docs/textinput.html#props but I'm not sure. If that is the case I hope more is added later. It would be super nice to be able to only have a bottom border on inputs instead of a solid full wrapped border.

I assume there are things that can be styled outside of the normal props but i can't really find good documentation other than the error message you get when you put a bad style.

[jamwise]

I'm also experiencing placeholderTextColor having no effect. It doesn't work in any of the scenarios below:

<TextInput
    autoCapitalize="none"
    autoCorrect={false}
    onSubmitEditing={this.props.onSearch}
    placeholder="Search..."
    placeholderTextColor="#ffffff"
    style={styles.searchBarInput}
/>

<TextInput
    autoCapitalize="none"
    autoCorrect={false}
    onSubmitEditing={this.props.onSearch}
    placeholder="Search..."
    placeholderTextColor="white"
    style={styles.searchBarInput}
/>

<TextInput
    autoCapitalize="none"
    autoCorrect={false}
    onSubmitEditing={this.props.onSearch}
    placeholder="Search..."
    placeholderTextColor={styles.placeholder}
    style={styles.searchBarInput}
/>
...
var styles = StyleSheet.create({
...
    placeholder: {
        color: '#ffffff'
    }
...
});

Nothing seems to work.

[nicholasstephan]

I'm seeing this too.

[drkibitz]

It looks like TextInout.js assumes placeholderTextColor is handled on the native side, when it is clearly not. placeholder is a one to one mapping of the property on UITextField, but placeholderTextColor does not, most likely needs to be implmented using UITextField's attributedPlaceholder.