react / react/react-native

TextInput with TextAlign on iOS does not add ellipsis instead wraps

Open
#29,068 37 comments 33 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Needs: Attention Needs: Environment Info Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

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.
image

Write similar text into the second field.
image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the provided React Native App example, focusing on the TextInput entry point and comparing unfocused fields with and without textAlign. Check the iOS and Android TextInput behavior for long, space-separated text. Done means the aligned input handles overflow as specified on iOS, with the platform behavior clarified or covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, ios, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.