New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent text behavior in TextInput between iOS and Android #14845

Open
davidlongest opened this Issue Jul 5, 2017 · 14 comments

Comments

Projects
None yet
@davidlongest
Copy link

davidlongest commented Jul 5, 2017

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.

screen shot 2017-07-05 at 5 51 34 pm

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

screen shot 2017-07-05 at 5 51 11 pm

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 comment has been minimized.

Copy link

davidlongest commented Jul 5, 2017

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 hramos added the Icebox label Sep 21, 2017

@hramos

This comment was marked as outdated.

Copy link
Contributor

hramos commented Sep 21, 2017

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

This comment has been minimized.

Copy link

scottmas commented Mar 1, 2018

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

@hramos

This comment has been minimized.

Copy link
Contributor

hramos commented Mar 1, 2018

v0.53 or v0.54?

@scottmas

This comment has been minimized.

Copy link

scottmas commented Mar 1, 2018

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

@scottmas

This comment has been minimized.

Copy link

scottmas commented Mar 1, 2018

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

@chunshien

This comment has been minimized.

Copy link

chunshien commented Mar 13, 2018

0.54.2 still having the same issue

@ashwanipayal

This comment was marked as off-topic.

Copy link

ashwanipayal commented Mar 29, 2018

I am facing this issue too.

@peterdoboz

This comment was marked as off-topic.

Copy link

peterdoboz commented Jun 20, 2018

Is there any updates for this issue ?

@quadsurf

This comment has been minimized.

Copy link

quadsurf commented Aug 18, 2018

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

This comment has been minimized.

Copy link

andhie commented Aug 18, 2018

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>

screenshot_1534611564

@hramos hramos removed the 🔷iOS label Sep 11, 2018

@MickaelNeves

This comment has been minimized.

Copy link

MickaelNeves commented Oct 2, 2018

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

@MickaelNeves

This comment was marked as off-topic.

Copy link

MickaelNeves commented Dec 5, 2018

Any update on this?

@celineotter

This comment was marked as outdated.

Copy link

celineotter commented Jan 4, 2019

0.56.1 still having this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment