status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Android Text component allowFontScaling 

Summary:
The reason for this change is to implement `allowFontScaling` on the Android's React Native Text component.  Prior to this PR `allowFontScaling` only works for iOS.

The following link contains images of `allowFontScaling` working in Android on small, normal, large, and huge system fonts (from native Android display settings)

http://imgur.com/a/94bF1

The following link is a video of the same thing working on an Android emulator

https://youtu.be/1jTlZhPdj9Y

Here is the sample code snippet driving the video/images
```
render() {
    const size = [12, 14, 16, 18];
    return (
      <View style={{backgroundColor: 'white', flex: 1}}>
        <Text>
          Default size no allowFontScaling prop (default true)
        </Text>
        <Text allowFontScaling={true}>
          Default size allowFontScaling: true
        </Text>
        <Text style={{ marginBottom: 10, }} allowFontScaling={false}>
          Default size allowFontScaling: false
        </Text>

        { size.map(
Closes https://github.com/facebook/react-native/pull/10898

Differential Revision: D4335190

Pulled By: lacker

fbshipit-source-id: 0480809c44983644ff2abfcaf4887569b2bfede5
This commit is contained in:
Steven Goff 2016-12-15 17:41:12 -08:00 committed by Facebook Github Bot
parent 23e2610f4f
commit 4394419b60
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Libraries/Text/Text.js
View File

@ -153,8 +153,6 @@ const Text = React.createClass({
/**
* Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
* default is `true`.
*
* @platform ios
*/
allowFontScaling: React.PropTypes.bool,
/**

2
ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
View File

@ -83,6 +83,8 @@ public class ViewProps {
public static final String TEXT_ALIGN_VERTICAL = "textAlignVertical";
public static final String TEXT_DECORATION_LINE = "textDecorationLine";
public static final String ALLOW_FONT_SCALING = "allowFontScaling";
public static final String BORDER_WIDTH = "borderWidth";
public static final String BORDER_LEFT_WIDTH = "borderLeftWidth";
public static final String BORDER_TOP_WIDTH = "borderTopWidth";

29
ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java
View File

@ -195,7 +195,9 @@ public class ReactTextShadowNode extends LayoutShadowNode {
buildSpannedFromTextCSSNode(textCSSNode, sb, ops);
if (textCSSNode.mFontSize == UNSET) {
sb.setSpan(
new AbsoluteSizeSpan((int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP))),
new AbsoluteSizeSpan(textCSSNode.mAllowFontScaling
? (int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP))
: (int) Math.ceil(PixelUtil.toPixelFromDIP(ViewDefaults.FONT_SIZE_SP))),
0,
sb.length(),
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
@ -305,12 +307,15 @@ public class ReactTextShadowNode extends LayoutShadowNode {
private float mLineHeight = Float.NaN;
private boolean mIsColorSet = false;
private boolean mAllowFontScaling = true;
private int mColor;
private boolean mIsBackgroundColorSet = false;
private int mBackgroundColor;
protected int mNumberOfLines = UNSET;
protected int mFontSize = UNSET;
protected float mFontSizeInput = UNSET;
protected int mLineHeightInput = UNSET;
protected int mTextAlign = Gravity.NO_GRAVITY;
private float mTextShadowOffsetDx = 0;
@ -412,10 +417,26 @@ public class ReactTextShadowNode extends LayoutShadowNode {
@ReactProp(name = ViewProps.LINE_HEIGHT, defaultInt = UNSET)
public void setLineHeight(int lineHeight) {
mLineHeight = lineHeight == UNSET ? Float.NaN : PixelUtil.toPixelFromSP(lineHeight);
mLineHeightInput = lineHeight;
if (lineHeight == UNSET) {
mLineHeight = Float.NaN;
} else {
mLineHeight = mAllowFontScaling ?
PixelUtil.toPixelFromSP(lineHeight) : PixelUtil.toPixelFromDIP(lineHeight);
}
markUpdated();
}
@ReactProp(name = ViewProps.ALLOW_FONT_SCALING, defaultBoolean = true)
public void setAllowFontScaling(boolean allowFontScaling) {
if (allowFontScaling != mAllowFontScaling) {
mAllowFontScaling = allowFontScaling;
setFontSize(mFontSizeInput);
setLineHeight(mLineHeightInput);
markUpdated();
}
}
@ReactProp(name = ViewProps.TEXT_ALIGN)
public void setTextAlign(@Nullable String textAlign) {
if (textAlign == null || "auto".equals(textAlign)) {
@ -437,8 +458,10 @@ public class ReactTextShadowNode extends LayoutShadowNode {
@ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = UNSET)
public void setFontSize(float fontSize) {
mFontSizeInput = fontSize;
if (fontSize != UNSET) {
fontSize = (float) Math.ceil(PixelUtil.toPixelFromSP(fontSize));
fontSize = mAllowFontScaling ? (float) Math.ceil(PixelUtil.toPixelFromSP(fontSize))
: (float) Math.ceil(PixelUtil.toPixelFromDIP(fontSize));
}
mFontSize = (int) fontSize;
markUpdated();