callstack / callstack/react-native-paper

TextInput multiline text does not appear centered if only one line

Open
#3,752 15 comments 7 reactions 0 assignees View on GitHub
bug TextInput
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
When TextInput has `multiline` prop, the text is vertically aligned towards the top if the input field contains only one line (screenshot 1). If the text is longer and shows two or more lines, then everything appears fine and the content is centered accordingly. (screenshot 2). You can see from the image below where i marked the spacings in red

### Expected behaviour
Text Should be centered inside the the TextInput even if it contains text which takes up only a single line.

### How to reproduce?
``

### Preview
![Screenshot 2023-03-14 at 1 41 01 PM](https://user-images.githubusercontent.com/30950825/224910782-f0b7552c-eab5-47f8-9a87-3dba8776b601.png)
![Screenshot 2023-03-14 at 1 41 19 PM](https://user-images.githubusercontent.com/30950825/224910787-88259158-e8a3-4762-b8ef-054b24b64355.png)

### What have you tried so far?
`textAlignVertical="center"` did not work. Couldn't find other issues similar to this.

### Your Environment

| software | version
| --------------------- | -------
| ios | 16
| android | 11
| react-native | 0.66.5
| react-native-paper | 4.11.2
| node | 16.17.0
| npm or yarn | 1.22.19

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied multiline TextInput example on iOS and Android, then trace the TextInput implementation and its multiline layout behavior. Confirm the result against the screenshots and verify that one-line content is centered without regressing two-or-more-line content.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.