React-native: Docs for TextInput don't say what styles it can take, incorrectly hint that they can handle all Text styles

[seanparsons]

According to the docs for TextInput it supports the same styling options as Text. In testing this at the bare minimum all of the shadow and line decoration options aren't supported.

This can be seen in this playground:
https://rnplay.org/apps/sdqbqw
If the Text element is replaced with a TextInput element with the same style the shadow is lost.

I can imagine that the native text input element isn't conducive to supporting shadows, which is why this is happening.

[seanparsons]

@dimitrovskif So far I've only tested this on iOS.

[seanparsons]

@dimitrovskif I've not, but since it works for Text and not TextInput it doesn't really matter either way. The docs list it as being possible when it isn't.

[seanparsons]

@dimitrovskif I'm really not sure what point you're trying to make, it shouldn't make any difference what Apple or Google support natively in their controls. The docs should represent what is supported by React Native, leaving everyone to find it out blindly (some of them are explicitly listed as being only available on iOS as well) isn't a great experience for anyone.

[grabbou]

@dimitrovskif in fact, our docs are saying it accepts the same style https://facebook.github.io/react-native/docs/textinput.html#style

@seanparsons you can wrap your <TextInput /> children with <Text /> and that will give you all these things. Here's the relevant line in example app: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TextInputExample.ios.js#L228. You can find it in the app under -> TextInput -> Attributed text (at the end)

I think docs need some clarifying.

Here's the rnplay: https://rnplay.org/apps/EdJtJQ

And image:

[lacker]

Yeah, these docs are pretty bad right now - in particular https://facebook.github.io/react-native/docs/textinput.html#style says nothing but that should probably be a concise description of which styles work and which don't.

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[ajostergaard]

Given that the docs still don't actually say which styles will actually work don't you think closing the issue is premature?

[hramos]

Good point. I've been tackling docs issues, so I'll just assign this to myself.

[xaviervia]

Coming here from the documentation about TextField: it seems that replacing the font family is not working on Android. Is this one of the styles that is not supported? I’m surprised that I did not find any issue specifically about that, so I think I might have missed something.

[RUIFERNANDE5]

I'm having trouble setting in paddingVertical on multiline inputs. Any known issue?

[Amurmurmur]

@RUIFERNANDE5 use marginVertical 👍

[zeddysoft]

Hi @hramos ! I am new to Open Source and want to dive into this issue, though i could see you have assigned it to yourself, it is possible you re-assign it to me so i can get started with contributing.

[hramos]

Sure! Thanks for volunteering 🙌

[hramos]

All yours

[zeddysoft]

Hi @hramos , to get started, i guess i would have to check out Text styles that do not work for TextInput component and list them because the doc has already being updated with the below hint:

'Note that not all Text styles are supported, see Issue#7070 for more detail.'

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[marcind]

Hi, this is still not resolved: http://facebook.github.io/react-native/releases/0.50/docs/textinput.html Please reopen and throw together a simple bullet point list of what is supported.

[hramos]

@marcind please open a PR and I'll take a look

[marcind]

Sorry, I'm not familiar with the internal workings of react-native so wouldn't know where to start to figure this out (other than trying every style property in some sample to see what works and what does not). I was hoping that someone who maintains this project has enough knowledge to quickly provide a list.
I found this issue while trying to determine why my code was not working and was dismayed that it keeps getting closed by a bot.
Anyway, here's the PR: https://github.com/facebook/react-native/pull/16346