TextInput: long text results in linebreak

[Hektar90]

Current behaviour

Typing a long text in TextInput and unfocusing it breaks the line

Expected behaviour

Text is cut off at the end and is only visible by scrolling while editing

Code sample

Screenshots (if applicable)

What have you tried

set numberOfLines to 1 and multiline to false

Your Environment

software	version
ios or android	ios
react-native	0.63.4
react-native-paper	4.7.2
node	12.14.0
npm	6.13.4
expo	-

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• npm (found: 6.13.4, latest: 7.6.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[dingziqi]

It seems to be caused by the textAlign, only when textAlign: default, the ellipsis will work corectly。This is the bug of react-native, see the issues.

You can passdown textAlign: 'auto' to fixed it.

[Hektar90]

It seems to be caused by the textAlign, only when textAlign: default, the ellipsis will work corectly。This is the bug of react-native, see the issues.

You can passdown textAlign: 'auto' to fixed it.

Unfortunately this is not working. Either adding textAlign:'auto' | 'left' | 'right' nor leaving the property out to take the default has no effect (#2445 I am using the latest paper version).
The latter leads to an type error saying textAlign needs to be set (see #2558).

EDIT: I've added textAlign: 'auto' in the style and this fixed the issue. First I thought you mean the textAlign property of TextInput. Now it's clear for others i hope.

[shllg]

I my case textAlign: 'auto' does not work.

Additionally, I recognized the following behavior in development:

• changing the vertical padding will "adjust" the component correctly. The ellipsis is still missing but the content is in one line
• entering any text and remove it again results again in line breaks

Initially, it renders correctly (except of missing ellipsis) and changes result in line breaks.

[mohamedanwer123]

This issue still occur

[lirimkrosa]

In my case textAlign={undefined} it works!

Still reproduce such issue

[joaoVictorDeAndrade]

In my case textAlign={"auto"} works, but the placeholder is no longer centered

[LorianAtashi01]

For people that use styled-components together with react-native-paper just add into your styling text-align: auto and it works:

const StyledInput = styled(TextInput)" background-color: transparent; text-align: auto;"

[ademagic]

Still seeing this issue. Adding textAlign: 'auto' or textAlign: undefined to the styles of the TextInput component doesn't seem to make a difference. I can see the textAlign property working with other values, but "auto" (or any other value) doesn't fix it.

[victoriomolina]

Same here

[simonbengtsson]

For me adding textAlign: 'auto' works.

Only <TextInput />:

With fix: <TextInput style={{ textAlign: 'auto' }} />