facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.04k stars 24.32k forks source link

Android: Expose HyphenationFrequency on Text #17199

Closed sebaslogen closed 6 years ago

sebaslogen commented 6 years ago

Is this a bug report?

yes

Have you read the Contributing Guidelines?

Yes

Environment

OS: Windows 10 Node: 9.2.1 Yarn: 1.3.2 npm: 5.5.1 Watchman: Not Found Xcode: N/A Android Studio: Version 2.3.0.0 AI-162.4069837

Packages: (wanted => installed) react: ^16.2.0 => 16.2.0 react-native: ^0.50.4 => 0.50.4

Target Platform: Android (6)

Steps to Reproduce

Using a Text view in Android and iOS to show text with hyphenation characters: in iOS the text is displayed using the whole line width with hyphen characters but in Android the text lines break usually without showing hyphen characters when needed, making the text look ugly in Android and not using the full width of the line.

The problem in Android is that TextView attribute hyphenationFrequency is set to HYPHENATION_FREQUENCY_NORMAL by default and the desired behavior consistent with iOS is to use HYPHENATION_FREQUENCY_FULL in the React Native ReactTextView

Example:

Current Adnroid outcome: "very long sentences usually break line incorrect- ly"

Expected Adnroid outcome: "in very long senten- ces break line correc- tly"

Reproduction steps

  1. Create a text component
  2. Use this long hyphenated text in a ReactTextView "Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list Free­lan­ce­jour­na­list"
  3. Make sure the screen width is small enough so the text has to break a couple of times (phone portrait mode)

Expected Behavior

At the end of the lines there are hyphen characters breaking long words before text continues to the next line. The text has a similar line breaking with hyphens in Android and iOS.

Actual Behavior

At the end of the lines there are no hyphen characters breaking long words before text continues to the next line and text lines don't use the full width of the text view, leaving big white spaces at the end of a line. The text has different line breaking structure and most lines don't show hyphens in Android compared to iOS.

Reproducible Demo

https://snack.expo.io/Syh0901MM

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

sebaslogen commented 6 years ago

Still reproducible.

react-native-bot commented 6 years ago

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers

mgtitimoli commented 6 years ago

This is not an issue itself, but a feature request that to summarize, there is currently no way to set hyphenation frequency on Android.

Having no way to set this, reduces the control over how the platform breaks text, as there are time that's not enough to set textBreakingStrategy to simple to avoid cutting words in the middle, where setting hyphenation frequency to none leaves no other alternative to the OS and cutting is entirely prevented.

Currently it's set to normal as it can be seen here and here where IMHO a better default would have been none or exposing this to the user as this issue is asking for.