From 0fda91ffffa4972ebe58e3d0b610692a1286eaa1 Mon Sep 17 00:00:00 2001
From: fabriziobertoglio1987 <fabrizio.bertoglio@gmail.com>
Date: Mon, 29 Jun 2020 16:55:04 -0700
Subject: [PATCH] Adding Hyphenation Frequency prop for Text component (#29157)

Summary:
This issue fixes https://github.com/facebook/react-native/issues/28279
android_hyphenationFrequency prop for Android Text component which sets the frequency of automatic hyphenation to use when determining word breaks.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Adding Hyphenation Frequency prop for Text component
Pull Request resolved: https://github.com/facebook/react-native/pull/29157

Test Plan:
More info are available in the [android docs](https://developer.android.com/reference/android/widget/TextView#setHyphenationFrequency(int)). I will add the documentation to the docs later once the pull request is taken in consideration for merging.

| **AFTER** |
|:-------------------------:|
|  <img src="https://user-images.githubusercontent.com/24992535/84919245-f8f1e300-b0c1-11ea-8a33-f30d0c9a75b7.png"  width="300" height="" />|

I remain available to do improvements. Thanks a lot. Fabrizio.

Reviewed By: TheSavior

Differential Revision: D22219548

Pulled By: JoshuaGross

fbshipit-source-id: 7e2523c25adfcd75454f60184eb73dc49891bef7
---
 Libraries/Text/Text.js                        |  1 +
 Libraries/Text/TextProps.js                   | 12 ++++++++++
 .../js/examples/Text/TextExample.android.js   | 23 +++++++++++++++++++
 .../text/ReactTextAnchorViewManager.java      | 19 +++++++++++++++
 4 files changed, 55 insertions(+)

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
index 660dd879761..6ff8c14c267 100644
--- a/Libraries/Text/Text.js
+++ b/Libraries/Text/Text.js
@@ -68,6 +68,7 @@ const viewConfig = {
     onTextLayout: true,
     onInlineViewLayout: true,
     dataDetectorType: true,
+    android_hyphenationFrequency: true,
   },
   directEventTypes: {
     topTextLayout: {
diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js
index 009929e8ff7..4b48bc57066 100644
--- a/Libraries/Text/TextProps.js
+++ b/Libraries/Text/TextProps.js
@@ -57,6 +57,18 @@ export type TextProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/text.html#allowfontscaling
    */
   allowFontScaling?: ?boolean,
+
+  /**
+   * Set hyphenation strategy on Android.
+   *
+   */
+  android_hyphenationFrequency?: ?(
+    | 'normal'
+    | 'none'
+    | 'full'
+    | 'high'
+    | 'balanced'
+  ),
   children?: ?Node,
 
   /**
diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js
index f9631821f99..cec4b348d19 100644
--- a/RNTester/js/examples/Text/TextExample.android.js
+++ b/RNTester/js/examples/Text/TextExample.android.js
@@ -146,6 +146,7 @@ class AdjustingFontSize extends React.Component<
         <Text
           adjustsFontSizeToFit={true}
           numberOfLines={4}
+          android_hyphenationFrequency="normal"
           style={{fontSize: 20, marginVertical: 6}}>
           {'Multiline text component shrinking is supported, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' +
             ' ' +
@@ -207,6 +208,28 @@ class TextExample extends React.Component<{...}> {
             going to the next line.
           </Text>
         </RNTesterBlock>
+        <RNTesterBlock title="Hyphenation">
+          <Text android_hyphenationFrequency="normal">
+            <Text style={{color: 'red'}}>Normal: </Text>
+            WillHaveAnHyphenWhenBreakingForNewLine
+          </Text>
+          <Text android_hyphenationFrequency="none">
+            <Text style={{color: 'red'}}>None: </Text>
+            WillNotHaveAnHyphenWhenBreakingForNewLine
+          </Text>
+          <Text android_hyphenationFrequency="full">
+            <Text style={{color: 'red'}}>Full: </Text>
+            WillHaveAnHyphenWhenBreakingForNewLine
+          </Text>
+          <Text android_hyphenationFrequency="high">
+            <Text style={{color: 'red'}}>High: </Text>
+            WillHaveAnHyphenWhenBreakingForNewLine
+          </Text>
+          <Text android_hyphenationFrequency="balanced">
+            <Text style={{color: 'red'}}>Balanced: </Text>
+            WillHaveAnHyphenWhenBreakingForNewLine
+          </Text>
+        </RNTesterBlock>
         <RNTesterBlock title="Padding">
           <Text style={{padding: 10}}>
             This text is indented by 10px padding on all sides.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
index 401c8a0fa34..4fdbd76abab 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
@@ -7,6 +7,7 @@
 
 package com.facebook.react.views.text;
 
+import android.text.Layout;
 import android.text.Spannable;
 import android.text.TextUtils;
 import android.text.util.Linkify;
@@ -96,6 +97,24 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
     }
   }
 
+  @ReactProp(name = "android_hyphenationFrequency")
+  public void setAndroidHyphenationFrequency(ReactTextView view, @Nullable String frequency) {
+    if (frequency == null || frequency.equals("none")) {
+      view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE);
+    } else if (frequency.equals("full")) {
+      view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_FULL);
+    } else if (frequency.equals("balanced")) {
+      view.setHyphenationFrequency(Layout.BREAK_STRATEGY_BALANCED);
+    } else if (frequency.equals("high")) {
+      view.setHyphenationFrequency(Layout.BREAK_STRATEGY_HIGH_QUALITY);
+    } else if (frequency.equals("normal")) {
+      view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NORMAL);
+    } else {
+      throw new JSApplicationIllegalArgumentException(
+          "Invalid android_hyphenationFrequency: " + frequency);
+    }
+  }
+
   @ReactPropGroup(
       names = {
         ViewProps.BORDER_RADIUS,