react-native: 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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 26
Comments: 27 (2 by maintainers)

Commits related to this issue

[DK-1072] use same settings for all open questions (metadata or not) a bug in React Native: https://github.com/facebook/react-native/issues/29068 before this is fixed, use multiline for now — committed to DropthoughtSDK/dropthought-rn-sdk by kingchen-bct 4 years ago

Most upvoted comments

This is the workaround mentioned above:

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

osmyn on Mar 11, 2022

Oh… crap It needs to be fixed

riledv on Aug 26, 2022

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

shreypdev on Jul 4, 2021

I am also seeing this issue on “react-native”: “0.61.5”

cameronbell on Sep 23, 2020

Still an issue.

mikekreeki on Jul 13, 2023

Just found out this bug, because I’m using react-native-paper and due to this https://github.com/callstack/react-native-paper/issues/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

tiagomsmagalhaes on Jun 30, 2022

@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];
}

TomSwift on Dec 3, 2021

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

kokiebisu on Oct 1, 2021

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

Wow! It Actually works! Thank you

JNUfeatherwit on Jul 5, 2021

Any Solution?

JNUfeatherwit on Jun 8, 2021