React-native: Inconsistent text behavior in TextInput between iOS and Android

[davidlongest]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v:

react-native-cli: 2.0.1
react-native: 0.45.1

(edit: it reproduces in 0.54.2 according to the comments -@hramos)

1. node -v: v7.7.2
2. npm -v: 4.1.2
3. yarn --version (if you use Yarn): N/A

Then, specify:

1. Target Platform (e.g. iOS, Android): Android
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOS Sierra 10.12.5
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Android Studio 2.3.2. Compile SDK 23. Build tools 23.0.1

Steps to Reproduce

1. Create a TextInput that fits 100% width of the screen
2. Set the TextInput's value to a string that will render larger than the width of the text view
3. Run in Android and note which part of the string renders
4. Run in iOS and note which part of the string renders

Expected Behavior

Both iOS and Android should exhibit the same behavior and display the beginning of the text when unfocused.

Ideally, the ellipsis should also be an optional parameter to display when unfocused on both Android and iOS.

Actual Behavior

iOS displays the beginning of the text, ellipsizing the remaining text before truncating.

Android displays the end of the text with no ellipsis at the beginning.

Reproducible Demo

Example project: https://snack.expo.io/S1Lty1oN-
To view the issue, launch the example project and preview in Android. Then preview in iOS. Note the differences between where ellipsis show and which part of the sentence displays.

[davidlongest]

This seemed similar to #12322 but I felt this was different since this is about ellipsizing and the difference between iOS and Android in which part of the text displays as opposed to two different TextInputs on Android displaying differently.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[scottmas]

Yes, I can confirm this is still happening on the latest version of React Native. This should be re-opened

[hramos]

v0.53 or v0.54?

[scottmas]

Oh, my mistake. It is happening in v0.52

[scottmas]

I can't confirm whether it is or isn't happening in v0.53 or v0.54

[chunshien]

0.54.2 still having the same issue

[ashwanipayal]

I am facing this issue too.

[peterdoboz]

Is there any updates for this issue ?

[quadsurf]

I can confirm that this is happening on both RN52 and RN54. In Android, this essentially forces the user to read from right to left. Note to Google, in English, we start reading from left to right. In English, we don't start at the end of a sentence and then work our way backwards. This isn't Arabic or Hebrew. I'm baffled why Android would have this as their default... this shouldn't be something the RN team should have to override. I get that Android serves an international audience, but the default should support the more/most common languages' settings.
@andhie @XinyueZ @tiembo

https://issuetracker.google.com/issues/112785365

[andhie]

Hi @quadsurf,
not sure why you would tag me as i'm not part of Google or Android team.
but to answer your question. i could not reproduce the issue you mentioned. Thus i can only conclude its React Native issue.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="@string/app_name"
            android:textAppearance="?android:textAppearanceLarge" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:singleLine="true"
            android:text="@string/app_name"
            android:textAppearance="?android:textAppearanceLarge" />
    </LinearLayout>

</ScrollView>

[MickaelNeves]

0.57.1 still having this issue. Very sad behavior if we have a long text in Android.

[MickaelNeves]

Any update on this?

[celineotter]

0.56.1 still having this issue.

[FRizzonelli]

@hramos @cpojer This is still happening on latest 0.59 and 0.60. I see that you moved it to Triage Group but it's marked as closed.

Is there any ETA on this fix? Or at least a workaround we can use, _numberOfLines_ isn't helping and _selection_ property isn't perfect and you can't add ellipsis.

[barakoles]

This is quite bad.. no solution so far

[felire]

Why did you close the issue? It's still happening

[nikolamilev-cwl]

Can confirm this is still an issue in 0.60.5.

[acoutts]

Still an issue in 0.61.2 as well.

[MaxInMoon]

On RN 61.5, setting this prop:

selection={{
  start: 0,
}}

will do the good display (if not focused), but on focus, the cursor will be at start instead of at end.
A possible solution would be to control the selection object with onSelectionChange and the onFocus event.

Not so sexy but it could maybe work.

[NelsonBrandao]

Any news on this?

[Sargnec]

Dont we have solution for this yet?

[IlinIgor]

This is still an issue in 0.61.5, is any news on this?

[burtjrp]

I am having this issue as well on "react-native": "0.61.5"

[fabriziobertoglio1987]

On RN 61.5, setting this prop:

selection={{
  start: 0,
}}

will do the good display (if not focused), but on focus, the cursor will be at start instead of at end.
A possible solution would be to control the selection object with onSelectionChange and the onFocus event.

Not so sexy but it could maybe work.

  @Override
  public void setSelection(int start, int end) {
    super.setSelection(start, end);
  }

by settings the cursor position, you automatically scroll the TextInput, but this is not a good solution to this problem.

I know how to solve this and I have a pr ready for it, but I want to quickly look in the root issue of this problem.

Why are we scrolling to the end of the EditText onLoad ?? Did we override some default functioanlities included in AppCompatTextView or we missed something?

I am working on this issue

[fabriziobertoglio1987]

As this issue has 28 likes I'll give it special attention.

I reviewed carefully the source-code and I believe this is more of a feature request then a bug.

iOS and Android have different behaviour and the ReactNative developer has no access to a scrollTo method to allow him to scroll the TextInput to a specific position.

This is the example I used to test this functionality, which clearly shows how placeholder etc.. do not change the scrollTo position of an EditText, but if you change the value, the EditText will move to the end. This is the normal behaviour on Android, but the developer should be allowed to over-ride it with a method.

import React, { Component } from 'react';
import { Button, TextInput, ScrollView, StyleSheet } from 'react-native';

export default class App extends Component {
  state = { text: null }
  setText = () => {
    this.setState({ text: "A really long string of text that extends far beyond the end of the TextInput" });
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <TextInput 
          value={this.state.text}
          placeholder="A really long string of text that extends far beyond the end of the TextInput"
          style={styles.input}
        />
        <Button 
          title="Set Text"
          onPress={this.setText} />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
  },
  input: {
    height: 40,
    textAlign: "left",
  },
});

It is not easy pull request to add scrollTo method via the bridge for the following reasons:

1) Android scrollTo method is part of the View, which is the Root component behind the ReactViewGroup
2) TextInput has 4 methods. Adding one will take extensive review from facebook.
3) I was not able to track down how those methods work. Probably those methods are shared between different components. This is what I found:

One of the many places where the .focus() method could be imported/defined:
https://github.com/facebook/react-native/blob/02b8e67da392b8a06fb7cf9fbe8665cdc5ca9aa5/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js#L545-L547

Seems that they all use dispatchCommand to execute methods through the bridge
https://github.com/facebook/react-native/blob/02b8e67da392b8a06fb7cf9fbe8665cdc5ca9aa5/Libraries/Utilities/codegenNativeCommands.js#L24

Sending through the bridge
https://github.com/facebook/react-native/blob/02b8e67da392b8a06fb7cf9fbe8665cdc5ca9aa5/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js#L21031-L21056

4) ReactEditText was built from 35 Contributors and has only 4 methods. I belive that you need to be one of the Core Contributors to add a new method.

I believe the only acceptable solution to this problem would be adding scrollTo method in JavaScript, this can be done only from ReactNative Core contributor.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[N1ghtly]

Still running into this issue on 0.63.3, can this be re-opened?

[sungsong88]

selection={{
  start: 0,
}}

This fixes the head-of-the-string-getting-chopped issue, but still no ellipsis...