Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Android > TextInput]: Render Multiline Text at start instead of center? #13897

Closed
joncursi opened this issue May 10, 2017 · 8 comments
Closed

[Android > TextInput]: Render Multiline Text at start instead of center? #13897

joncursi opened this issue May 10, 2017 · 8 comments
Labels
Resolution: Locked This issue was locked by the bot.
Projects
Better <TextInput>

Comments

@joncursi
Copy link
Contributor

joncursi commented May 10, 2017 •
edited

If you assign a height style to TextInput, on iOS the placeholder & actual text will render at the start of the container. However on Android, the placeholder & text will render at the center.

Code:

<TextInput
  ...
  style={{ height: 100 }}
  ...
/>

Result:

screen_shot_2017-05-10_at_10_08_55_am

I'd like to get Android to render at the start, but applying flex / alignItems / justifyContent styles don't seem to have any effect.
@fagerbua
Copy link

On Android, you need to set textAlignVertical: "top" in the style prop to TextInput. Not well documented.

@joncursi
Copy link
Contributor Author

Thank you @fagerbua !

@bodaso bodaso mentioned this issue May 17, 2017
Closed
@shergin shergin added this to Uncategorized in Better <TextInput> Jun 1, 2017
@pandiaraj44
Copy link
Contributor

Thanks, @fagerbua,

I have tried with align-items, justify-content and text align but nothing worked. After adding textAlignVertical: "top", It's worked.

Really, Awesome.

@luck2011
Copy link

Thanks! Saved my day @fagerbua

@yanhaijing
Copy link

thanks

@iamtekeste
Copy link

Thanks @fagerbua !!! I spent almost half a day trying to figure it out!

@fagerbua
Copy link

Issue closed, but should the default behavior on Android and iOS differ like this? If not, perhaps this should be re-opened as a bug report?

@mattyclarkson
Copy link

It's also really annoying that you cannot do the opposite on iOS, i.e put textAlignVertical: 'center' and get the Android behaviour. It's supported by the native widget

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
No open projects
Better <TextInput>
Uncategorized
Milestone
No milestone
Development

No branches or pull requests
8 participants
@luck2011 @mattyclarkson @iamtekeste @fagerbua @yanhaijing @joncursi @pandiaraj44 @react-native-bot