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:
parent
23e2610f4f
commit
4394419b60
|
@ -153,8 +153,6 @@ const Text = React.createClass({
|
||||||
/**
|
/**
|
||||||
* Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
|
* Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The
|
||||||
* default is `true`.
|
* default is `true`.
|
||||||
*
|
|
||||||
* @platform ios
|
|
||||||
*/
|
*/
|
||||||
allowFontScaling: React.PropTypes.bool,
|
allowFontScaling: React.PropTypes.bool,
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -83,6 +83,8 @@ public class ViewProps {
|
||||||
public static final String TEXT_ALIGN_VERTICAL = "textAlignVertical";
|
public static final String TEXT_ALIGN_VERTICAL = "textAlignVertical";
|
||||||
public static final String TEXT_DECORATION_LINE = "textDecorationLine";
|
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_WIDTH = "borderWidth";
|
||||||
public static final String BORDER_LEFT_WIDTH = "borderLeftWidth";
|
public static final String BORDER_LEFT_WIDTH = "borderLeftWidth";
|
||||||
public static final String BORDER_TOP_WIDTH = "borderTopWidth";
|
public static final String BORDER_TOP_WIDTH = "borderTopWidth";
|
||||||
|
|
|
@ -195,7 +195,9 @@ public class ReactTextShadowNode extends LayoutShadowNode {
|
||||||
buildSpannedFromTextCSSNode(textCSSNode, sb, ops);
|
buildSpannedFromTextCSSNode(textCSSNode, sb, ops);
|
||||||
if (textCSSNode.mFontSize == UNSET) {
|
if (textCSSNode.mFontSize == UNSET) {
|
||||||
sb.setSpan(
|
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,
|
0,
|
||||||
sb.length(),
|
sb.length(),
|
||||||
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
|
Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
|
||||||
|
@ -305,12 +307,15 @@ public class ReactTextShadowNode extends LayoutShadowNode {
|
||||||
|
|
||||||
private float mLineHeight = Float.NaN;
|
private float mLineHeight = Float.NaN;
|
||||||
private boolean mIsColorSet = false;
|
private boolean mIsColorSet = false;
|
||||||
|
private boolean mAllowFontScaling = true;
|
||||||
private int mColor;
|
private int mColor;
|
||||||
private boolean mIsBackgroundColorSet = false;
|
private boolean mIsBackgroundColorSet = false;
|
||||||
private int mBackgroundColor;
|
private int mBackgroundColor;
|
||||||
|
|
||||||
protected int mNumberOfLines = UNSET;
|
protected int mNumberOfLines = UNSET;
|
||||||
protected int mFontSize = UNSET;
|
protected int mFontSize = UNSET;
|
||||||
|
protected float mFontSizeInput = UNSET;
|
||||||
|
protected int mLineHeightInput = UNSET;
|
||||||
protected int mTextAlign = Gravity.NO_GRAVITY;
|
protected int mTextAlign = Gravity.NO_GRAVITY;
|
||||||
|
|
||||||
private float mTextShadowOffsetDx = 0;
|
private float mTextShadowOffsetDx = 0;
|
||||||
|
@ -412,10 +417,26 @@ public class ReactTextShadowNode extends LayoutShadowNode {
|
||||||
|
|
||||||
@ReactProp(name = ViewProps.LINE_HEIGHT, defaultInt = UNSET)
|
@ReactProp(name = ViewProps.LINE_HEIGHT, defaultInt = UNSET)
|
||||||
public void setLineHeight(int lineHeight) {
|
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();
|
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)
|
@ReactProp(name = ViewProps.TEXT_ALIGN)
|
||||||
public void setTextAlign(@Nullable String textAlign) {
|
public void setTextAlign(@Nullable String textAlign) {
|
||||||
if (textAlign == null || "auto".equals(textAlign)) {
|
if (textAlign == null || "auto".equals(textAlign)) {
|
||||||
|
@ -437,8 +458,10 @@ public class ReactTextShadowNode extends LayoutShadowNode {
|
||||||
|
|
||||||
@ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = UNSET)
|
@ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = UNSET)
|
||||||
public void setFontSize(float fontSize) {
|
public void setFontSize(float fontSize) {
|
||||||
|
mFontSizeInput = fontSize;
|
||||||
if (fontSize != UNSET) {
|
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;
|
mFontSize = (int) fontSize;
|
||||||
markUpdated();
|
markUpdated();
|
||||||
|
|
Loading…
Reference in New Issue