Skip to content

Commit 0fda91f

Browse files
fabOnReactfacebook-github-bot
authored andcommitted
Adding Hyphenation Frequency prop for Text component (#29157)
Summary: This issue fixes #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: #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
1 parent 8ceb808 commit 0fda91f

File tree

4 files changed

+55
-0
lines changed

4 files changed

+55
-0
lines changed

Libraries/Text/Text.js

+1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const viewConfig = {
6868
onTextLayout: true,
6969
onInlineViewLayout: true,
7070
dataDetectorType: true,
71+
android_hyphenationFrequency: true,
7172
},
7273
directEventTypes: {
7374
topTextLayout: {

Libraries/Text/TextProps.js

+12
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ export type TextProps = $ReadOnly<{|
5757
* See https://reactnative.dev/docs/text.html#allowfontscaling
5858
*/
5959
allowFontScaling?: ?boolean,
60+
61+
/**
62+
* Set hyphenation strategy on Android.
63+
*
64+
*/
65+
android_hyphenationFrequency?: ?(
66+
| 'normal'
67+
| 'none'
68+
| 'full'
69+
| 'high'
70+
| 'balanced'
71+
),
6072
children?: ?Node,
6173

6274
/**

RNTester/js/examples/Text/TextExample.android.js

+23
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ class AdjustingFontSize extends React.Component<
146146
<Text
147147
adjustsFontSizeToFit={true}
148148
numberOfLines={4}
149+
android_hyphenationFrequency="normal"
149150
style={{fontSize: 20, marginVertical: 6}}>
150151
{'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 ' +
151152
' ' +
@@ -207,6 +208,28 @@ class TextExample extends React.Component<{...}> {
207208
going to the next line.
208209
</Text>
209210
</RNTesterBlock>
211+
<RNTesterBlock title="Hyphenation">
212+
<Text android_hyphenationFrequency="normal">
213+
<Text style={{color: 'red'}}>Normal: </Text>
214+
WillHaveAnHyphenWhenBreakingForNewLine
215+
</Text>
216+
<Text android_hyphenationFrequency="none">
217+
<Text style={{color: 'red'}}>None: </Text>
218+
WillNotHaveAnHyphenWhenBreakingForNewLine
219+
</Text>
220+
<Text android_hyphenationFrequency="full">
221+
<Text style={{color: 'red'}}>Full: </Text>
222+
WillHaveAnHyphenWhenBreakingForNewLine
223+
</Text>
224+
<Text android_hyphenationFrequency="high">
225+
<Text style={{color: 'red'}}>High: </Text>
226+
WillHaveAnHyphenWhenBreakingForNewLine
227+
</Text>
228+
<Text android_hyphenationFrequency="balanced">
229+
<Text style={{color: 'red'}}>Balanced: </Text>
230+
WillHaveAnHyphenWhenBreakingForNewLine
231+
</Text>
232+
</RNTesterBlock>
210233
<RNTesterBlock title="Padding">
211234
<Text style={{padding: 10}}>
212235
This text is indented by 10px padding on all sides.

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java

+19
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
package com.facebook.react.views.text;
99

10+
import android.text.Layout;
1011
import android.text.Spannable;
1112
import android.text.TextUtils;
1213
import android.text.util.Linkify;
@@ -96,6 +97,24 @@ public void setSelectionColor(ReactTextView view, @Nullable Integer color) {
9697
}
9798
}
9899

100+
@ReactProp(name = "android_hyphenationFrequency")
101+
public void setAndroidHyphenationFrequency(ReactTextView view, @Nullable String frequency) {
102+
if (frequency == null || frequency.equals("none")) {
103+
view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NONE);
104+
} else if (frequency.equals("full")) {
105+
view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_FULL);
106+
} else if (frequency.equals("balanced")) {
107+
view.setHyphenationFrequency(Layout.BREAK_STRATEGY_BALANCED);
108+
} else if (frequency.equals("high")) {
109+
view.setHyphenationFrequency(Layout.BREAK_STRATEGY_HIGH_QUALITY);
110+
} else if (frequency.equals("normal")) {
111+
view.setHyphenationFrequency(Layout.HYPHENATION_FREQUENCY_NORMAL);
112+
} else {
113+
throw new JSApplicationIllegalArgumentException(
114+
"Invalid android_hyphenationFrequency: " + frequency);
115+
}
116+
}
117+
99118
@ReactPropGroup(
100119
names = {
101120
ViewProps.BORDER_RADIUS,

0 commit comments

Comments
 (0)