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)

2. node -v: v7.7.2
3. npm -v: 4.1.2
4. 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.

[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

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

[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"

[fabOnReact]

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

[fabOnReact]

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:

react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

Lines 545 to 547 in 02b8e67

	export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
	supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
	});

Seems that they all use dispatchCommand to execute methods through the bridge

react-native/Libraries/Utilities/codegenNativeCommands.js

Line 24 in 02b8e67

dispatchCommand(ref, command, args);

Sending through the bridge

react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js

Lines 21031 to 21056 in 02b8e67

	function dispatchCommand(handle, command, args) {
	if (handle._nativeTag == null) {
	{
	error(
	"dispatchCommand was called with a ref that isn't a " +
	"native component. Use React.forwardRef to get access to the underlying native component"
	);
	}
	return;
	}
	if (handle._internalInstanceHandle) {
	nativeFabricUIManager.dispatchCommand(
	handle._internalInstanceHandle.stateNode.node,
	command,
	args
	);
	} else {
	ReactNativePrivateInterface.UIManager.dispatchViewManagerCommand(
	handle._nativeTag,
	command,
	args
	);
	}
	}

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]

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]

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.

[xanderdeseyn]

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

[Nualiian]

This issue is still going strong in 0.63.4

[KrifaYounes]

still going
someone can fix it ?

[thanhluantl2304]

still stuck on this in 2021! Any update on this???

[ortonomy]

Not sure there is any development going on in core react native these days. Does Facebook even use it internally?

[smartcris]

See on their Documentation the IOS version is still messed up

[jatin8877]

Use textAlign:'auto', it should work for you

[vladimirevstratov]

Same issue, persists in RN v0.70.0. May be any update? Proposed solutions don't work.

[Yurii-Lutsyk]

Same issue RN v0.70.6.

[SwikarBhattarai]

Why this issue hasn't been solved yet ??? Its been more than 6 years

[ritathesaver]

Why this issue hasn't been solved yet ??? Its been more than 6 years

it's been 7 already..