Repository navigation
TextInput with TextAlign on iOS does not add ellipsis instead wraps #29068
Description
import React, { PureComponent } from 'react';
import {Text, TextInput, View} from 'react-native';
const App = () => {
return (
<View style={{flex: 1, justifyContent: 'center'}}>
<View>
<Text>Text Input without alignment</Text>
<TextInput style={{padding: 10, margin: 20, borderColor: 'grey', borderWidth: 1}}/>
<Text>Text Input with right alignment</Text>
<TextInput textAlign={'right'} style={{padding: 10, margin: 20, borderColor: 'grey', borderWidth: 1}}/>
</View>
<TextInput/>
</View>);
};
export default App;
Write some long text into the first field with spaces.
Write similar text into the second field.
Unfocus second input
Expected: both fields will have ellipsis at the end
Actual: second input with textAlign doesn't have ellipsis.
Android app works in a different way:
It never shows ellipsis but if you type a long string it always shows the end of it and never beginning. I guess it should move to begin when unfocused.
react: 16.11.0 => 16.11.0
react-native: 0.62.1 => 0.62.1
Reacted by Muhammad Saqlain, Syeda Maidah Rizvi, MuhammadAhmed1994, Habib Ali, ekoooo, kingchen-bct, Anton, Morgane Legros, Christian, Anatolii Makarov and 23 more
Activity
github-actions commentedon Jun 5, 2020
react-native infoin a console.msaqlain commentedon Jul 6, 2020
Any Update? Its been 1 month now.
msaqlain commentedon Aug 24, 2020
Comment. Just to keep this thread active.
cameronbell commentedon Sep 23, 2020
I am also seeing this issue on "react-native": "0.61.5"
xanderdeseyn commentedon Nov 12, 2020
Same on 0.63.3
[DK-1072] use same settings for all open questions (metadata or not)
JNUfeatherwit commentedon Jun 8, 2021
Any Solution?
24 remaining items
SimpleCreations commentedon Feb 22, 2025
Can anyone confirm that this issue can be fixed by using the
lineBreakModeIOSprop?gulshercb7 commentedon Apr 29, 2025
I can confirm that using lineBreakModeIOS does not fix the issue.
steinalex commentedon May 14, 2025
Does anyone have a good solution to this (other than manually adding padding)? Still seeing this issue on "react-native": "0.76.7"
Mehdi-Abbas commentedon Jun 17, 2025
lineBreakModeIOS didn't work for me, but setting textAlign: 'auto' (in style) did the job
DanielAraldi commentedon Nov 6, 2025
I have the same problem in RN 0.79.3...
react-native-bot commentedon May 6, 2026
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
tibbe commentedon May 6, 2026
Still broken.
react-native-bot commentedon Nov 4, 2026
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
SimpleCreations commentedon Nov 4, 2026
Can confirm the issue is still present in React Native 0.88.1 on iOS 26.5 and iOS 17.5. When
textAlignis set toright, a long value is truncated without an ellipsis and is aligned to the left edge instead of the right.