Skip to content

Commit

Permalink
Adding Hyphenation Frequency prop for Text component (#29157)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Jun 29, 2020
1 parent 8ceb808 commit 0fda91f
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 0 deletions.
1 change: 1 addition & 0 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const viewConfig = {
onTextLayout: true,
onInlineViewLayout: true,
dataDetectorType: true,
android_hyphenationFrequency: true,
},
directEventTypes: {
topTextLayout: {
Expand Down
12 changes: 12 additions & 0 deletions Libraries/Text/TextProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,

/**
Expand Down
23 changes: 23 additions & 0 deletions RNTester/js/examples/Text/TextExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ' +
' ' +
Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -96,6 +97,24 @@ public void setSelectionColor(ReactTextView view, @Nullable Integer color) {
}
}

@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,
Expand Down

0 comments on commit 0fda91f

Please sign in to comment.