Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Android] Adding Hyphenation Frequency prop for Text component #29157

Closed
wants to merge 8 commits into from
Closed

[Android] Adding Hyphenation Frequency prop for Text component #29157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
430df65
adding prop type to Text component
fabOnReact Jun 17, 2020
da73c2f
android HyphenationFrequency setter
fabOnReact Jun 17, 2020
3660768
adding text for HyphenationFrequency
fabOnReact Jun 17, 2020
f8b1f70
removing un-used constant from RNTester
fabOnReact Jun 17, 2020
25df8e3
fix linter
fabOnReact Jun 17, 2020
0c86fb4
fix linting issues
fabOnReact Jun 17, 2020
4500095
rename prop to android_hyphenationFrequency
fabOnReact Jun 18, 2020
14709f8
avoid calling method for API < 21
fabOnReact Jun 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Libraries/Text/Text.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
22 changes: 22 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

package com.facebook.react.views.text;

import android.os.Build;
import android.text.Layout;
import android.text.Spannable;
import android.text.TextUtils;
import android.text.util.Linkify;
Expand Down Expand Up @@ -96,6 +98,26 @@ 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")) {
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