[TextInput] border formatting bug

[d-vine]

For a TextInput with multiline={ false } formatting a specific border (e.g. borderBottomWidth, borderLeftColor etc.) doesn't work.

Formatting all four border with borderWidth, borderColor etc. does work. If you make the input multiline, then single border formatting works as well.

[nicklockwood]

This isn't exactly a bug, more like a policy decision we haven't made yet. The question is - should we expose border drawing on every component, or just on <View>, and require that you use composition (or even remove it from <View> and add a new component called <BorderView>).

Happy to hear your thoughts on the matter.

[d-vine]

@nicklockwood
That is an interesting decision to make. Coming from the web I operated under the assumption that a box is a box is a box. This is a very simple and intuitive paradigm. The question is, if it's to difficult or cumbersome to enforce that for every component. React composite components shouldn't be a problem, because they always will have an outer View. So it's the native ones that could cause a headache. Unfortunately I know to little about iOS development to be able to say anything about that.

The other thing is documentation. The TextInput documentation states it includes all Text component style properties. And the Text documentation in turn says it supports the View style properties.

And also the different behavior between multiline and no multiline is odd. I guess it's because one has an outer View and the other hasn't. But it's still a bit confusing.

That all said, I wouldn't mind having to use a composite for borders. If splitting a BorderView out doesn't bring a substantial benefit in performance or maintainability I would prefer to keep it simple (and Web like) and just use view. Even though the above mentioned documentation issue is probably easier solved with a BorderView. ... It's hard :)

[pletcher]

I want to echo the need for documentation around this issue. I don't have a strong opinion either way (wrapping a TextInput in a View is simple enough), but it would be super helpful to have a note in the TextInput docs about these styling limitations.

I'd be happy to add it, but don't want to open a docs PR on an already-busy repo unless that'd be helpful.

[ide]

Please send a PR! It sounds like it would be very helpful to fellow developers reading the docs with a clarifying sentence or two.

[pletcher]

Will do! I should be able to get to that tonight.

On Wed, Aug 5, 2015 at 6:35 PM James Ide notifications@github.com wrote:

Please send a PR! It sounds like it would be very helpful to fellow
developers reading the docs with a clarifying sentence or two.

—
Reply to this email directly or view it on GitHub
#1509 (comment)
.

[pletcher]

Shoot -- forgot to link the PR a few days ago: #2240

[julipur]

are there any plans to fix this for the TextInput multiline=false?

[wootwoot1234]

I came across the bug(?) in my code too. I'm going to do my styling by wrapping my textinput in a view like @nicklockwood suggests but here is an example of the issue. Seems to me we should either fully support borders on textinputs or not at all. Right now it seems to have some support which makes it feel like a bug.

I also wanted to add that the text in the textinput will go over the border. I think the border should go over the text.

Here's an example of the bug. Hope it's helpful.
https://rnplay.org/apps/JQR56w