From 430df65ef42fdac67e6ee884ca24cfb8578eb8ef Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 17:30:34 +0200 Subject: [PATCH 1/8] adding prop type to Text component --- Libraries/Text/Text.js | 1 + Libraries/Text/TextProps.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 660dd87976121f..1bca56c437114c 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -68,6 +68,7 @@ const viewConfig = { onTextLayout: true, onInlineViewLayout: true, dataDetectorType: true, + androidHyphenationFrequency: true, }, directEventTypes: { topTextLayout: { diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index 009929e8ff7076..7777bba4caa6df 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -57,6 +57,12 @@ export type TextProps = $ReadOnly<{| * See https://reactnative.dev/docs/text.html#allowfontscaling */ allowFontScaling?: ?boolean, + + /** + * Set hyphenation strategy on Android. + * + */ + androidHyphenationFrequency?: ?('normal' | 'none' | 'full' | 'high' | 'balanced'), children?: ?Node, /** From da73c2f5254e58b2dce332010c4b2a3ffbc62228 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 17:34:02 +0200 Subject: [PATCH 2/8] android HyphenationFrequency setter --- .../views/text/ReactTextAnchorViewManager.java | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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 401c8a0fa34a74..966e04260059bd 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,23 @@ public void setSelectionColor(ReactTextView view, @Nullable Integer color) { } } + @ReactProp(name = "androidHyphenationFrequency") + 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 androidHyphenationFrequency: " + frequency); + } + } + @ReactPropGroup( names = { ViewProps.BORDER_RADIUS, From 3660768ff7679bfcee7df0c83d9f112ab3e123c3 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 17:35:15 +0200 Subject: [PATCH 3/8] adding text for HyphenationFrequency --- .../js/examples/Text/TextExample.android.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js index f9631821f9900f..e6b37cd9f3015a 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< {'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 ' + ' ' + @@ -194,6 +195,7 @@ class AdjustingFontSize extends React.Component< } } +const testString = 'sup\u00ADer\u00ADfrag\u00ADilis\u00ADtice\u00ADxpial\u00ADidocious' class TextExample extends React.Component<{...}> { render(): React.Node { return ( @@ -207,6 +209,38 @@ class TextExample extends React.Component<{...}> { going to the next line. + + + + Normal: + WillHaveAnHyphenWhenBreakingForNewLine + + + + None: + WillNotHaveAnHyphenWhenBreakingForNewLine + + + + Full: + WillHaveAnHyphenWhenBreakingForNewLine + + + + High: + WillHaveAnHyphenWhenBreakingForNewLine + + + + Balanced: + WillHaveAnHyphenWhenBreakingForNewLine + + This text is indented by 10px padding on all sides. From f8b1f70f1ff1de0c8dd7129a0ab4f3f75de2ebd1 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 17:57:48 +0200 Subject: [PATCH 4/8] removing un-used constant from RNTester --- RNTester/js/examples/Text/TextExample.android.js | 1 - 1 file changed, 1 deletion(-) diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js index e6b37cd9f3015a..48a58c14e25825 100644 --- a/RNTester/js/examples/Text/TextExample.android.js +++ b/RNTester/js/examples/Text/TextExample.android.js @@ -195,7 +195,6 @@ class AdjustingFontSize extends React.Component< } } -const testString = 'sup\u00ADer\u00ADfrag\u00ADilis\u00ADtice\u00ADxpial\u00ADidocious' class TextExample extends React.Component<{...}> { render(): React.Node { return ( From 25df8e3048a0733ba3ab1af1902056cafb48fd51 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 18:22:29 +0200 Subject: [PATCH 5/8] fix linter --- .../js/examples/Text/TextExample.android.js | 40 +++++++------------ 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js index 48a58c14e25825..12b028e9d3ef4c 100644 --- a/RNTester/js/examples/Text/TextExample.android.js +++ b/RNTester/js/examples/Text/TextExample.android.js @@ -209,35 +209,25 @@ class TextExample extends React.Component<{...}> { - - - Normal: - WillHaveAnHyphenWhenBreakingForNewLine + + Normal: + WillHaveAnHyphenWhenBreakingForNewLine - - - None: - WillNotHaveAnHyphenWhenBreakingForNewLine + + None: + WillNotHaveAnHyphenWhenBreakingForNewLine - - - Full: - WillHaveAnHyphenWhenBreakingForNewLine + + Full: + WillHaveAnHyphenWhenBreakingForNewLine - - - High: - WillHaveAnHyphenWhenBreakingForNewLine + + High: + WillHaveAnHyphenWhenBreakingForNewLine - - - Balanced: - WillHaveAnHyphenWhenBreakingForNewLine + + Balanced: + WillHaveAnHyphenWhenBreakingForNewLine From 0c86fb4e19e12179c45c27647d57b9ab83df5d78 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Wed, 17 Jun 2020 18:40:40 +0200 Subject: [PATCH 6/8] fix linting issues --- Libraries/Text/TextProps.js | 8 +++++++- RNTester/js/examples/Text/TextExample.android.js | 10 +++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index 7777bba4caa6df..c80cdf17279281 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -62,7 +62,13 @@ export type TextProps = $ReadOnly<{| * Set hyphenation strategy on Android. * */ - androidHyphenationFrequency?: ?('normal' | 'none' | 'full' | 'high' | 'balanced'), + androidHyphenationFrequency?: ?( + | '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 12b028e9d3ef4c..eca1291d21c4f1 100644 --- a/RNTester/js/examples/Text/TextExample.android.js +++ b/RNTester/js/examples/Text/TextExample.android.js @@ -210,23 +210,23 @@ class TextExample extends React.Component<{...}> { - Normal: + Normal: WillHaveAnHyphenWhenBreakingForNewLine - None: + None: WillNotHaveAnHyphenWhenBreakingForNewLine - Full: + Full: WillHaveAnHyphenWhenBreakingForNewLine - High: + High: WillHaveAnHyphenWhenBreakingForNewLine - Balanced: + Balanced: WillHaveAnHyphenWhenBreakingForNewLine From 4500095ef33a6a95f7daa8debd6fa9f069ba7ea3 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Thu, 18 Jun 2020 09:21:40 +0200 Subject: [PATCH 7/8] rename prop to android_hyphenationFrequency --- Libraries/Text/Text.js | 2 +- Libraries/Text/TextProps.js | 2 +- RNTester/js/examples/Text/TextExample.android.js | 12 ++++++------ .../react/views/text/ReactTextAnchorViewManager.java | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 1bca56c437114c..6ff8c14c267d92 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -68,7 +68,7 @@ const viewConfig = { onTextLayout: true, onInlineViewLayout: true, dataDetectorType: true, - androidHyphenationFrequency: true, + android_hyphenationFrequency: true, }, directEventTypes: { topTextLayout: { diff --git a/Libraries/Text/TextProps.js b/Libraries/Text/TextProps.js index c80cdf17279281..4b48bc57066a4d 100644 --- a/Libraries/Text/TextProps.js +++ b/Libraries/Text/TextProps.js @@ -62,7 +62,7 @@ export type TextProps = $ReadOnly<{| * Set hyphenation strategy on Android. * */ - androidHyphenationFrequency?: ?( + android_hyphenationFrequency?: ?( | 'normal' | 'none' | 'full' diff --git a/RNTester/js/examples/Text/TextExample.android.js b/RNTester/js/examples/Text/TextExample.android.js index eca1291d21c4f1..cec4b348d19fe4 100644 --- a/RNTester/js/examples/Text/TextExample.android.js +++ b/RNTester/js/examples/Text/TextExample.android.js @@ -146,7 +146,7 @@ class AdjustingFontSize extends React.Component< {'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 ' + ' ' + @@ -209,23 +209,23 @@ class TextExample extends React.Component<{...}> { - + Normal: WillHaveAnHyphenWhenBreakingForNewLine - + None: WillNotHaveAnHyphenWhenBreakingForNewLine - + Full: WillHaveAnHyphenWhenBreakingForNewLine - + High: WillHaveAnHyphenWhenBreakingForNewLine - + Balanced: WillHaveAnHyphenWhenBreakingForNewLine 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 966e04260059bd..fea099fc892175 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 @@ -97,7 +97,7 @@ public void setSelectionColor(ReactTextView view, @Nullable Integer color) { } } - @ReactProp(name = "androidHyphenationFrequency") + @ReactProp(name = "android_hyphenationFrequency") public void setAndroidHyphenationFrequency(ReactTextView view, @Nullable String frequency) { if (frequency == null || frequency.equals("none")) { view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE); @@ -110,7 +110,7 @@ public void setAndroidHyphenationFrequency(ReactTextView view, @Nullable String } else if (frequency.equals("normal")) { view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NORMAL); } else { - throw new JSApplicationIllegalArgumentException("Invalid androidHyphenationFrequency: " + frequency); + throw new JSApplicationIllegalArgumentException("Invalid android_hyphenationFrequency: " + frequency); } } From 14709f80a3bd035fbcce69a7dc73234c3cffaf36 Mon Sep 17 00:00:00 2001 From: fabriziobertoglio1987 Date: Fri, 26 Jun 2020 08:03:27 +0200 Subject: [PATCH 8/8] avoid calling method for API < 21 --- .../facebook/react/views/text/ReactTextAnchorViewManager.java | 4 ++++ 1 file changed, 4 insertions(+) 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 fea099fc892175..4a448e9174704d 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.os.Build; import android.text.Layout; import android.text.Spannable; import android.text.TextUtils; @@ -99,6 +100,9 @@ public void setSelectionColor(ReactTextView view, @Nullable Integer color) { @ReactProp(name = "android_hyphenationFrequency") public void setAndroidHyphenationFrequency(ReactTextView view, @Nullable String frequency) { + if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) { + return; + } if (frequency == null || frequency.equals("none")) { view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE); } else if (frequency.equals("full")) {