Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

textAlignVertical is not working in Input

See original GitHub issue

Describe the bug I want to make a multiple-line text input with placeholder at the top of the input area. However, textAlignVertical is not able to use since styles of the TextInput can’t be override

To Reproduce <Input multiline style={{textAlignVertical:‘top’, height: 200}} />

Expected behavior The placeholder displays at the top of the input area

Current behavior

Additional context I can fix the issue by adding a new overrideInputStyles property of Input, however, it seems the framework is not expecting to override the style of the TextInput.

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

2reactions

AndyOseicommented, Mar 7, 2020

@palingheorghe I looked into this issue and realized that what is causing the placeholder to be centered is styles.inputContainer inputContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }been applied to inputViewStyle. Hence overriding them by passing { justifyContent: "flex-start", alignItems: "flex-start" } should fix the issue.

Also I would open a PR to introduce a prop named textInputStyle on Input which allows TextInput styles to be overridden…

0reactions

palingheorghecommented, May 30, 2020

Closed because we’ve merged the PR into the dev branch. Thank you!

Top Results From Across the Web

textAlignVertical: center not working · Issue #26926 - GitHub

I am trying to vertically align the text inside a Text component. I tried pretty much everything ( textAlignVertical: 'center', alignItems:' ...

How to align text input correctly in react native? - Stack Overflow

The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:.

textalignvertical not working in ios react native - Code Grepper

textalignvertical not working in ios react native ; 1. { ; 2. height: 30, ; 3. textAlignVertical: 'center', ; 4 ...Platform.select({ ; 5....

TextAlignVertical class - painting library - Flutter - Dart API docs

The vertical alignment of text within an input box. A single y value that can range from -1.0 to 1.0. -1.0 aligns to...

How to Vertically Center Text with CSS - W3Docs

To position text vertically positioned with CSS you can use vertical-align, line-height, transform properties, flexbox. Learn more methods. Try examples.