mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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
This commit is contained in:
committed by
Facebook GitHub Bot
parent
8ceb808937
commit
0fda91ffff
@@ -68,6 +68,7 @@ const viewConfig = {
|
||||
onTextLayout: true,
|
||||
onInlineViewLayout: true,
|
||||
dataDetectorType: true,
|
||||
android_hyphenationFrequency: true,
|
||||
},
|
||||
directEventTypes: {
|
||||
topTextLayout: {
|
||||
|
||||
@@ -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,
|
||||
|
||||
/**
|
||||
|
||||
@@ -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.
|
||||
|
||||
+19
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user