TextInput with TextAlign on iOS does not add ellipsis instead wraps

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

@JNUfeatherwit

@JNUfeatherwit Adding VerticalPadding through CSS solves the issue of multiline but still no ellipsis.

@JNUfeatherwit

@JNUfeatherwit Adding VerticalPadding through CSS solves the issue of multiline but still no ellipsis.

Wow! It Actually works! Thank you

This issue is still persisting. Adding the verticalPadding does not ultimately solve the problem. Any updates?

@JNUfeatherwit

@JNUfeatherwit can you elaborate on your vertical padding solution? There is no "CSS" in react-native so that is confusing to me. Applying vertical padding in the style for a TextInput isn't changing any of the wrapping behavior for us.

Having investigated, I believe the issue is in the RCTUITextField (which backs the single-line TextInput component) implementation itself. Text content is being set to the underlying UITextField using attributedText. Attributed text strings in iOS have a default paragraph style that permits wrapping. I was able to patch RCTUITextField with the following to change the default paragraph style to truncate, and this works. We're going to run with this patch for a while to see if it's a good fix, but would love to have additional feedback on this as a solution.

In RCTUITextField.m:

- (void)setDefaultTextAttributes:(NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes
{    
  if ([_defaultTextAttributes isEqualToDictionary:defaultTextAttributes]) {
    return;
  }

  // limit single-line fields to 1-line (no wrapping)
  if ([self.textInputDelegate isKindOfClass: [RCTSinglelineTextInputView class]]) {
      NSParagraphStyle* ps = defaultTextAttributes[NSParagraphStyleAttributeName];
      NSMutableParagraphStyle* mps = [ps mutableCopy];
      mps.lineBreakMode = NSLineBreakByTruncatingTail;
      NSMutableDictionary<NSAttributedStringKey, id>* mutableDefaultTextAttributes = [defaultTextAttributes mutableCopy];
      mutableDefaultTextAttributes[NSParagraphStyleAttributeName] = [mps copy];
      defaultTextAttributes = [mutableDefaultTextAttributes copy];
  }
    
  _defaultTextAttributes = defaultTextAttributes;
  [super setDefaultTextAttributes:defaultTextAttributes];
  [self _updatePlaceholder];
}

any updates ?
any solution ?

This is the workaround mentioned above:

StyleSheet.create({
 textInput: {
  ...Platform.select({
      ios: {
        paddingVertical: 0.001, // fix line wrap issue
      },
      android: {},
    }),
 }
});

Any updates?

Just found out this bug, because I'm using react-native-paper and due to this callstack/react-native-paper#2684 issue and was able to find a solution inside the downstream issue

Shame that this issue is now 2 years old, and to me it seems critical to be resolved as beginners could stumble on this and get their frustration level rising

To clarify, adding a slight vertical padding to the TextInput element does not always work, you've got to experiment and figure out what works without overflowing the text input.

Solution below:

const styles = new StyleSheet.create({
    textInput: {
        ...(Platform.OS === 'ios' ? {paddingVertical: 10} : {})
    }
})

const Element = () => <TextInput style={styles.textInput}>

Oh... crap It needs to be fixed

@JNUfeatherwit

@JNUfeatherwit can you elaborate on your vertical padding solution? There is no "CSS" in react-native so that is confusing to me. Applying vertical padding in the style for a TextInput isn't changing any of the wrapping behavior for us.

Having investigated, I believe the issue is in the RCTUITextField (which backs the single-line TextInput component) implementation itself. Text content is being set to the underlying UITextField using attributedText. Attributed text strings in iOS have a default paragraph style that permits wrapping. I was able to patch RCTUITextField with the following to change the default paragraph style to truncate, and this works. We're going to run with this patch for a while to see if it's a good fix, but would love to have additional feedback on this as a solution.

In RCTUITextField.m:
- (void)setDefaultTextAttributes:(NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes
{    
  if ([_defaultTextAttributes isEqualToDictionary:defaultTextAttributes]) {
    return;
  }

  // limit single-line fields to 1-line (no wrapping)
  if ([self.textInputDelegate isKindOfClass: [RCTSinglelineTextInputView class]]) {
      NSParagraphStyle* ps = defaultTextAttributes[NSParagraphStyleAttributeName];
      NSMutableParagraphStyle* mps = [ps mutableCopy];
      mps.lineBreakMode = NSLineBreakByTruncatingTail;
      NSMutableDictionary<NSAttributedStringKey, id>* mutableDefaultTextAttributes = [defaultTextAttributes mutableCopy];
      mutableDefaultTextAttributes[NSParagraphStyleAttributeName] = [mps copy];
      defaultTextAttributes = [mutableDefaultTextAttributes copy];
  }
    
  _defaultTextAttributes = defaultTextAttributes;
  [super setDefaultTextAttributes:defaultTextAttributes];
  [self _updatePlaceholder];
}

Hey @TomSwift are you still using this patch or did you find any problems with it?

Issue still open in react-native 0.70.6 😢

Still an issue.

Sometimes textAlign works, sometimes not.

Hello,

Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs:

https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+

This is the suggested approach from the react-native core team (see this discussion):

I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.

The Component is based on ReactTextView, it is the same implementation from react-native.
It will include several bug fixes.
You can use the library until the PR is merged and released with react-native.
You can use side by side both components from react-native and react-native-improved, depending on where you need the fix.
I will also publish the PR to facebook/react-native (daily fixes and releases).

The advantages would be:

Increased engagement with the community, issues are quickly fixed.
No limitations when merging PRs (react-native main branch is used on facebook marketplace).
Only Meta employees can merge and review facebook/react-native PRs.
Allows us to further experiment and develop react-native.

What do you think about this? Should I keep working on this? Thanks

any updates?

Would like to see this resolved as well. It's quite pesky that even with multiline={false} there is text that is able to wrap to the next line if a TextInput is not focused.

Still doesn't work.

fix for me:
Fixed height

would be nice to have this working

Almost 4 years without a solution!

This seems like a very core issue. Basic inputs like a text field is something I think everyone would expect to work in its basic form (i.e. just input long text).

@JNUfeatherwit

@JNUfeatherwit can you elaborate on your vertical padding solution? There is no "CSS" in react-native so that is confusing to me. Applying vertical padding in the style for a TextInput isn't changing any of the wrapping behavior for us.

Having investigated, I believe the issue is in the RCTUITextField (which backs the single-line TextInput component) implementation itself. Text content is being set to the underlying UITextField using attributedText. Attributed text strings in iOS have a default paragraph style that permits wrapping. I was able to patch RCTUITextField with the following to change the default paragraph style to truncate, and this works. We're going to run with this patch for a while to see if it's a good fix, but would love to have additional feedback on this as a solution.

In RCTUITextField.m:
- (void)setDefaultTextAttributes:(NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes
{    
  if ([_defaultTextAttributes isEqualToDictionary:defaultTextAttributes]) {
    return;
  }

  // limit single-line fields to 1-line (no wrapping)
  if ([self.textInputDelegate isKindOfClass: [RCTSinglelineTextInputView class]]) {
      NSParagraphStyle* ps = defaultTextAttributes[NSParagraphStyleAttributeName];
      NSMutableParagraphStyle* mps = [ps mutableCopy];
      mps.lineBreakMode = NSLineBreakByTruncatingTail;
      NSMutableDictionary<NSAttributedStringKey, id>* mutableDefaultTextAttributes = [defaultTextAttributes mutableCopy];
      mutableDefaultTextAttributes[NSParagraphStyleAttributeName] = [mps copy];
      defaultTextAttributes = [mutableDefaultTextAttributes copy];
  }
    
  _defaultTextAttributes = defaultTextAttributes;
  [super setDefaultTextAttributes:defaultTextAttributes];
  [self _updatePlaceholder];
}

This worked for me, thank you @TomSwift

This is going to be fixed here: #45968
Basically now you need to use a prop lineBreakModeIOS with break strategy you want.

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.

Can anyone confirm that this issue can be fixed by using the lineBreakModeIOS prop?

Can anyone confirm that this issue can be fixed by using the lineBreakModeIOS prop?

I can confirm that using lineBreakModeIOS does not fix the issue.

Does anyone have a good solution to this (other than manually adding padding)? Still seeing this issue on "react-native": "0.76.7"

lineBreakModeIOS didn't work for me, but setting textAlign: 'auto' (in style) did the job

I have the same problem in RN 0.79.3...

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.

Still broken.

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.

Can confirm the issue is still present in React Native 0.88.1 on iOS 26.5 and iOS 17.5. When textAlign is set to right, a long value is truncated without an ellipsis and is aligned to the left edge instead of the right.

Navigation Menu

Repository navigation

TextInput with TextAlign on iOS does not add ellipsis instead wraps #29068

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextInput with TextAlign on iOS does not add ellipsis instead wraps #29068

Description

Activity

shreypdev commented on Jul 4, 2021

JNUfeatherwit commented on Jul 5, 2021

kokiebisu commented on Oct 1, 2021

TomSwift commented on Dec 3, 2021

mohamedanwer123 commented on Jan 17, 2022

osmyn commented on Mar 11, 2022

thiagobutignon commented on Apr 29, 2022

tiagomsmagalhaes commented on Jun 30, 2022

GameraCC commented on Aug 22, 2022

riledv commented on Aug 26, 2022

frenberg commented on Nov 30, 2022

projectnatz commented on Feb 7, 2023

mikekreeki commented on Jul 13, 2023

yourjhay commented on Oct 28, 2023

fabOnReact commented on Jan 18, 2024

sieeniu commented on Mar 25, 2024

seanmaisch commented on Apr 3, 2024

MateuszBukowski93 commented on Apr 4, 2024

TomasSestak commented on Apr 15, 2024

thiagobutignon commented on Apr 15, 2024

tibbe commented on May 2, 2024

ilight commented on May 9, 2024

shubhamguptadream11 commented on Aug 24, 2024

react-native-bot commented on Feb 21, 2025

SimpleCreations commented on Feb 22, 2025

gulshercb7 commented on Apr 29, 2025

steinalex commented on May 14, 2025

Mehdi-Abbas commented on Jun 17, 2025

DanielAraldi commented on Nov 6, 2025

react-native-bot commented on May 6, 2026

tibbe commented on May 6, 2026

react-native-bot commented on Nov 4, 2026

SimpleCreations commented on Nov 4, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions