Skip to content

Commit

Permalink
Android Text component allowFontScaling
Browse files Browse the repository at this point in the history
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 facebook#10898

Differential Revision: D4335190

Pulled By: lacker

fbshipit-source-id: 0480809c44983644ff2abfcaf4887569b2bfede5
  • Loading branch information
Steven Goff authored and facebook-github-bot committed Dec 16, 2016
1 parent 23e2610 commit 4394419
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 5 deletions.
2 changes: 0 additions & 2 deletions Libraries/Text/Text.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,9 @@ protected static Spannable fromTextCSSNode(ReactTextShadowNode textCSSNode) {
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);
Expand Down Expand Up @@ -305,12 +307,15 @@ private static int parseNumericFontWeight(String fontWeightString) {

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;
Expand Down Expand Up @@ -412,10 +417,26 @@ public void setNumberOfLines(int numberOfLines) {

@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)) {
Expand All @@ -437,8 +458,10 @@ public void setTextAlign(@Nullable String textAlign) {

@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();
Expand Down

0 comments on commit 4394419

Please sign in to comment.