Inconsistent text behavior in TextInput between iOS and Android

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.

[Nualiian]

This issue is still going strong in 0.63.4

[MickaelNeves]

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