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!

[ghost]

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' }} />

[Manasa2903]

Not working with textAlign: 'auto', undefined. Tried as a prop for TextInput as well as in 'style'. Tried in ios simulator

[bleedweedsuz]

I tried this still not working:

<TextInput label={label} placeholder={placeholder} style={[{textAlign: 'auto'}, style ]} onChangeText={onChangeText} value={value?.toString()} />

[aannaassalam]

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 facebook/react-native#29068 (comment).
You can passdown textAlign: 'auto' to fixed it.

Hi, I have figured it out. If some else thinks that this solution is not working for you then try using it with textAlignVertical="auto" coz this, is what worked for me.

[bleedweedsuz]

@aannaassalam which version u are using coz i am using ( "react-native-paper": "^5.11.1") it's not working.
My current code which i tried:
<TextInput textAlignVertical='auto' multiline={false} numberOfLines={1} label={label} placeholder={placeholder} mode={mode} style={[{textAlign: undefined, overflow:'hidden'}, style ]} onChangeText={onChangeText} value={value?.toString()} right={right} />

i am using overflow hidden to make useable currently it look like in the example image.

Edit: after i did some tinkering, this issue only occur in mode={"outlined"} ; flat is working fine.

[m4rv4ul3r]

This bug occurs on IOS in my case. On android it seems to be rendered correct. I tried it on IOS simulator and IOS physical device as well. Both are showing the bug. So it seems to be an IOS issue.

[aannaassalam]

@aannaassalam which version u are using coz i am using ( "react-native-paper": "^5.11.1") it's not working. My current code which i tried: <TextInput textAlignVertical='auto' multiline={false} numberOfLines={1} label={label} placeholder={placeholder} mode={mode} style={[{textAlign: undefined, overflow:'hidden'}, style ]} onChangeText={onChangeText} value={value?.toString()} right={right} />

i am using overflow hidden to make useable currently it look like in the example image.

Edit: after i did some tinkering, this issue only occur in mode={"outlined"} ; flat is working fine.

Yes, you should pass it to style prop instead of passing it to the component and again there was a mistake in my comment textAlignVertical is not the correct way to do that.

[aannaassalam]

Here is my piece of working code -

<TextInput onChangeText={onChange} outlineColor="#268C43" underlineColorAndroid="transparent" activeOutlineColor="#268C43" mode="outlined" outlineStyle={{ borderRadius: 10, }} label={ <Text style={{ fontSize: 16 / fontScale, textTransform: 'capitalize', }}> {t('address')} </Text> } value={value} style={styles.textInput} placeholder={t('address')} placeholderTextColor={'#333'} keyboardType="default" editable={false} right={ <TextInput.Icon icon="crosshairs-gps" size={24} color="#268C43" onPress={getLocation} /> } />

Styles:

textInput: { backgroundColor: '#fff', fontFamily: 'ubuntu-medium', fontSize: 16 / fontScale, textAlign: 'auto', },

[mertcankose]

error still exist

[danielle-cruz]

Same error on iOS

[truonghoangpham123]

Same error on iOS

Have you solved the problem yet? You can use:

inputStyle: {
    textAlign: 'auto',
    lineHeight: undefined,
}

I think it can help you solve the problem!

[bleedweedsuz]

if this issue still exist for single line Textinput then use this code
Trick is u need to set height for non multiline. issue only in iOS. It try to accommodate the overflowing text that is why, this error
React-native-paper: version 5.11.4

Code and demo of Before and After
Before:

<TextInput mode='outlined' value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut cursus orci. Fusce condimentum leo id facilisis porttitor.'/>

After:

<TextInput style={{ height: 56 }} mode='outlined' value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut cursus orci. Fusce condimentum leo id facilisis porttitor.'/>

Note: 56 is default height for outlined

[truonghoangpham123]

if this issue still exist for single line Textinput then use this code Trick is u need to set height for non multiline. issue only in iOS. It try to accommodate the overflowing text that is why, this error React-native-paper: version 5.11.4

Code and demo of Before and After Before: <TextInput mode='outlined' value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut cursus orci. Fusce condimentum leo id facilisis porttitor.'/>

After:

<TextInput style={{ height: 56 }} mode='outlined' value='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut cursus orci. Fusce condimentum leo id facilisis porttitor.'/>

Note: 56 is default height for outlined

Yep, your results are still correct but in terms of UX, it doesn't seem very good.
The desired result is shown below.

Before:

After:

However your results are missing truncated

[john-trieu-nguyen]

Ran into the same issue when I updated the react-native-paper library.
Found a bug in release 5.10.5 that broke existing behaivour.

Have submitted a pull request #4261 which has fixed it.

Fixed as of 5.12.0

[AlexKyrdyukov]

hi everyone, I have the same problem and I am fixing it by removing it from the input styles
// // lineHeight: 15,

leaving only the fontSize

I hope this helps.

if it helped, a like is welcome